标签：style blog http color os io strong for
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
css3动画之1--animation小例子,布布扣,bubuko.com
标签：style blog http color os io strong for
原文地址：http://www.cnblogs.com/zjflove/p/3907116.html
