css制作旋转闪光

使用CSS动画实现旋转闪光效果

通过CSS的animation和transform属性可以创建旋转闪光效果，结合box-shadow或background渐变增强闪光视觉。

HTML结构

<div class="flash-spinner"></div>

基础旋转闪光

.flash-spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00);
  animation: spinAndFlash 2s linear infinite;
}

@keyframes spinAndFlash {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

金属质感旋转闪光

通过多层阴影和颜色过渡增强金属反光效果：

.metal-flash {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ccc 70%);
  box-shadow: 
    0 0 10px #fff,
    0 0 20px #fff,
    inset 0 0 15px rgba(255,255,255,0.8);
  animation: metalSpin 1.5s ease-in-out infinite;
}

@keyframes metalSpin {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  to { transform: rotate(360deg) scale(1); }
}

多色交替闪光

创建颜色循环变化的闪光效果：

.color-flash {
  width: 40px;
  height: 40px;
  animation: 
    colorChange 0.5s steps(4) infinite,
    rotation 2s linear infinite;
}

@keyframes colorChange {
  0% { background: #ff0000; }
  25% { background: #00ff00; }
  50% { background: #0000ff; }
  75% { background: #ffff00; }
}

@keyframes rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

性能优化技巧

使用will-change属性预提示浏览器进行硬件加速：

.flash-element {
  will-change: transform, opacity;
}

避免过度使用阴影效果，复杂的box-shadow可能影响渲染性能。对于需要高频动画的元素，建议使用transform和opacity这类能被GPU加速的属性。