当前位置：首页 > 资讯 > 技术文档

利用transition实现文字上下抖动的效果

时间：2020-05-16 18:11 编辑：来源：阅读：
扫一扫，手机访问

摘要：利用transition实现文字上下抖动的效果

[b]实现思路[/b] 通过改变字母的top值每个字母不能同时运动，通过延迟时间，for循环 2s (i*50)ms ... infinite 动画会无限次地循环播放。 alternate 播放次数是奇数时，动画向原方向播放；播放次数是偶数时，动画向反方向播放 [b]静态效果图[/b] [img]http://files.jb51.net/file_images/article/201701/2017120183202060.png?2017020183214[/img] [b]实例代码[/b]

<!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>

[b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

全部评论(0)

上一篇：webpack独立打包和缓存处理详解
下一篇：js实现网页收藏功能

资讯排行榜
更多>>