利用CSS3中的animation属性可以实现很多很炫的动画效果。下面是自己写的一个动画加载效果，有兴趣的朋友可以看看。先看看animation属性有哪些：
@keyframes 规定对象动画。 animation-name 规定@keyframes动画的名称。 animation-duration 规定动画完成所花费的时间，单位秒或毫秒。默认为0。 animation-timing-function 规定动画的过渡类型。默认为ease（平滑过渡）。linear（线性过渡）；ease-in（动画由慢到快）；ease-out（动画由快到慢）；ease-in-out（动画由慢到快再到慢）。 animation-delay 规定对象动画何时开始。默认为0。 animation-iteration-count 规定对象动画的播放次数。默认为1。 animation-direction 规定对象动画是否反向播放。默认为normal（动画正常播放）。alternate（动画按正反方向交替播放）。 animation-play-state 规定对象动画是否正在运行或暂停。默认为running（动画正在播放）。paused（动画已暂停）。 animation-fill-mode 规定对象动画之外的时间状态。
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
width: 100%;
height: 100%;
background-color: #000000;
}
.wrapper{
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: 50%; left: 50%;
margin-left: -100px;
margin-top: -100px;
}
.circle{
width: 100%;
height: 100%;
position: absolute;
}
.circle .outer{
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.5);
box-shadow: 1px 1px 10px 2px rgba(255,255,255,0.8);
-webkit-animation: spin-out 2s infinite linear;
animation: spin-out 2s infinite linear;
}
.circle .inner{
width: 180px;
height: 180px;
border-radius: 50%;
border: 7px solid rgba(255,255,255,.8);
position: absolute;
top: 5px; left: 5px;
border-top-color: transparent;
border-bottom-color: transparent;
box-shadow: 1px 1px 10px inset rgba(255,255,255,.2);
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
.circle .inner2{
width: 150px;
height: 150px;
border-radius: 50%;
border: 10px solid rgba(255,255,255,1);
position: absolute;
top: 18px; left: 18px;
border-left-color: transparent;
border-right-color: transparent;
box-shadow: 1px 1px 10px 2px inset rgba(255,255,255,.5);
-webkit-animation: spin-in2 2s infinite linear;
animation: spin-in2 2s infinite linear;
}
.circle .inner3{
width: 120px;
height: 120px;
border-radius: 50%;
border: 7px solid rgba(255,255,255,.6);
position: absolute;
top: 37px; left: 37px;
border-top-color: transparent;
border-bottom-color: transparent;
box-shadow: 1px 1px 10px inset rgba(255,255,255,.5);
-webkit-animation: spin-in3 1s infinite linear;
animation: spin-in3 1s infinite linear;
}
.circle .inner4{
width: 90px;
height: 90px;
border-radius: 50%;
border: 7px solid rgba(255,255,255,.8);
position: absolute;
top: 53px; left: 53px;
border-top-color: transparent;
border-bottom-color: transparent;
box-shadow: 1px 1px 10px rgba(255,255,255,.5);
-webkit-animation: spin-in3 1s infinite linear;
animation: spin-in3 1s infinite linear;
}
@-moz-keyframes spin-out{
from{-webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 0.3;}
to{-webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 1;}
}
@-webkit-keyframes spin-out{
from{-webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 0.3;}
to{-webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 1;}
}
@keyframes spin-out{
from{-webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 0.3;}
to{-webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 1;}
}
@-moz-keyframes spin{
from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
to{-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@-webkit-keyframes spin{
from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
to{-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes spin{
from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
to{-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@-moz-keyframes spin-in2{
from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
to{-webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
}
@-webkit-keyframes spin-in2{
from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
to{-webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
}
@keyframes spin-in2{
from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
to{-webkit-transform: rotate(-360deg); transform: rotate(-360deg);}
}
@-moz-keyframes spin-in3{
from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
to{-webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
}
@-webkit-keyframes spin-in3{
from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
to{-webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
}
@keyframes spin-in3{
from{-webkit-transform: rotate(0deg); transform: rotate(0deg);}
to{-webkit-transform: rotate(-180deg); transform: rotate(-180deg);}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="circle">
<div class="outer"></div>
<div class="inner"></div>
<div class="inner2"></div>
<div class="inner3"></div>
<div class="inner4"></div>
</div>
</div>
</body>
</html>
效果演示.gif
实际的效果比上面这个效果图更炫哦！复制代码到本地自己运行下吧~
作者：后知后觉_A
链接：https://www.jianshu.com/p/482761bf6ca5
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦