利用transition实现文字上下抖动的效果
2017-01-21 08:40
579 查看
实现思路
通过改变字母的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>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
您可能感兴趣的文章:
相关文章推荐
- VC中实现文字竖排的简单方法(推荐)
- 让电脑右下角显示你想要文字
- C#模拟MSN窗体抖动的实现代码
- 让超出DIV宽度范围的文字自动显示省略号...
- 使用CSS不用程序实现文字自动截断 用省略号代替
- 使用GD库生成带阴影文字的图片
- C#获取关键字附近文字算法实例
- asp.net下GDI+的一些常用应用(水印,文字,圆角处理)技巧
- 图片与文字半透明效果 鼠标移上不透明
- Three.js学习之文字形状及自定义形状
- 基于JavaScript实现文字超出部分隐藏
- javascript 网页上跳动的文字
- JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
- JS实现来回出现文字的状态栏特效代码
- JS实现文字掉落效果的方法
- JavaScript实现窗口抖动效果
- Javascrip实现文字跳动特效
- 全面解析Bootstrap中transition、affix的使用方法
- filters.revealTrans.Transition使用方法小结
- CSS3中Transition属性详解以及示例分享