css制作闪光效果

CSS 制作闪光效果

通过 CSS 可以实现多种闪光效果，以下是几种常见的方法：

使用 animation 和 @keyframes 实现动态闪光

通过关键帧动画控制元素的透明度或颜色变化，模拟闪光效果。

.flash {
  animation: flash 1.5s infinite;
}

@keyframes flash {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}

使用 box-shadow 实现光泽效果

通过 box-shadow 模拟光晕或高光，适合按钮或图标。

.glow {
  box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.7);
  transition: box-shadow 0.3s ease;
}

.glow:hover {
  box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.9);
}

使用 background 渐变实现流动闪光

通过线性渐变和动画结合，实现更复杂的流动闪光效果。

.shine {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  background-size: 200% 100%;
  animation: shine 2s infinite;
}

@keyframes shine {
  from { background-position: -100% 0; }
  to { background-position: 100% 0; }
}

使用 filter: drop-shadow() 实现发光边框

通过滤镜为元素添加发光边框，适合文字或图形。

.text-glow {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}

使用伪元素实现局部高光

通过伪元素模拟局部高光效果，增强立体感。

.highlight::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-20deg);
}

注意事项

• 调整动画的 duration 和 timing-function 可以改变闪光的速度和流畅度。
• 使用 rgba() 控制颜色的透明度，避免闪光效果过于刺眼。
• 结合 transform 和 transition 可以实现更自然的动态效果。