CSS3animation属性详解（二）
程序员文章站
2022-03-16 16:43:23
...
CSS3animation属性详解（二）
animation-iteration-count
animation-iteration-count属性
检索或设置对象动画的循环次数
语法
animation-iteration-count: infinite | <number>;
参数说明
<number>为数字，其默认值为“1”；infinite为无限次数循环
编程练习
我们学了动画的知识，那么我们来一起完成一个旋转的太极图吧。
任务
- 创建一个div，用CSS控制其大小、边框、位置等，做成一个静态的圆形，一般为红色，一般为白色
- 用div的伪元素绘制两个圆环并放置适合位置使其成为一个太极图案
- 创建动画
- 定义动画的重复属性，让其循环播放
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3animation属性详解（二）</title>
<style type="text/css">
div{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 400px;
height: 400px;
margin: auto;
border: 1px solid red;
border-bottom: 200px solid red;
border-radius: 50%;
transform-origin: 50% 50%;
animation-name: rotate;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
div:before{
content: "";
float: left;
width: 50px;
height: 50px;
border: 75px solid red;
background-color: white;
margin-top: 100px;
border-radius: 50%;
}
div:after{
content: "";
float: right;
width: 50px;
height: 50px;
border: 75px solid white;
background-color: red;
margin-top: -200px;
border-radius: 50%;
}
@keyframes rotate{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
上一篇： 网易蜂巢的容器缓存服务使用教程
下一篇： 基于node.js实现微信支付退款功能