前军教程网

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

一分钟CSS课堂|text-shadow在动画中的使用#CSS动画

一分钟课堂:探索文本阴影在动画中的应用。前面学习了shadow属性的各种设置。

接下来,我们尝试使用text-shadow来制作一个酷炫的文字动画。

·创建这样一个文本容器,将每个文字单独放置,这样在制作动画时可以为每个文字设置不同的动。添加页面的基础样式,一个深色的背景色(看个人喜好),设置一个半透明的文字颜色,得到一个这个的文本效果。

·给span添加一个动画属性。播放次数(无限)动画播放方向(往返)。

·先设置一个简单的动画帧,找一个高亮色设置为文本颜色,添加重叠文本阴影,第一层黑色让文字边缘清晰,叠加三层高光模糊扩散。0-20px0 gb(145246255/19%),再叠加两个y轴偏移半透明色阴影。

·还不了解色相?去看看这个视频吧。filter:hue-rotate(360deg);最后加一个色相角旋转。

CODING。

发表评论:

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