亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

利用transition實(shí)現(xiàn)文字上下抖動(dòng)的效果

 更新時(shí)間：2017年01月21日 08:40:38   作者：happyzgm  
這篇文章主要給大家介紹了利用transition屬性如何實(shí)現(xiàn)文字上下抖動(dòng)的效果，文中給出了詳細(xì)的介紹和完整的實(shí)例代碼，相信對(duì)大家的學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋友們下面來一起看看吧。

實(shí)現(xiàn)思路

通過改變字母的top值

每個(gè)字母不能同時(shí)運(yùn)動(dòng)，通過延遲時(shí)間，for循環(huán)  2s (i*50)ms ...

infinite  動(dòng)畫會(huì)無限次地循環(huán)播放。

alternate  播放次數(shù)是奇數(shù)時(shí)，動(dòng)畫向原方向播放；播放次數(shù)是偶數(shù)時(shí)，動(dòng)畫向反方向播放

靜態(tài)效果圖

實(shí)例代碼

<!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>

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

相關(guān)文章

最新評(píng)論