码迷,mamicode.com
首页 > Web开发 > 详细

CSS3

时间:2017-01-21 10:58:46      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:and   log   set   sed   out   blog   city   contract   ram   

技术分享

 

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

 


 

 

技术分享
 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

 

CSS3-闪光-效果

flash

CSS3

标签:and   log   set   sed   out   blog   city   contract   ram   

原文地址:http://www.cnblogs.com/LindaLiu/p/6336571.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!