用css实现简易报警灯

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

完整文章链接:

实现效果


实现思路

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

灯罩实现

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

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



    width: 200px;

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



      width: 200px;

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

      完整文章链接:

发布于 2023-02-24 13:13 ・IP 属地江苏