CSS炫酷光晕按钮特效

如图所示，这是一个很炫酷的发光按钮特效，鼠标悬停时，按钮呈现旋转动画发光的效果，这样的动画效果可以显著提升用户体验和视觉吸引力。本文将解析如何实现这个按钮特效，基于这个动图可以分析出实现这个效果的主要功能要点：

• 按钮背景为渐变颜色
• 悬停时按钮有放大效果
• 悬停时文案有发光渐变动画
• 悬停时按钮有旋转发光效果

实现过程

渐变按钮

渐变色背景我们设置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）