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加速的属性。
