如圖所示，這是一個很炫酷的發光按鈕特效，鼠標懸停時，按鈕呈現旋轉動畫發光的效果，這樣的動畫效果可以顯著提升用户體驗和視覺吸引力。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出實現這個效果的主要功能要點：

• 按鈕背景為漸變顏色
• 懸停時按鈕有放大效果
• 懸停時文案有發光漸變動畫
• 懸停時按鈕有旋轉發光效果

實現過程

漸變按鈕

漸變色背景我們設置background-image的linear-gradient即可，這裏我們設置3個顏色和漸變的角度。

background-image: linear-gradient( 
    315deg,
    #ffc4ec -10%,
    #efdbfd 50%,
    #ffedd6 110%
);

為了加強按鈕效果再給按鈕設置陰影效果：

box-shadow: 
  0 2px 3px 1px hsl(var(--glow-hue) 50% 20% / 50%),
  inset 0 -10px 20px -10px hsla(var(--shadow-hue),
  10%,90%,95%);

此時的按鈕效果：

懸停放大效果

給按鈕設置默認scale: 1，並設置動畫過渡屬性，這裏定義了一個複雜的自定義緩動函數linear，這個函數允許開發者在動畫中實現更細膩的速度變化。

  --spring-easing: linear(
    0, 0.002, 0.01 0.9%, 0.038 1.8%, 0.156, 0.312 5.8%, 0.789 11.1%, 1.015 14.2%,
    1.096, 1.157, 1.199, 1.224 20.3%, 1.231, 1.231, 1.226, 1.214 24.6%,
    1.176 26.9%, 1.057 32.6%, 1.007 35.5%, 0.984, 0.968, 0.956, 0.949 42%,
    0.946 44.1%, 0.95 46.5%, 0.998 57.2%, 1.007, 1.011 63.3%, 1.012 68.3%,
    0.998 84%, 1
  );
  --spring-duration: 1.33s;
    
  transition: all var(--spring-duration) var(--spring-easing);

當用户懸停按鈕時，通過 scale 屬性使按鈕在懸停時放大，使用 transition 屬性使樣式變化平滑，並對按鈕陰影進行細微的調整，增強交互感。

button:hover:not(:active),
button.active {
    transition-duration: calc(var(--spring-duration)*0.5);
    scale: 1.2;
    box-shadow: 0 4px 8px -2px hsl(var(--glow-hue) 50% 20% / 50%), inset 0 0 0 transparent;
}
button:active {
    scale: 1.1;
    transition-duration: calc(var(--spring-duration)*0.5);
}

按鈕文案漸變

這裏除了按鈕放大其次還會按鈕的文案也增加了細節動畫，通過 background-clip: text 設置了文本的漸變效果，使文本看起來更具層次感。

默認給按鈕文案設置了背景色，動畫中通過調整背景色的background-position實現按鈕文字的漸變動畫。

background-image: linear-gradient(
  120deg,
  transparent,
  hsla(var(--glow-hue),100%,80%,0.66) 40%,
  hsla(var(--glow-hue),100%,90%,.9) 50%,
  transparent 52%);

默認設置 background-position: center 200%。在按鈕文案懸停時設置動畫：

button:hover .text,
button.active .text {
    animation: text .66s ease-in 1 both;
}

動畫則是改變按鈕文案背景的background-position：

@keyframes text {
    0% {
        background-position: 100% center;
    }    
    100% {
        background-position: -100% center;
    }    
}

為了方便查看，這裏是沒有設置background-clip: text的動畫效果，以下是懸停效果：

以下是設置background-clip: text後的動畫效果：

按鈕發光效果

接下來來到最重要的動畫實現環節，懸停時發光旋轉的效果。這裏我們新增一個shimmer元素來實現。

<span class="shimmer"></span> 

通過給這個元素的偽元素設置陰影以達到發光的效果，這裏設置按鈕的內部和外陰影如下圖箭頭所示，使按鈕內外都有光暈模糊的效果。

按鈕外部陰影：

.shimmer::before {
    box-shadow: 0 0 3px 2px hsl(var(--glow-hue) 20% 95%),
        0 0 7px 4px hsl(var(--glow-hue) 20% 80%),
        0 0 13px 4px hsl(var(--glow-hue) 50% 70%),
        0 0 25px 5px hsl(var(--glow-hue) 100% 70%);
    z-index: -1;
}

按鈕內部陰影：

.shimmer::after {
    box-shadow: inset 0 0 0 1px hsl(var(--glow-hue) 70% 95%),
        inset 0 0 2px 1px hsl(var(--glow-hue) 100% 80%),
        inset 0 0 5px 2px hsl(var(--glow-hue) 100% 70%);
    z-index: 2;
}

接下來通過設置mask-image屬性使用 conic-gradient 函數創建了一個圓錐形的漸變遮罩，從而模擬了光暈的擴散效果。

conic-gradient 函數定義了一個圍繞中心點旋轉的漸變。漸變的顏色在不同的角度上有不同的透明度，從而創建出光暈的輪廓。在這個效果中，漸變從透明到黑色再到透明，模擬了光暈的邊緣。

mask-image: conic-gradient(
    from var(--shimmer, 0deg),
    transparent 0%,
    transparent 10%,
    black 36%,
    black 45%,
    transparent 50%,
    transparent 60%,
    black 85%,
    black 95%,
    transparent 100%
);

繼續設置inset: -40px，inset 屬性在這裏是用來調整絕對定位元素的位置和尺寸，以創建一個超出按鈕邊界的光暈效果，並通過動畫增強這種效果的動態性。40px是按鈕的高度，這樣可以創建一個剛好超出按鈕邊界的光暈效果。為了方便大家查看效果，這裏我將此值調整為-50px，以下是效果圖。

默認shimmer的偽元素透明度為0，鼠標懸停將 opacity 屬性被設置為 1， 使得光暈效果可見，並且應用了 shine 動畫，這個動畫改變了光暈的透明度，使按鈕有閃爍的效果。

@keyframes shine {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    55% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

給shimmer元素應用一個旋轉的動畫，修改mask-image中的--shimmer從0度到360度，使按鈕的光暈效果旋轉起來。

@keyframes shimmer {
    0% {
        --shimmer: 0deg;
    }
    100% {
        --shimmer: 360deg;
    }
}

此時我們的完整動畫效果就完成了，以下是效果圖：

在線預覽

https://code.juejin.cn/pen/7376988628519485449

最後

通過以上步驟，結合 CSS 動畫、陰影和漸變效果，我們實現了一個旋轉光暈的按鈕。該效果不僅提升了視覺吸引力，也增強了用户的交互體驗。利用 CSS 的強大功能，我們可以輕鬆實現複雜的動畫效果，有興趣的可以嘗試使用起來～

看完本文如果覺得有用，記得點個贊支持，收藏起來説不定哪天就用上啦～

專注前端開發，分享前端相關技術乾貨，公眾號：南城大前端（ID: nanchengfe）