CSS螢火蟲按鈕特效詳情 - 前端,css3,動畫南城FE 動態日志

如圖所示，這是一個很炫酷的按鈕懸浮特效，鼠標懸停時，按鈕呈現發光的效果，周邊還出現類型螢火蟲的效果。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出需要實現的要點：

有一個跟隨鼠標移動的圓點
按鈕懸停時有高亮發光的效果
懸停時按鈕周邊的螢火中效果

實現過程

跟隨鼠標移動的圓點

這個部分需要基於JS實現，但不是最主要的實現代碼

如果單純做一個跟隨鼠標移動的點很簡單，只需要監聽鼠標事件獲取座標實時更新到需要移動的元素上即可。但是仔細看這裏的效果並不是這樣，圓點是跟隨在鼠標後面，鼠標移動停止後圓點才會和鼠標重合。這裏是使用了一個名為 Kinet 的庫來實現的這個鼠標移動動畫效果，具體實現如下：

創建 Kinet 實例，傳入了自定義設置：
acceleration: 加速度，控制動畫的加速程度。
friction: 摩擦力，控制動畫的減速程度。
names: 定義了兩個屬性 x 和 y，用於表示動畫的兩個維度。

 var kinet = new Kinet({
   acceleration: 0.02,
   friction: 0.25,
   names: ["x", "y"],
 });

通過 document.getElementById 獲取頁面中 ID 為 circle 的元素，以便後續進行動畫處理。

var circle = document.getElementById('circle');

設置 Kinet 的 tick 事件處理:

監聽 tick 事件，每當 Kinet 更新時執行該函數。
instances 參數包含當前的 x 和 y 值及其速度。
使用 style.transform 屬性來更新圓形元素的位置和旋轉：
translate3d 用於在 3D 空間中移動元素。
rotateX 和 rotateY 用於根據當前速度旋轉元素。

 kinet.on('tick', function(instances) {
   circle.style.transform = `translate3d(${ (instances.x.current) }px, ${ (instances.y.current) }px, 0) rotateX(${ (instances.x.velocity/2) }deg) rotateY(${ (instances.y.velocity/2) }deg)`;
 });

聽 mousemove 事件，kinet.animate 方法用於更新 x 和 y 的目標值，計算方式是將鼠標的當前位置減去窗口的中心位置，使動畫圍繞窗口中心進行。

 document.addEventListener('mousemove', function (event) {
     kinet.animate('x', event.clientX - window.innerWidth/2);
     kinet.animate('y', event.clientY - window.innerHeight/2);
   });

隨着鼠標的移動這個圓點元素將在頁面上進行平滑的動畫。通過 Kinet 庫的加速度和摩擦力設置，動畫效果顯得更加自然，用户體驗更加生動。有興趣的可以嘗試調整參數解鎖其他玩法，此時我們的頁面效果如下：

按鈕懸停時發光效果

這裏主要通過懸停時設置transition過渡改變按鈕的內外陰影效果，陰影效果通過偽元素實現，默認透明度為0，按鈕樣式代碼如下：

.button {
  z-index: 1;
  position: relative;
  text-decoration: none;
  text-align: center;
  appearance: none;
  display: inline-block;
}

.button::before, .button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.3s;
}

.button::before {
  box-shadow: 0px 0px 24px 0px #FFEB3B;
}

.button::after {
  box-shadow: 0px 0px 23px 0px #FDFCA9 inset, 0px 0px 8px 0px #FFFFFF42;
}

當鼠標懸停在按鈕上時，通過改變偽元素的透明度，使發光效果在鼠標懸停時變得可見：

.button-wrapper:hover .button::before, 
.button-wrapper:hover .button::after {
  opacity: 1;
}

此時的按鈕效果如下：

懸停時螢火中效果

如頭部圖片所展示，螢火蟲效果是有多個圓點散開，所以這裏我們添加多個圓點元素。

  <span class="dot dot-1"></span>
  <span class="dot dot-2"></span>
  <span class="dot dot-3"></span>
  <span class="dot dot-4"></span>
  <span class="dot dot-5"></span>
  <span class="dot dot-6"></span>
  <span class="dot dot-7"></span>

設置元素樣式，這裏的CSS變量（如 --speed, --size, --starting-x, --starting-y, --rotatation）用於控制圓點的動畫速度、大小、起始位置和旋轉角度。

.dot {
  display: block;
  position: absolute;
  transition: transform calc(var(--speed) / 12) ease;
  width: var(--size);
  height: var(--size);
  transform: translate(var(--starting-x), var(--starting-y)) rotate(var(--rotatation));
}

給圓點設置動畫效果，使用 @keyframes 定義了兩個動畫：dimFirefly 和 hoverFirefly，為圓點添加了閃爍和移動效果：

@keyframes dimFirefly {
  0% { opacity: 1; }
  25% { opacity: 0.4; }
  50% { opacity: 0.8; }
  75% { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes hoverFirefly {
  0% { transform: translate(0, 0); }
  12% { transform: translate(3px, 1px); }
  24% { transform: translate(-2px, 3px); }
  37% { transform: translate(2px, -2px); }
  55% { transform: translate(-1px, 0); }
  74% { transform: translate(0, 2px); }
  88% { transform: translate(-3px, -1px); }
  100% { transform: translate(0, 0); }
}

在圓點的偽元素上關聯動畫效果：

.dot::after {
  content: "";
  animation: hoverFirefly var(--speed) infinite, dimFirefly calc(var(--speed) / 2) infinite calc(var(--speed) / 3);
  animation-play-state: paused; 
  display: block;
  border-radius: 100%;
  background: yellow;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 6px 0px #FFEB3B, 0px 0px 4px 0px #FDFCA9 inset, 0px 0px 2px 1px #FFFFFF42;
}

給每個圓點設置不同的動畫參數，通過使用 CSS 變量，開發者可以靈活地控制每個 .dot 元素的旋轉角度，進一步豐富視覺效果。

.dot-1 {
  --rotatation: 0deg;
  --speed: 14s;
  --size: 6px;
  --starting-x: 30px;
  --starting-y: 20px;
  top: 2px;
  left: -16px;
  opacity: 0.7;
}

.dot-2 {
  --rotatation: 122deg;
  --speed: 16s;
  --size: 3px;
  --starting-x: 40px;
  --starting-y: 10px;
  top: 1px;
  left: 0px;
  opacity: 0.7;
}
...

此時只要在父元素.button-wrapper懸停時，則觸發 .dot 元素的旋轉效果，並使其偽元素的動畫開始運行，此時螢火中懸停效果就會開始運行。

.button-wrapper:hover {
  .dot {
    transform: translate(0, 0) rotate(var(--rotatation));
  }
  
  .dot::after {
    animation-play-state: running;
  }
}

最後完成的懸停效果如下：