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

「爱情、让人受尽委屈。」 2022-02-15 00:11 239阅读 0赞

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

三种方式：  
1.直接变换

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>css动画</title>
    	<style>
    		.one {
    			width: 400px;
    			height: 300px;
    			animation-name: move;
    			animation-duration: 10s;
    			animation-iteration-count: infinite;
    		}
    		@keyframes move {
    			0% {
    				background-image: url("./image/1.jpg");
    				background-size: cover;
    			}
    			20% {
    				
    				background-image: url("./image/2.jpg");
    				background-size: cover;
    			}
    			40% {
    				
    				background-image: url("./image/5.jpg");
    				background-size: cover;
    			}
    			60% {
    				
    				background-image: url("./image/4.jpg");
    				background-size: cover;
    			}
    			80% {
    			
    				background-image: url("./image/6.jpg");
    					background-size: cover;
    			}
    			100% {
    				
    				background-image: url("./image/1.jpg");
    				background-size: cover;
    			}
    		}
    	</style>
    </head>
    <body>
    	<div class="one">
    		
    	</div>
    </body>
    </html>

2.滑动效果

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>css实现轮播效果</title>
    	<style type="text/css">
    		.one {
    			position: absolute;
    			width: 500px;
    			height: 400px;
    			overflow: hidden;
    		}
    		.one_cantent img {
    			width: 500px;
    			height: 300px;
    			float: left;
    		}
    		.one_cantent {
    			width: 2500px;
    			height: 400px;
    			position: absolute;
    			left: 0px;
    			animation-name: move;
    			animation-duration: 10s;
    			animation-iteration-count: infinite;
    		}
    		@keyframes move {
    			0% {
    				left: 0px;
    			}
    			25% {
    				left: -500px;
    			}
    			50% {
    				left: -1000px;
    			}
    			75% {
    				left: -1500px;
    			}
    			100% {
    				left: -2000px
    			}
    		}
    	</style>
    </head>
    <body>
    	<div class="one">
    		<div class="one_cantent">
    			<img src="./image/0.jpg">
    			<img src="./image/1.jpg">
    			<img src="./image/2.jpg">
    			<img src="./image/3.jpg">
    			<img src="./image/4.jpg">
    		</div>
    	</div>
    </body>
    </html>

3.渐变效果

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>轮播</title>
    	<style>
    		*{
    	margin: 0;
    	padding: 0;
    }
    .one img{
    	position: absolute;
    	width: 400px;
    	height:200px;
    }
    .two img{
    	position: absolute;
    	width: 400px;
    	height: 200px;
    }
    .three img{
    	position: absolute;
    	width: 400px;
    	height:200px;
    }
    .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;
    
    	}
    }
    	</style>
    	
    </head>
    <body>
    	<div class="one">
    		<img src="./image/1.jpg" alt="">
    	</div>
    	<div class="two">
    		<img src="./image/2.jpg" alt="">	
    	</div>
    	<div class="three">
    		<img src="./image/3.jpg" alt="">	
    	</div>
    	
    </body>
    </html>

[源码连接][Link 1]提取码：uaix

[Link 1]: https://pan.baidu.com/s/1M1qyuPiQ9vaPKYl9lhlNxA