CSS文字条纹阴影动画

See the Pen shadow text by haiqing wang (@whqet) onCodePen.

今天给大家推荐个动画条纹阴影效果，效果如下图所示。

好的，让我们开工吧，首先是so easy的html。

[html]  view plain copy print ?

1. <!-- 
2.   data-text属性用来指定阴影内容 
3. -->  
4. <span class="shadow" data-text="Hello">Hello</span>  

来看看关键的CSS怎么写，写东西之前弄好注释，养成好习惯。

[css]  view plain copy print ?

1. /* 
2. with less hat & prefix free 
3. only for webkit 
4. */  
5. /*导入字体*/  
6. @import "http://fonts.googleapis.com/css?family=Dancing+Script:400,700";  
7. /*居中对齐的less mixin*/  
8. .center{  
9.   position:absolute;  
10.   top:50%;  
11.   left:50%;  
12.   .translate(-50%,-50%);  
13. }  

这里的效果仅仅限于webkit的内核，仅仅是实验效果用于研究CSS3，哈哈，大家不要见笑。基于less hat和prefix free，为了简化操作代码里没有列出。

然后我们进入正题。

[css]  view plain copy print ?

1. body{  
2.     background-color:#27ae60;  
3. }  
4. .shadow{  
5.   font-size: 12em;  
6.   font-family: 'Dancing Script', cursive;  
7.   color:#DC554F;  
8.   .center;  
9.   z-index:5;  
10.   &:before{  
11.     content:attr(data-text);  
12.     position:absolute;  
13.     top:6px;  
14.     left:4px;  
15.     .opacity(.4);  
16.     background-image:  
17.       linear-gradient(  
18.         45deg,  
19.         transparent 45%,  
20.         hsla(48,20%,90%,1) 45%,  
21.         hsla(48,20%,90%,1) 55%,  
22.         transparent 0  
23.         );  
24.     background-size: .05em .05em;  
25.     .background-clip(text);  
26.     /*Webkit Only，key code for the effect*/  
27.     -webkit-text-fill-color: transparent;  
28.     z-index:-1;  
29.     animation: shadowGo 15s linear infinite;  
30.   }  
31. }  
32. @keyframes shadowGo{   
33. 0% {background-position: 0 0}  
34. 0% {background-position: -100% 100%}};