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

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

# 前端 2024-05-05 15:28 0 59 来源：云博客

语法

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  12345645 </h1>46 </div>47 </body>48 </html>