css和html实现简单的图片轮播效果

目录

滑动轮播图

渐变效果实现

滑动轮播图

效果直接保存本地 html 双击打开可看

	
	
		.one {
			position: absolute;
			width: 300px;
			height: 300px;
			overflow: hidden;
		}
		.one_cantent img {
			width: 300px;
			height: 300px;
			float: left;
		}
		.one_cantent {
			width: 1500px;
			height: 300px;
			position: absolute;
			left: 0px;
			animation-name: move;
			animation-duration: 10s;
			animation-iteration-count: infinite;
		}
		@keyframes move {
			0% {
				left: 0px;
			}
			25% {
				left: -300px;
			}
			50% {
				left: -600px;
			}
			75% {
				left: -900px;
			}
			100% {
				left: -1200px
			}
		}
	


	

	
		

			
			
			
			
			
		
	

渐变效果实现

	
	轮播
	
		*{
	margin: 0;
	padding: 0;
}
.one img{
	position: absolute;
	width: 200px;
	height:300px;
}
.two img{
	position: absolute;
	width: 200px;
	height: 300px;
}
.three img{
	position: absolute;
	width: 200px;
	height:300px;
}
.three {
	animation-name: cantoons;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
.two {
	animation-name: cantoons2;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
.one {
	animation-name: cantoons1;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
@keyframes cantoons{
	0% {
		opacity: 1;
	}
	35% {
		opacity: 0;
	}
	70% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
	
}
@keyframes cantoons2{
	0% {
		opacity: 0;
	}
	35% {
		opacity: 1;
	}
	70% {
		opacity: 0;
	}
	100% {
		opacity: 0;

	}
}
@keyframes cantoons1{
	0% {
		opacity: 0;
	}
	35% {
		opacity: 0;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;

	}
}