前言
因为写的几个创意代码的特效都十分的简单,就合并到这篇文章里了,文章会从实现思路和遇到的问题两方面讲解实现如何现实这些简单的特效。
1.实现的主要点解析
主要使用了: CSS3里的text-shadow(基本文字阴影)再配合火焰的原本颜色就行了,很简单的一个效果。
2.知识点
text-shadow: h-shadow v-shadow blur color
h-shadow:水平阴影的位置
v-shadow:垂直阴影的位置
blur:模糊的距离
color: 阴影的颜色
二.鼠标点击事件文字抖动特效
1.实现的主要点解析
如何实现鼠标在文字上移动时,文字有抖动的效果呢?思路就是对文字数组进行遍历,然后添加鼠标事件,当监听到鼠标在文字上时替换成'空格',类似位置上下左右平移的效果即可。
2.遇到的问题
需要对文字数组进行重新赋值,不然移动后文字无法回到原来的位置。
实现代码:
三.简单的霓虹灯特效
1.实现的主要点解析
霓虹灯的特点是不断的闪烁,所以实现这个特效的关键点就是如何实现闪烁,使用了CSS3里的box-shadow(阴影效果)类似第一个火焰文字特效里的text-shadow,然后就是如何让元素闪烁的问题,采用了light div:nth-child1~4的环形效果,让线沿着这四个点移动,即可实现闪烁的效果
2.遇到的问题
如果不用4个点组成环形,那线就可能跑出环形外面,就不能实现闪烁的效果了
小结
以上就是一些简单的文字特效,其实实现起来不是很难,只是要注意一些关键的点就可以了。