纯CSS做一个简单的可编辑文字霓虹灯闪烁效果~#html

这个视频来做一个可编辑的文字霓虹灯闪烁效果。显示的文字是可以修改的，比方把这些英文删掉，然后改成HELLO WORLD，过程中它是伴随着闪烁，还有一个倒影的效果。

·来看一下代码，html非常简单，就一个h1的标签，然后写了一些基本的样式。先来看一下，现在就这样，但是这些字母还不可以编辑修改。

·要对这个元素进行内容编辑，给它添加一个contenteditable属性，现在这些内容就可以修改了。

·再把外面这一圈线outline给它去掉，再给它添加个倒影。把outline设置为来添加个倒影，倒影用boselifly属性，在下方1个像素，给个渐变颜色，倒影也出来了。

·再设置个字体颜色，文字的闪烁效果用动画来控制，来写个动画，让它五秒钟完成线性的循环播放。

·来写个动画，控制一下字体颜色发生变化，百分之一百的时候字体让它变成白色，再加个文字阴影，有点效果了。阴影多叠加几层，让它有一种发散开来的感觉，逐渐增加模糊的程度，没问题。

·最后就是让文字有闪烁的效果，这个也很简单，给它增加一点中间的过程，来回往这两个状态来切换就可以了。这个大家可以自己来调一个合适的频率，没有问题，里面的内容是可以进行修改的。

这个视频就到这里，感谢大家的收看。