标签：text duration init clip UNC doc alter har char
语法
animation: name duration timing-function 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>
注：运行代码清除注释。代码中注释非html注释格式。
标签：text duration init clip UNC doc alter har char
原文地址：https://www.cnblogs.com/moxiao-lmx/p/10218501.html
