實(shí)現(xiàn)思路
通過改變字母的top值
每個(gè)字母不能同時(shí)運(yùn)動(dòng)，通過延遲時(shí)間，for循環(huán) 2s (i*50)ms ...
infinite 動(dòng)畫會(huì)無限次地循環(huán)播放。
alternate 播放次數(shù)是奇數(shù)時(shí)，動(dòng)畫向原方向播放；播放次數(shù)是偶數(shù)時(shí)，動(dòng)畫向反方向播放
靜態(tài)效果圖
實(shí)例代碼
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> @keyframes move{ 0%{ top: 0; } 100%{ top: 10px; } } @-webkit-keyframes move{ 0%{ top: 0; } 100%{ top: 10px; } } #box { width: 200px; height: 100px; background: red; font-size: 20px; color: #fff; } #box span { position: relative; /*animation: .2s move linear infinite alternate; */ } </style> <script> window.onload = function() { var span = document.querySelectorAll('#box span'); for(var i = 0; i < span.length; i++){ span[i].style.WebkitAnimation = span[i].style.animation = " .2s "+(i*50)+"ms move linear infinite alternate"; } }; </script></head><body><div id="box"> <span>L</span> <span>o</span> <span>a</span> <span>d</span> <span>i</span> <span>n</span> <span>g</span></div></body></html>總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
