css3之实例3——实现文字跳动

静态效果图如下：

<!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;
				line-height: 100px;
				text-align: center;
				background: red;
				font-size: 24px;
				color: #fff;
			}
			#box span {
				position: relative;
			}
		</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 = " .5s "+(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>

　　

 

posted on 2017-12-07 14:30  木之子梦之蝶  阅读(396)  评论(0)  编辑  收藏  举报

导航