很多前端開發(fā)者可能和我一樣醇坝，對(duì)于css3的動(dòng)畫寫的不多次坡，遇到產(chǎn)品強(qiáng)制加特技，趕緊上網(wǎng)搜案例宋距！呵呵噠症脂！當(dāng)然作為乘著HTML5熱潮的前端開發(fā)者淫僻，不會(huì)手寫幾個(gè)高逼格的動(dòng)畫壶唤，你怎么和老革命家劃清界限呢？對(duì)吧闸盔！來上馬迎吵！
今天我呢，帶著大家做一個(gè)加載的動(dòng)畫效果击费！
說到動(dòng)畫就要用到animation啦，來餓補(bǔ)一下：
描述
animation-name
規(guī)定需要綁定到選擇器的 keyframe 名稱。瞬铸。
animation-duration
規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間嗓节，以秒或毫秒計(jì)。
animation-timing-function
規(guī)定動(dòng)畫的速度曲線拦宣。
animation-delay
規(guī)定在動(dòng)畫開始之前的延遲。
animation-iteration-count
規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)绸罗。
animation-direction
規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫豆瘫。
原諒我借用一下w3cschool的資源哈，不過建議大家去菜鳥教程看文檔育灸，會(huì)比較全昵宇，當(dāng)然對(duì)著官方文檔效果會(huì)更好一些。
看一下整頁的代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.div1
{
border-radius:50px;
width:100px;
height:100px;
background:red;
left: 0;
top: 0;
position:absolute;
animation-name:myfirst1;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst1;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
.div2{
border-radius:50px;
width:100px;
height:100px;
left:200px
top:0px;
background:yellow;
position:absolute;
animation-name:myfirst2;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst2;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
.div3{
border-radius:50px;
width:100px;
height:100px;
left:200px
top:200px;
background:blue;
position:absolute;
animation-name:myfirst3;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst3;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
.div4{
border-radius:50px;
width:100px;
height:100px;
left:0px
top:200px;
background:green;
position:absolute;
animation-name:myfirst4;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst4;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst1
{
0% {background:red; left:300px; top:300px;}
25% {background:yellow; left:500px; top:300px;}
50% {background:blue; left:500px; top:500px;}
75% {background:green; left:300px; top:500px;}
100% {background:red; left:300px; top:300px;}
}
@-webkit-keyframes myfirst1 /* Safari and Chrome */
{
0% {background:red; left:300px; top:300px;}
25% {background:yellow; left:500px; top:300px;}
50% {background:blue; left:500px; top:500px;}
75% {background:green; left:300px; top:500px;}
100% {background:red; left:300px; top:300px;}
}
@keyframes myfirst2
{
0% {background:yellow; left:500px; top:300px;}
25% {background:blue; left:500px; top:500px;}
50% {background:green; left:300px; top:500px;}
75% {background:red; left:300px; top:300px;}
100% {background:yellow; left:500px; top:300px;}
}
@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
0% {background:yellow; left:500px; top:300px;}
25% {background:blue; left:500px; top:500px;}
50% {background:green; left:300px; top:500px;}
75% {background:red; left:300px; top:300px;}
100% {background:yellow; left:500px; top:300px;}
}
@keyframes myfirst3
{
0% {background:blue; left:500px; top:500px;}
25% {background:green; left:300px; top:500px;}
50% {background:red; left:300px; top:300px;}
75% {background:yellow; left:500px; top:300px;}
100% {background:blue; left:500px; top:500px;}
}
@-webkit-keyframes myfirst3 /* Safari and Chrome */
{
0% {background:blue; left:500px; top:500px;}
25% {background:green; left:300px; top:500px;}
50% {background:red; left:300px; top:300px;}
75% {background:yellow; left:500px; top:300px;}
100% {background:blue; left:500px; top:500px;}
}
@keyframes myfirst4
{
0% {background:green; left:300px; top:500px;}
25% {background:red; left:300px; top:300px;}
50% {background:yellow; left:500px; top:300px;}
75% {background:blue; left:500px; top:500px;}
100% {background:green; left:300px; top:500px;}
}
@-webkit-keyframes myfirst4 /* Safari and Chrome */
{
0% {background:green; left:300px; top:500px;}
25% {background:red; left:300px; top:300px;}
50% {background:yellow; left:500px; top:300px;}
75% {background:blue; left:500px; top:500px;}
100% {background:green; left:300px; top:500px;}
}
</style>
<body style="">
<div class="Center-Container">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</div>
</body>
</html>
html的結(jié)構(gòu)很簡單哈恩够，精華都在css里了，有興趣的童鞋復(fù)制下來運(yùn)行一下蜂桶，還是有點(diǎn)逼格的哈，這次分享的是平面動(dòng)畫腰湾，下次給大家來個(gè)炫酷的3d效果疆股！加特技 不收費(fèi)！
