CSS3 闪光效果

 

你想做那个遗世独立的人，我知道。

 

 

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>CSS3-闪光-效果</title>
 6 <style>
 7     .element{
 8       color: #f35626;
 9       background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
10       -webkit-background-clip: text;
11       -webkit-text-fill-color: transparent;
12       -webkit-animation: hue 60s infinite linear;
13       margin-bottom: 1.5rem;
14       font-size: 3rem;
15       font-weight: 100;
16       line-height: 1;
17       letter-spacing: -.05em;
18     }
19     .animated {
20       -webkit-animation-duration: 3s;
21       animation-duration: 3s;
22       -webkit-animation-fill-mode: both;
23       animation-fill-mode: both;
24     }
25     @-webkit-keyframes flash {
26       from, 50%, to {
27         opacity: 1;
28       }
29     
30       25%, 75% {
31         opacity: 0;
32       }
33     }    
34     @keyframes flash {
35       from, 50%, to {
36         opacity: 1;
37       }
38     
39       25%, 75% {
40         opacity: 0;
41       }
42     }    
43     .flash {
44       -webkit-animation-name: flash;
45       animation-name: flash;
46     }
47 </style>
48 </head>
49 <body>
50     <div class="element animated flash">flash</div>
51 </body>
52 </html>
View Code

 

posted @ 2017-01-21 10:30  Linda_Je  Views(1038)  Comments(0)  Edit  收藏  举报