利用transition实现文字上下抖动的效果
更新时间：2017年01月21日 08:40:38 作者：happyzgm
这篇文章主要给大家介绍了利用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>
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
这篇文章主要介绍了第二篇Bootstrap起步的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JS实现为动态添加的元素增加事件功能,结合实例形式分析了javascript基于事件委托实现针对动态添加的元素增加事件的相关操作技巧,需要的朋友可以参考下2018-03-03
这篇文章主要为大家详细介绍了bootstrap table使用入门基本用法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
Bootstrap每天必学之折叠，本文向大家讲解了Bootstrap折叠操作，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要为大家详细介绍了javascript canvas封装动态时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
今天在HTML中引入JavaScript文件运行时，alert弹出的提示框中文显示为乱码，怎么解决此问题呢？下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法，一起看看吧2017-09-09
这篇文章主要介绍了微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了JS中SetTimeout和SetInterval使用初探,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了微信小程序canvas开发水果老虎机的思路，本文通过思路代码分步骤给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
第一种：用flag标识，下面的代码设置checkSubmitFlg标志；第二种：在onsubmit事件中设置，在第一次提交后使提交按钮失效，感兴趣的朋友可以了解下2013-09-09
最新评论