Css中霓虹灯效果 |css文字 左缩进2字符

.neon {
font-size: 5rem; /* 文字大小 */
color: #fff; /* 文字颜色 */
text-shadow: 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 30px #fff; /* 文字阴影效果 */
animation: neon 1.5s ease-in-out infinite alternate; /* 动画效果 */
}
@keyframes neon {
0% {
text-shadow: 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 30px #fff; /* 初始值 */
}
100% {
text-shadow: 0px 0px 10px #fe5151, 0px 0px 20px #fe5151, 0px 0px 30px #fe5151; /* 结束值 */
}
}

以上是实现霓虹灯效果的CSS代码。其中，大家指定了.neon类的字体大小和颜色，并添加了文字阴影效果。随后，大家使用了@keyframes规则定义了一个名为neon的动画，该动画会将文字阴影的颜色从白色变为粉红色，再从粉红色变为白色。

最后，大家让动画在1.5秒钟内完成一次来回运动，并无限循环播放。这样，文字就会像真正的霓虹灯一样闪闪发光，吸引人们的注意力。