只用css实现图片自动轮播效果

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>




你可能感兴趣的:(css,html)