css3同心圆闪烁扩散效果
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type='text/css'>
.circle{width:200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;}
.circle1, .circle2, .circle3, .center{
position:absolute;
left:50%;
top:50%;
margin:-30px 0 0 -30px;
width:60px;
height:60px;
border-radius:30px;
background-color:#666666;
}
.center{
position:absolute;
left:50%;
top:50%;
margin:-35px 0 0 -35px;
width:70px;
height:70px;
border-radius:35px;
background:#111111;/
text-align:center;
line-height:70px;
color:#EAEAEA;
font-size:16px;
font-family:'';
}
.circle1{
-webkit-animation:circle 3s linear infinite;
animation:circle 3s linear infinite;
}
.circle2{
-webkit-animation:circle 3s linear 0.8s infinite;
animation:circle 3s linear 0.8s infinite;
}
.circle3{
-webkit-animation:circle 3s linear 1.6s infinite;/* Safari and Chrome */
animation:circle 3s linear 1.6s infinite;
}
@-webkit-keyframes circle{ /* Safari and Chrome */
from{
opacity:1;
-webkit-transform:scale(0);
}
to{
opacity:0;
-webkit-transform:scale(3);
}
}
</style>
</head>
<body>
<div class='circle'>
<div class='circle1'> </div>
<div class='circle2'> </div>
<div class='circle3'> </div>
<div class='center'></div>
</div>
</body>
</html>
- 上一篇 »CSS3 Loading，加载动画效果
- 下一篇 »css3之outline属性