本案例有点类似flash效果,文字会一个个的出现,学习了也是对css的加强css3小技巧,使用CSS3做的遮罩效果。在css2.0时代,text是不能做渐变,以图片做背景等,css3.0时代也是做不到的,是css3.0可以借助其他属性来完成的。
-webkit-background-clip:text; 文本裁剪
-webkit-text-fill-color:transparent; 文本颜色透明
以上这两样做完后,你就可以做自己喜欢的文字了,比如加个banckground
这几样只能做到让文本填充颜色或者背景图片等;
光影的运动显然要有位置变化,所以要用keyframes来扶助完成
代码如下