標籤：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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
