很多前端开发者可能和我一样，对于css3的动画写的不多，遇到产品强制加特技，赶紧上网搜案例！呵呵哒！当然作为乘着HTML5热潮的前端开发者，不会手写几个高逼格的动画，你怎么和老革命家划清界限呢？对吧！来上马！
今天我呢，带着大家做一个加载的动画效果！
说到动画就要用到animation啦，来饿补一下：
描述
animation-name
规定需要绑定到选择器的 keyframe 名称。。
animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function
规定动画的速度曲线。
animation-delay
规定在动画开始之前的延迟。
animation-iteration-count
规定动画应该播放的次数。
animation-direction
规定是否应该轮流反向播放动画。
原谅我借用一下w3cschool的资源哈，不过建议大家去菜鸟教程看文档，会比较全，当然对着官方文档效果会更好一些。
看一下整页的代码:
<!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的结构很简单哈，精华都在css里了，有兴趣的童鞋复制下来运行一下，还是有点逼格的哈，这次分享的是平面动画，下次给大家来个炫酷的3d效果！加特技 不收费！
网友评论