編碼的世界 / 優質文選 / 生涯

純css動畫實現跑馬燈效果

2022年7月11日
-   

該動畫主要以@keyframes 延遲動畫實現
大致就是在動畫加載到百分之多少時“動作”進行到什麼程度
比如人去 伸手扶牆 這個“動作”
當你百分之0時不做動作，百分之百時手扶到牆，動作完成
中間那些包括你伸手，手臂打彎等等，在“時間”進行到多少，動作相應的完成到多少

	@keyframes myfirst
	{





		0% {left:0px;}
		10% {left:-200px;}
		20% {left:-200px;}
		30% {left:-400px;}
		40% {left:-400px;}
		50% {left:-600px;}
		60% {left:-600px;}
		70% {left:-800px;}
		80% {left:-800px;}
		90% {left:0px;}
		100% {left:0px;}
	}

定義完成之後在需要用到動畫的元素css中調用–animation
infinite 代表無限循環 不用的去掉即可
我這裏的 15s代表動作在15秒內完成，即15秒內“動作”執行到100%；
#dong{
	animation:myfirst infinite 15s;
	-moz-animation:myfirst infinite 15s; /* Firefox 火狐*/
	-webkit-animation:myfirst infinite 15s; /* Safari and Chrome 穀歌 */
	-o-animation:myfirst infinite 15s; /* Opera */
	}

下面上完整代碼 需要的記得修改圖片路徑 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	#dong{
	animation:myfirst infinite 15s;
	-moz-animation:myfirst infinite 15s; /* Firefox */
	-webkit-animation:myfirst infinite 15s; /* Safari and Chrome */
	-o-animation:myfirst infinite 15s; /* Opera */
	}
	@keyframes myfirst
	{
		0% {left:0px;}
		10% {left:-200px;}
		20% {left:-200px;}





		30% {left:-400px;}
		40% {left:-400px;}
		50% {left:-600px;}
		60% {left:-600px;}
		70% {left:-800px;}
		80% {left:-800px;}
		90% {left:0px;}
		100% {left:0px;}
	}
</style>
</head>
	
	<body>
		<div style="width: 200px;height: 200px; position: relative; overflow: hidden;">
		<div id="dong" style="height: 200px;width: 1000px; position: absolute; left:0px;">
			<img src="css/1.jpg"/ style="width:200px;height: 200px; position:absolute; left:0px;">
			<img src="css/11.jpg" style="width:200px;height: 200px; position:absolute; left:200px;"/>
			<img src="css/111.jpg" style="width:200px;height: 200px; position:absolute; left:400px; "/>
			<img src="css/1.jpg" style="width:200px;height: 200px; position:absolute; left:600px;"/>
			<img src="css/11.jpg" style="width:200px;height: 200px; position:absolute; left:800px;"/>
		</div>
	</div>
	</body>
</html>

熱門文章