[分享]css3指示灯特效

CSS3指示灯特效是网页设计常用的一种效果。它不仅可以提高用户体验，还可以使页面更加具有视觉冲击力。我们来看看基于CSS3实现指示灯特效的例子。 上面的代码实现了指示灯的主体，内部和外部的发光...

CSS3指示灯特效是网页设计常用的一种效果。它不仅可以提高用户体验，还可以使页面更加具有视觉冲击力。我们来看看基于CSS3实现指示灯特效的例子。

 <div class="light">
        <div class="glow-inner"></div>
        <div class="glow-outer"></div>
    </div> 

上面的代码实现了指示灯的主体，内部和外部的发光效果。下面我们来看CSS的实现：

 .light {
        width: 100px;
        height: 100px;
        background: #0c0c0c;
        border-radius: 50%;
        position: relative;
    }

    .glow-inner {
        width: 40px;
        height: 40px;
        background: #63ff8f;
        border-radius: 50%;
        position: absolute;
        top: 30px;
        left: 30px;
        box-shadow: 0 0 10px 10px #63ff8f;
        z-index: 1;
    }

    .glow-outer {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        box-shadow: 0 0 20px 20px rgba(99, 255, 143, 0.2);
        z-index: -1;
    } 

指示灯主体类“light”的样式参数包括盒模型尺寸、背景色、圆角大小以及定位方式（相对定位）。内部发光设置为圆形，背景颜色为淡绿色，阴影也为淡绿色，并且在上层（z-index: 1）。

外部发光使用了box-shadow属性，RGBA格式的颜色值可以设置透明度，四个参数分别为：x方向偏移、y方向偏移、模糊半径、阴影尺寸。此外，通过z-index值的设置让内部发光在外部发光下面。

指示灯特效的实现可以通过上述代码示例和简单的参数调整实现自定制，为页面增添动感和艺术感。