很多前端開(kāi)發(fā)者可能和我一樣，對(duì)于css3的動(dòng)畫寫的不多，遇到產(chǎn)品強(qiáng)制加特技，趕緊上網(wǎng)搜案例！呵呵噠！當(dāng)然作為乘著HTML5熱潮的前端開(kāi)發(fā)者，不會(huì)手寫幾個(gè)高逼格的動(dòng)畫，你怎么和老革命家劃清界限呢？對(duì)吧！來(lái)上馬！
今天我呢，帶著大家做一個(gè)加載的動(dòng)畫效果！
說(shuō)到動(dòng)畫就要用到animation啦，來(lái)餓補(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)畫開(kāi)始之前的延遲。
animation-iteration-count
規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。
animation-direction
規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。
原諒我借用一下w3cschool的資源哈，不過(guò)建議大家去菜鳥(niǎo)教程看文檔，會(huì)比較全，當(dāng)然對(duì)著官方文檔效果會(huì)更好一些。
看一下整頁(yè)的代碼:
<!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)很簡(jiǎn)單哈，精華都在css里了，有興趣的童鞋復(fù)制下來(lái)運(yùn)行一下，還是有點(diǎn)逼格的哈，這次分享的是平面動(dòng)畫，下次給大家來(lái)個(gè)炫酷的3d效果！加特技 不收費(fèi)！
