一分钟课堂:探索文本阴影在动画中的应用。前面学习了shadow属性的各种设置。
接下来,我们尝试使用text-shadow来制作一个酷炫的文字动画。
·创建这样一个文本容器,将每个文字单独放置,这样在制作动画时可以为每个文字设置不同的动。添加页面的基础样式,一个深色的背景色(看个人喜好),设置一个半透明的文字颜色,得到一个这个的文本效果。
·给span添加一个动画属性。播放次数(无限)动画播放方向(往返)。
·先设置一个简单的动画帧,找一个高亮色设置为文本颜色,添加重叠文本阴影,第一层黑色让文字边缘清晰,叠加三层高光模糊扩散。0-20px0 gb(145246255/19%),再叠加两个y轴偏移半透明色阴影。
·还不了解色相?去看看这个视频吧。filter:hue-rotate(360deg);最后加一个色相角旋转。
CODING。