利用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 相关文章推荐
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
JQuery select(下拉框)操作方法汇总
Apr 15 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 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 MYSQL中插入当前时间
2008/04/06 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
Vue实现购物车场景下的应用
2017/11/27 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
简单学习Python time模块
2016/04/29 Python
python中import reload __import__的区别详解
2017/10/16 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
六年级学生评语
2014/04/22 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
迎新生标语大全
2014/10/06 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
文艺委员竞选稿
2015/11/19 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android