利用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 相关文章推荐
原生js写的放大镜效果
Aug 22 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
3种vue组件的书写形式
Nov 29 Javascript
Node+OCR实现图像文字识别功能
Nov 26 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
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 常见郁闷问题答解
2006/11/25 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
js注意img图片的onerror事件的分析
2011/01/01 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
Vue指令指令大全
2019/02/09 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
python写日志封装类实例
2015/06/28 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
详解爬虫被封的问题
2019/04/23 Python
Django model select的多种用法详解
2019/07/16 Python
python的faker库用法
2019/11/28 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
高山背包:High Sierra
2017/11/23 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
个人简历自我评价八例
2013/10/31 职场文书
学校党员对照检查材料
2014/08/28 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
婚礼父母答谢词
2015/01/04 职场文书
项目负责人岗位职责
2015/02/15 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
高三数学教学反思
2016/02/18 职场文书