css3+h5学习（一、animation做动态渐变字）

最新推荐文章于 2022-07-22 16:34:04 发布

dengxiangxuan8965

最新推荐文章于 2022-07-22 16:34:04 发布

阅读量183

点赞数

原文链接：http://www.cnblogs.com/moxiao-lmx/p/10218501.html

版权

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

name->动画名，自定义(不可缺参数)
duration->动画完成时间，以秒记(不可缺参数)
timing-function->动画进行的速度，liner（默认）/ease/ease-in/ease-out/ease-in-out/cubic-bezier(0,0,0,0)
delay->动画开始前的延迟，以秒记
iteration-count->动画播放次数
direction->是否轮流反向播放动画
fill-mode->动画不播放时实用什么元素样式
play-state->指定动画在运行或暂停

例子

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>文档标题</title>
 6   <style>
 7     h1{
 8        
 9     }
10     div{
11       width:150px;
12       height:100px;
13       text-align:center;
14       color:transparent;//设置字体颜色透明
15       -webkit-background-clip: text;//剪除背景中文本以外部分
16       background:red;
17       border:5px solid #567577;
18       border-radius:20px;
19       position:relative;
20       margin:5px;
21       
22      //animation名是myfrist 10s完成动画 匀速播放 0s延迟 无限播放 奇数次正向播
23      //放偶数次反向播放 播放动画     
24 
25       animation:myfrist 10s linear 0s infinite alternate running;
26       -moz-animation:myfrist 10s linear 2s infinite alternate running;
27       -o-animation:myfrist 10s linear 2s infinite alternate running;
28       -webkit-animation:myfrist 10s linear 2s infinite alternate running;
29     }
30     @keyframes myfrist{
31       0% {border-color:red;background-color:orange;}
32       20%  {border-color:yellow; background-color:yellow;}
33       40%  {border-color:blue; background-color:green;}
34       60%  {border-color:green;background-color:blue; }
35       80% {border-color:red;background-color:indigo; 
36       100%  {border-color:green;background-color:violet; }
37       }
38     }
39   </style>
40 </head>
41 <body>
42   <div>
43     <h1>
44     123456
45     </h1>
46   </div>
47  </body>
48 </html>