首頁 > 開發者 > JavaScript
利用transition實現文字上下抖動的效果，transition抖動
實現思路
通過改變字母的top值
每個字母不能同時運動，通過延遲時間，for迴圈 2s (i*50)ms ...
infinite 動畫會無限次地迴圈播放。
alternate 播放次數是奇數時，動畫向原方向播放；播放次數是偶數時，動畫向反方向播放
靜態
執行個體代碼
<!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>
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的協助，如果有疑問大家可以留言交流。
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
