用css实现简易报警灯

用css来实现一个简易的报警灯效果

完整文章链接：

实现效果

实现思路

实现的核心是一个灯罩和一个灯芯。灯罩主要是使用了border-radius圆角边框，灯芯主要是radial-gradient径向渐变。再使用动画效果来实现一闪一闪的效果。让我们来一步一步实现效果。

灯罩实现

因为大部分报警灯是红色，而且是子弹头形状的圆角柱状。

使用简单的二维实现的话，我们先需要使用一个红色矩形。

width: 200px;

由于一般子弹头的圆角柱状，上面的圆角比下面的大，所以上面使用的圆角数据，也需要比下面大。









width: 200px;

这样，一个简易的灯罩就完成了。

完整文章链接：