css3动画之小牛奔跑

今天突然看到阿里云官网的一个悬浮效果挺炫的，就想知道到底是怎么做的，研究了半天，加了一个技术群，原来是css3做的，然后做了一个小 Demo记录下来:

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title></title>
        <style>
            .run{width: 100px; height:100px;position:absolute;left:0;top:10px; background: url(images/run.jpg) no-repeat;}
            .run{
                animation:runAnimation 300ms steps(5) infinite;
                -webkit-animation:runAnimation 300ms steps(5) infinite;
                -o-animation:runAnimation 300ms steps(5) infinite;
                -moz-animation:runAnimation 300ms steps(5) infinite;
            }
            @-webkit-keyframes runAnimation{
                from{background-position: 0px 0px;}
                to{background-position: -500px 0px;}
            }
            @-moz-keyframes runAnimation{
                from{background-position: 0px 0px;}
                to{background-position: -500px 0px;}
            }
            @-o-keyframes runAnimation{
                from{background-position: 0px 0px;}
                to{background-position: -500px 0px;}
            }
        </style>
    </head>
    <body>
        <div class="run"></div>
        
    </body>
</html>

 

效果就是图片中的小牛一直奔跑　　

1.首先，引入图片，图片是状态是帧图片（就是一帧对应一个动作），然后定位。

2.用css3的animation语法：

animation: name duration timing-function delay iteration-count direction;

name:需要绑定到选择器的 keyframe 名称
duration :完成动画所花费的时间，以秒或毫秒计。
timing-function:动画的速度曲线。
delay :规定在动画开始之前的延迟。
iteration-count:规定动画应该播放的次数。
direction:规定是否应该轮流反向播放动画。

3.通过 @keyframes 规则，创建动画:

　　创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

　　在动画过程中，能够多次改变这套 CSS 样式。

　　以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

　　0% (from)是动画的开始时间，100%(to) 动画的结束时间。

　　tips：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

看起来很炫的效果，通过css3来写就很简单了。

posted @ 2016-08-17 18:00  sunwy927  阅读(397)  评论(1)  编辑  收藏  举报