css3 警报灯动画 |商品分类css

/* CSS3 警报灯动画 */
.alert {
width: 100px;
height: 100px;
background-color: #f00;
border-radius: 50%;
animation: alert 1s ease-in-out infinite;
}
@keyframes alert {
0% {
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.6);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
}
}

在上面的代码中，大家使用了 CSS3 动画技术来实现警报灯的闪烁效果。首先，大家创建了一个初始状态为红色的圆形 div 元素，并为其添加了 animation 属性，表示该元素需要应用 alert 动画。

接着，大家定义了 alert 动画，其中使用了 @keyframes 规则来定义动画的关键帧，即从开始到结束时的所有变化。在这个动画中，大家首先定义了 0% 的关键帧，表示动画开始时的状态。在这个状态下，大家使用 box-shadow 属性来添加一个红色的投影效果，模拟警报灯的光芒。接着大家定义了第二个关键帧，70%，表示动画进行到 70% 时的状态。在这个状态下，大家将投影效果逐渐从实心变为了透明，让灯光显得更加真实。最后，大家定义了 100% 关键帧，表示动画结束时的状态。在这个状态下，大家将投影效果完全去掉，让圆形元素变回红色。通过不断重复这个动画，就可以实现一个非常醒目的警报灯效果了。