[分享]css3指示灯

CSS3指示灯是一种通过CSS3技术实现的一种独特的元素样式，可用于各种类型的网站。如今，随着越来越多的企业和组织需要在网站中添加指示灯，CSS3指示灯仍然是最流行的解决方案之一。下面我们来看一下如何...

CSS3指示灯是一种通过CSS3技术实现的一种独特的元素样式，可用于各种类型的网站。如今，随着越来越多的企业和组织需要在网站中添加指示灯，CSS3指示灯仍然是最流行的解决方案之一。下面我们来看一下如何使用CSS3来创建指示灯。

/*CSS代码*/
#light {
    width: 50px;
    height: 50px;
    background-color: #000;
    border-radius: 50%;
    position: relative;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.3);
}

#light:before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
}

#light:after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.8);
}

以上代码将创建一个简单的黑色指示灯，其特征是在中心处有明亮的白点。通过修改颜色和其他属性，您可以创建不同颜色和风格的指示灯。例如，您可以使用下面的CSS代码来创建一个绿色的指示灯：

#light {
    width: 50px;
    height: 50px;
    background-color: #51ca28;
    border-radius: 50%;
    position: relative;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.3);
}

#light:before {
    content: "";
    position: absolute;
    top: -15px;
    left: -15px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
}

#light:after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.8);
}

这只是指示灯样式的几个示例。您可以使用CSS3技术来创建各种指示灯，以适应您的特定网站和品牌风格。