前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

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

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

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

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

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

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

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

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

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

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言