这篇文章主要给大家介绍了利用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> <span>L</span> <span>o</span> <span>a</span> <span>d</span> <span>i</span> <span>n</span> <span>g</span> </div> </body> </html>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
您可能感兴趣的文章: