HTML + CSS 实现轮播图效果

刺骨的言语ヽ痛彻心扉 2023-07-11 12:43 14阅读 0赞

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ 
    				padding: 0px;
    				margin: 0px;
    			}
    			.nav{ 
    				width: 450px;
    				height: 100px;
    				overflow: hidden;
    				border: 1px solid red;
    			}
    			.nav ul{ 
    				width: 800px;
    				height: 80px;
    				animation-name: nav_lun;
    				animation-duration: 2s;/* 一次滚动的时间 */
    				animation-timing-function:linear;/* 匀速 */
    				animation-iteration-count:infinite;/* 设置循环播放 */
    				animation-delay: 1s; /* 鼠标移到ul上一秒后才开始滑动*/
    			}
    			.nav ul li{ 
    				width: 100px;
    				height: 100px;
    				display: inline-block;
    				float: left;
    
    			}
    			.nav ul li img{ 
    				widows: 100px;
    				height: 100px;
    			}
    			/* 鼠标移到div中时暂停 */
    			.nav ul:hover{ 
    				animation-play-state:paused;
    			}
    			
    			/* 平移像素位置 */
    			@keyframes nav_lun{ 
    				from{ 
    					transform: translate(0px,0px); 
    				}
    				to{ 
    					transform: translate(-400px,0px); 
    				}
    			}
    		</style>
    	</head>
    	<body>
    		<center>
    		<div class="nav">
    		<ul>
    			<li>
    				<img src="cupon4.png" />
    			</li>
    			<li>
    				<img src="cupon5.png" />
    			</li>
    			<li>
    				<img src="cupon6.png" />
    			</li>
    			<li>
    				<img src="cupon7.png" />
    			</li>
    			<li>
    				<img src="cupon4.png" />
    			</li>
    			<li>
    				<img src="cupon5.png" />
    			</li>
    			<li>
    				<img src="cupon6.png" />
    			</li>
    			<li>
    				<img src="cupon7.png" />
    			</li>
    		</ul>
    		</div>
    		</center>
    	</body>
    </html>