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

墨蓝 2022-09-10 06:28 134阅读 0赞

**目录**

滑动轮播图

渐变效果实现

--------------------

# 滑动轮播图 #

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

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<style type="text/css">
    		.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
    			}
    		}
    	</style>
    </head>
    <body>
    	<div class="one">
    	
    		<div class="one_cantent">
    			<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/115.png">
    			<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/112.png">
    			<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/111.png">
    			<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/113.png">
    			<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/114.png">
    		</div>
    	</div>
    </body>
    </html>

# 渐变效果实现 #

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>轮播</title>
    	<style>
    		*{
    	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;
    
    	}
    }
    	</style>
    	
    </head>
    <body>
    
    	<div class="one">
    		<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/115.png" alt="">
    	</div>
    	<div class="two">
    		<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/112.png" alt="">	
    	</div>
    	<div class="three">
    		<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/111.png" alt="">	
    	</div>
    
    	
    </body>
    </html>