css3动画之1--animation小例子

最新推荐文章于 2021-01-31 19:37:55 发布

weixin_30492047

最新推荐文章于 2021-01-31 19:37:55 发布

阅读量48

点赞数

原文链接：http://www.cnblogs.com/zjflove/p/3907116.html

版权

1.首先看效果


2、代码及分析

 <style type="text/css">
        #div1
        { 
            margin:100px;
            position: absolute;
            text-align: center;
            background: #abcdef; 
            width: 300px;
            height: 20px;
            line-height: 20px;
        }
        
@-webkit-keyframes move
{
    0%
    {
        -webkit-transform:translateY(0px)
    }    
    
    100%
    {
        -webkit-transform:translateY(-15px)
    }
}

#div1 span:nth-of-type(1){  -webkit-animation:.5s move alternate infinite; }
#div1 span:nth-of-type(2){  -webkit-animation:.5s .1s move alternate infinite;}
#div1 span:nth-of-type(3){  -webkit-animation:.5s .2s move alternate infinite;}
#div1 span:nth-of-type(4){  -webkit-animation:.5s .3s move alternate infinite;}
#div1 span:nth-of-type(5){  -webkit-animation:.5s .4s move alternate infinite;}
#div1 span:nth-of-type(6){  -webkit-animation:.5s .5s move alternate infinite;}
#div1 span:nth-of-type(7){  -webkit-animation:.5s .6s move alternate infinite;}
#div1 span:nth-of-type(8){  -webkit-animation:.5s .7s move alternate infinite;}
 

    </style>
</head>
<body>
    <div id="div1">
 <span>正</span> <span>在</span> <span>加</span> <span>载</span> <span>中</span><span>.</span><span>.</span><span>.</span>
        
    </div>
</body>

------------------------------------------------------------------------------

alternate infinite alternate:动画循环执行,infinite:执行无限次 
--分析：1、按照顺序的执行，也就是说延迟时间会逐渐增加

解释：  -webkit-animation:.5s/*执行时间*/ .1s/*延迟时间*/ move alternate infinite;} 
查看效果(建议用Chrome浏览器): http://www.tuzizjf.com/project/css30812.html

转载于:https://www.cnblogs.com/zjflove/p/3907116.html

weixin_30492047

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫