当前位置：首页 > 文章列表 > 文章 > 前端 > CSS动态光效技巧：动画与阴影完美结合

CSS动态光效技巧：动画与阴影完美结合

2025-11-20 19:47:34 0浏览收藏

1. 使用box-shadow模拟外发光效果

通过box-shadow属性可以为元素添加柔和的发光边框。设置模糊半径和扩展半径，并使用高透明度的颜色，能营造出自然的光晕感。

示例：创建一个持续发光的按钮

.glow-button {
  background: #00bfff;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 191, 255, 0.6);
  transition: box-shadow 0.3s ease;
}

.glow-button:hover {
  box-shadow: 0 0 30px rgba(0, 191, 255, 0.9);
}

说明：rgba()中的alpha值控制光晕透明度，数值越大越亮。鼠标悬停时增强阴影，实现交互式光效。

2. 利用keyframes制作呼吸灯动画

“呼吸”效果是光效中常见的一种节奏性明暗变化，适合用于提示或装饰性元素。通过改变box-shadow的模糊强度和颜色透明度来实现。

实现步骤：

定义@keyframes动画，从弱光到强光再到弱光循环
使用opacity或rgba调整颜色透明度变化
应用infinite和ease-in-out使动画更自然

@keyframes pulse {
  0% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
  }
  100% {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
  }
}

.pulse-light {
  width: 20px;
  height: 20px;
  background: #ffd700;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

3. 文字发光动画：text-shadow与color联动

对文字使用text-shadow配合颜色变化，可做出霓虹灯般的效果。适合标题或强调内容。

技巧要点：

叠加多层text-shadow增强立体感
同步改变文字颜色与阴影颜色保持协调
使用hsl()或hsla()便于调节色调和透明度

@keyframes neon-text {
  0%, 100% {
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e00, 0 0 40px #e00;
  }
  50% {
    color: #ff8a00;
    text-shadow: 0 0 5px #ff8a00, 0 0 15px #ff8a00, 0 0 25px #f00, 0 0 35px #f00;
  }
}

.neon-title {
  font-size: 3rem;
  font-weight: bold;
  animation: neon-text 3s ease-in-out infinite;
}

4. 多色流动光效：结合伪元素与延迟动画

通过::before和::after伪元素创建多个发光层，分别设置不同颜色和动画延迟，形成流动或环绕的视觉效果。

应用场景：科技感面板、加载指示器、动态边框

.ring-light {
  position: relative;
  width: 60px;
  height: 60px;
  background: transparent;
  border: 2px solid #00ffff;
  border-radius: 50%;
}

.ring-light::before,
.ring-light::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 68px;
  height: 68px;
  border: 2px solid transparent;
  border-radius: 50%;
  animation: glow-ring 2s linear infinite;
}

.ring-light::before {
  border-left-color: #0f0;
  animation-delay: -1s;
}

.ring-light::after {
  border-top-color: #0ff;
  animation-delay: -0.5s;
}

@keyframes glow-ring {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

说明：两个伪元素分别旋转，颜色错开，形成双色光圈流动效果，极具动感。

基本上就这些。掌握box-shadow、text-shadow与CSS动画的配合，再灵活运用颜色透明度和hsla/rgba色彩模式，就能创造出丰富的动态光效。注意性能优化，避免过度使用大范围模糊阴影影响渲染效率。

到这里，我们也就讲完了《CSS动态光效技巧：动画与阴影完美结合》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！