css制作旋转闪光

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

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

@keyframes rotateGlow {
  0% {
    transform: rotate(0deg);
    box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.7);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.8);
  }
  100% {
    transform: rotate(360deg);
    box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.7);
  }
}

.glow-element {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  animation: rotateGlow 2s linear infinite;
}

使用伪元素增强闪光效果

通过::before或::after伪元素创建多层闪光效果，使视觉层次更丰富。

.flash-item {
  position: relative;
  width: 80px;
  height: 80px;
  animation: rotation 3s infinite linear;
}

.flash-item::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 30%, gold 70%);
  opacity: 0;
  animation: flash 1.5s infinite;
}

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

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

结合渐变背景的旋转闪光

使用CSS径向渐变创建光源效果，配合旋转动画实现更自然的闪光。

.spinning-light {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    #fff 0%,
    #ff0 20%,
    transparent 50%
  );
  animation: 
    spin 4s linear infinite,
    pulse 2s ease-in-out infinite alternate;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  from { opacity: 0.7; }
  to { opacity: 1; }
}

多元素交替闪光技术

多个元素通过不同的动画延迟创建交替闪光效果，适合更复杂的场景。

.light-group div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-block;
  margin: 10px;
  animation: flicker 1s infinite alternate;
}

.light-group div:nth-child(1) {
  animation-delay: 0s;
  background-color: #ff0;
}
.light-group div:nth-child(2) {
  animation-delay: 0.2s;
  background-color: #f90;
}
.light-group div:nth-child(3) {
  animation-delay: 0.4s;
  background-color: #f00;
}

@keyframes flicker {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.1); }
}

高性能实现的优化技巧

为了确保动画流畅运行，建议使用will-change属性并优化动画属性。

.optimized-flash {
  will-change: transform, box-shadow;
  transform: translateZ(0);
  animation: 
    optimizedSpin 1.5s ease-in-out infinite,
    optimizedGlow 1.5s ease-in-out infinite;
}

@keyframes optimizedSpin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes optimizedGlow {
  0%, 100% { box-shadow: 0 0 5px #ff0; }
  50% { box-shadow: 0 0 20px #ff0; }
}