CSS螢火蟲按鈕特效，會(huì)有什么效果？
- 有一個(gè)跟隨鼠標(biāo)移動(dòng)的圓點(diǎn)
- 按鈕懸停時(shí)有高亮發(fā)光的效果
- 懸停時(shí)按鈕周邊的螢火中效果
實(shí)現(xiàn)過程
跟隨鼠標(biāo)移動(dòng)的圓點(diǎn)
這個(gè)部分需要基于JS實(shí)現(xiàn)，但不是最主要的實(shí)現(xiàn)代碼
如果單純做一個(gè)跟隨鼠標(biāo)移動(dòng)的點(diǎn)很簡單，只需要監(jiān)聽鼠標(biāo)事件獲取坐標(biāo)實(shí)時(shí)更新到需要移動(dòng)的元素上即可。但是仔細(xì)看這里的效果并不是這樣，圓點(diǎn)是跟隨在鼠標(biāo)后面，鼠標(biāo)移動(dòng)停止后圓點(diǎn)才會(huì)和鼠標(biāo)重合。這里是使用了一個(gè)名為 Kinet 的庫來實(shí)現(xiàn)的這個(gè)鼠標(biāo)移動(dòng)動(dòng)畫效果，具體實(shí)現(xiàn)如下：
- 創(chuàng)建 Kinet 實(shí)例，傳入了自定義設(shè)置：
- acceleration: 加速度，控制動(dòng)畫的加速程度。
- friction: 摩擦力，控制動(dòng)畫的減速程度。
- names: 定義了兩個(gè)屬性 x 和 y，用于表示動(dòng)畫的兩個(gè)維度。
var kinet = new Kinet({
acceleration: 0.02,
friction: 0.25,
names: ["x", "y"],
});- 通過 document.getElementById 獲取頁面中 ID 為 circle 的元素，以便后續(xù)進(jìn)行動(dòng)畫處理。
var circle = document.getElementById('circle');- 設(shè)置 Kinet 的 tick 事件處理:
- 監(jiān)聽 tick 事件，每當(dāng) Kinet 更新時(shí)執(zhí)行該函數(shù)。
- instances 參數(shù)包含當(dāng)前的 x 和 y 值及其速度。
- 使用 style.transform 屬性來更新圓形元素的位置和旋轉(zhuǎn)：
- translate3d 用于在 3D 空間中移動(dòng)元素。
- rotateX 和 rotateY 用于根據(jù)當(dāng)前速度旋轉(zhuǎn)元素。
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 的目標(biāo)值，計(jì)算方式是將鼠標(biāo)的當(dāng)前位置減去窗口的中心位置，使動(dòng)畫圍繞窗口中心進(jìn)行。
document.addEventListener('mousemove', function (event) {
kinet.animate('x', event.clientX - window.innerWidth/2);
kinet.animate('y', event.clientY - window.innerHeight/2);
});隨著鼠標(biāo)的移動(dòng)這個(gè)圓點(diǎn)元素將在頁面上進(jìn)行平滑的動(dòng)畫。通過 Kinet 庫的加速度和摩擦力設(shè)置，動(dòng)畫效果顯得更加自然，用戶體驗(yàn)更加生動(dòng)。有興趣的可以嘗試調(diào)整參數(shù)解鎖其他玩法，此時(shí)我們的頁面效果如下：
圖片
按鈕懸停時(shí)發(fā)光效果
這里主要通過懸停時(shí)設(shè)置transition過渡改變按鈕的內(nèi)外陰影效果，陰影效果通過偽元素實(shí)現(xiàn)，默認(rèn)透明度為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;
}當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，通過改變偽元素的透明度，使發(fā)光效果在鼠標(biāo)懸停時(shí)變得可見：
.button-wrapper:hover .button::before,
.button-wrapper:hover .button::after {
opacity: 1;
}此時(shí)的按鈕效果如下：
圖片
懸停時(shí)螢火中效果
如頭部圖片所展示，螢火蟲效果是有多個(gè)圓點(diǎn)散開，所以這里我們添加多個(gè)圓點(diǎn)元素。
<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>設(shè)置元素樣式，這里的CSS變量（如 --speed, --size, --starting-x, --starting-y, --rotatation）用于控制圓點(diǎn)的動(dòng)畫速度、大小、起始位置和旋轉(zhuǎn)角度。
.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));
}給圓點(diǎn)設(shè)置動(dòng)畫效果，使用 @keyframes 定義了兩個(gè)動(dòng)畫：dimFirefly 和 hoverFirefly，為圓點(diǎn)添加了閃爍和移動(dòng)效果：
@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); }
}在圓點(diǎn)的偽元素上關(guān)聯(lián)動(dòng)畫效果：
.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;
}給每個(gè)圓點(diǎn)設(shè)置不同的動(dòng)畫參數(shù)，通過使用 CSS 變量，開發(fā)者可以靈活地控制每個(gè) .dot 元素的旋轉(zhuǎn)角度，進(jìn)一步豐富視覺效果。
.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;
}
...此時(shí)只要在父元素.button-wrapper懸停時(shí)，則觸發(fā) .dot 元素的旋轉(zhuǎn)效果，并使其偽元素的動(dòng)畫開始運(yùn)行，此時(shí)螢火中懸停效果就會(huì)開始運(yùn)行。
.button-wrapper:hover {
.dot {
transform: translate(0, 0) rotate(var(--rotatation));
}
.dot::after {
animation-play-state: running;
}
}最后完成的懸停效果如下
圖片
