今天給大家推薦個動畫條紋陰影效果，效果如下圖所示。

好的，讓我們開工吧，首先是so easy的html。

1. <!-- 
2.   data-text屬性用來指定陰影內容 
3. -->
4. <spanclass="shadow"data-text="Hello">Hello</span>

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. }  

然後我們進入正題。

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.         transparent45%,  
20.         hsla(48,20%,90%,1) 45%,  
21.         hsla(48,20%,90%,1) 55%,  
22.         transparent0
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%}};