transition,抖动,js,图片上下抖动效果,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>总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
transition,抖动,js,图片上下抖动效果,transition,动画抖动
|
