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

只用css實現圖片自動輪播效果

2022年5月19日
-   

css實現圖片自動輪播
只用css實現圖片輪播效果
代碼
// An highlighted block
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />





		<title></title>
		<style>
			img{
				position: absolute; /*讓所有圖片顯示在一個位置，設置絕對位置*/
				opacity: 0;
				animation: Aimg 12s infinite; /*設置圖片輪播一次時間，以及輪播方式（無限循環）*/
			}
			@keyframes Aimg{
				0% { /*在百分之零時圖片完全不可見*/
					opacity: 0;
				}
				
				1% {
					opacity: 0.3;
				}
				2% {
					opacity: 0.5;
				}
				3% {
					opacity: 0.8;
				}
				4% { /*設置這些盡量讓圖片切換時更加流暢，不突兀*/
					opacity: 1;
				}
				24% {
					opacity: 1;
				}
				
				25% { /*在此時本張圖片顯示結束，不透明度設置為0*/
					opacity: 0;





				}
			}
			img:nth-child(0){animation-delay: 0s;}/*設置下一個子元素延遲時間*/
			img:nth-child(1){animation-delay: 3s;}
			img:nth-child(2){animation-delay: 6s;}
			img:nth-child(3){animation-delay: 9s;}
		</style>
	</head>
	<body>
		<div>
			<img src="img/11.jpg" />
			<img src="img/3.jpg" />
			<img src="img/324347.jpg" />
			<img src="img/4.jpg" />
		</div>
	</body>
</html>

熱門文章