美文网首页码神之路:CSS/CSS3篇
来!跟着我动手写一个css3加载动画!

来!跟着我动手写一个css3加载动画!

作者: TracySoke | 来源:发表于2016-12-14 16:37 被阅读24次

很多前端开发者可能和我一样,对于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效果!加特技 不收费!

相关文章

网友评论

    本文标题:来!跟着我动手写一个css3加载动画!

    本文链接:https://www.haomeiwen.com/subject/btnimttx.html