css发光模式 |css3文字背景渐变动画效果

要实现CSS发光效果，大家可以使用一个非常简单的CSS属性：box-shadow。这个属性可以给元素添加一个阴影效果，但是大家可以通过调整参数来让这个阴影看起来像是一个发光的效果。

/* CSS样式 */
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 20px 10px #f00;
}

其中，box-shadow属性接受四个参数：

• 第一个参数：水平偏移量，即阴影在x轴上的偏移量。
• 第二个参数：垂直偏移量，即阴影在y轴上的偏移量。
• 第三个参数：模糊度，即阴影的模糊程度。
• 第四个参数：阴影的扩散程度。

最后一个参数就是决定了整个发光效果的关键，它的取值范围是一个颜色值，可以让大家自由选择大家喜欢的颜色。

除了使用单一的颜色来实现发光效果之外，大家还可以使用多种颜色的渐变效果，让整个页面看起来更加炫酷。

/* CSS样式 */
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 20px 10px #f00, 0 0 40px 20px #0f0, 0 0 60px 30px #00f;
}

最后，大家需要注意的是，CSS发光效果虽然很酷，但是也要适度使用，不要过度使用，否则可能会导致用户的浏览体验变得不太好。