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


Posted in Javascript onJanuary 21, 2017

实现思路

通过改变字母的top值

每个字母不能同时运动,通过延迟时间,for循环  2s (i*50)ms ...

infinite  动画会无限次地循环播放。

alternate  播放次数是奇数时,动画向原方向播放;播放次数是偶数时,动画向反方向播放

静态效果图

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

实例代码

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

总结

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

Javascript 相关文章推荐
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
JS基础之undefined与null的区别分析
Aug 08 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
jQuery Ajax实现跨域请求
Jan 21 #Javascript
three.js快速入门【推荐】
Jan 21 #Javascript
详解Angualr 组件间通信
Jan 21 #Javascript
js的三种继承方式详解
Jan 21 #Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 #Javascript
微信小程序 自定义对话框实例详解
Jan 20 #Javascript
Vue实例简单方法介绍
Jan 20 #Javascript
You might like
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python 获取div标签中的文字实例
2018/12/20 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
python 变量初始化空列表的例子
2019/11/28 Python
德国家具折扣店:POCO
2020/02/28 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
生物技术专业求职信
2014/06/10 职场文书
道路施工安全责任书
2014/07/24 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
初中团委工作总结
2015/08/13 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers