CSS3动画效果学习:Loading动画1条评论

2013-04-27    分类:前端开发    661   

最近在学习CSS3,发现CSS3确实非常炫,连动画效果都能做,今天看到一个用CSS3的Loading效果,刚好学习了一下动画效果,正跃跃欲试呢,果断马上动手~

先上效果图:

loading

HTML代码:

<div class=”loading”>
<div class=”circle1″></div>
<div class=”circle2″></div>
</div>

CSS代码:

body{
background:#111;
}
.loading{
margin:100px auto;
position:relative;
width:60px;
}
.circle1{
width:60px;
height:60px;
border:5px solid;
border-color: rgba(0, 183, 229, 1) transparent;
box-shadow:0 0 40px #2187E7;
border-radius:43px;
animation:circle1 1s infinite linear;
-webkit-animation:circle1 1s infinite linear;
-moz-animation:circle1 1s infinite linear;
}
.circle2{
width:36px;
height:36px;
position:absolute;
top:6px;
left:6px;
margin-left:6px;
margin-top:6px;
border:5px solid;
border-color: transparent rgba(0, 183, 229, 1);
border-radius:36px;
box-shadow:0 0 10px #2187E7;
animation:circle2 1s infinite ease-in-out;
-webkit-animation:circle2 1s infinite ease-in-out;
-moz-animation:circle2 1s infinite ease-in-out;
}
@keyframes circle1{
0%{
transform:rotate(0deg);
opacity:0;
box-shadow:0 0 1px #2187e7
}

50%{
transform:rotate(-45deg);
opacity:1
}
100%{
transform:rotate(-540deg);
opacity:0
}
}
@keyframes circle2{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
@-moz-keyframes circle1{
0%{
transform:rotate(0deg);
opacity:0;
box-shadow:0 0 1px #2187e7
}

50%{
transform:rotate(-45deg);
opacity:1
}
100%{
transform:rotate(-540deg);
opacity:0
}
}
@-moz-keyframes circle2{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
@-webkit-keyframes circle1{
0%{
transform:rotate(0deg);
opacity:0;
box-shadow:0 0 1px #2187e7
}

50%{
transform:rotate(-45deg);
opacity:1
}
100%{
transform:rotate(-540deg);
opacity:0
}
}
@-webkit-keyframes circle2{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}

效果演示地址:http://cssdeck.com/labs/zrfryxza

转载请注明:Lomu » CSS3动画效果学习:Loading动画

继续查看有关 的文章

相关文章

1访客评论

  1. 过来学习了

我来说说

发表评论您必须先登录