一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe 名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
你是不是说的这种圆点依次出现的效果？如果是的haul，那就用动画来做就可以了。下面是源码，可以参考一下咯。另外，javascript也可以来控制依次出现。
<!DOCTYPE html>
<html>
<head>
<title>圆点依次出现</title>
<meta name="keywords" content="圆点依次出现"/>
<meta name="description" content="圆点依次出现"/>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<style>
*{
padding:0
margin:0
box-shadow:1px 1px gray inset,-1px -1px gray inset
}
#box{
position:relative
width:30%
height:300px
margin:0 auto
}
.dian{
position:absolute
width:20px
height:20px
border-radius:50%
top:270px
}
#dian1{
left:70%
animation:xdian1 2.5s both linear infinite
-webkit-animation:xdian1 2.5s both linear infinite/* Safari and Chrome */
}
#dian2{
left:80%
animation:xdian2 2.5s both linear infinite
-webkit-animation:xdian2 2.5s both linear infinite/* Safari and Chrome */
}
#dian3{
left:90%
animation:xdian3 2.5s both linear infinite
-webkit-animation:xdian3 2.5s both linear infinite/* Safari and Chrome */
}
@keyframes xdian1{
0%{background:gray}
33%{background:none}
68%{background:none}
100%{background:none}
}
@keyframes xdian2{
0%{background:none}
33%{background:gray}
68%{background:none}
100%{background:none}
}
@keyframes xdian3{
0%{background:none}
33%{background:none}
68%{background:gray}
100%{background:none}
}
</style>
</head>
<body>
<div id="box">
<span id="dian1"></span>
<span id="dian2"></span>
<span id="dian3"></span>
</div>
</body>
</html>
这个源码可以参考一下咯，自己用的时候还可以继续修改优化。
