编程 Javascript

利用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>

总结

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

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

- Author -

happyzgm

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS实现打开本地文件或文件夹

Mar 09 Javascript

javascript中的onkeyup和onkeydown区别介绍

Apr 28 Javascript

12306验证码破解思路分享

Mar 25 Javascript

AngularJS实现元素显示和隐藏的几个案例

Dec 09 Javascript

javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

Jan 08 Javascript

Bootstrap学习笔记之css样式设计(1)

Jun 07 Javascript

js简单时间比较的方法

Aug 02 Javascript

js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数

Oct 25 Javascript

jQuery联动日历的实例解析

Dec 02 Javascript

jQuery利用FormData上传文件实现批量上传

Dec 04 jQuery

JavaScript 预解析的4种实现方法解析

Sep 03 Javascript

微信小程序表单验证WxValidate的使用

Nov 27 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