利用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与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
js获取url传值的方法
Dec 18 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
js只执行1次的函数示例
Jul 20 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
JS实现简单九宫格抽奖
Jun 28 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 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
php简单的会话类代码
2011/08/08 PHP
php类中private属性继承问题分析
2012/11/01 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
js实现楼层导航功能
2017/02/23 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
python使用range函数计算一组数和的方法
2015/05/07 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Python 实现向word(docx)中输出
2020/02/13 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
18岁生日感言
2014/01/12 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
会议邀请书范文
2014/02/02 职场文书
销售经理岗位职责
2015/01/31 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers