源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

利用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)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部