首页 > 代码库 > css3动画之1--animation小例子

css3动画之1--animation小例子

2024-07-17 03:30:15   230人阅读

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


联系
我们