css自动轮播图

最新推荐文章于 2023-09-13 13:46:29 发布

狗的一天

最新推荐文章于 2023-09-13 13:46:29 发布

阅读量223

点赞数

文章标签： html css html5

本文链接：https://blog.csdn.net/weixin_42638125/article/details/109511666

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 820px;
				height: 200px;
			}
			
			.top-img {
				width: 820px;
				height: 300px;
				background-color: #535354;
				overflow: hidden;
				position: relative;
			}
			/* 去除li标签样式 和li标签的大小 */
			.box .top-img li {
				width: 25%;
				float: left;
				height: 300px;
				
			}
			.i1{
				background-color: #00FF7F;
			}
			.i2{
				background-color: #ffff7f;
			}
			.i3{
				background-color: #55ffff;
			}
			.i4{
				background-color: #ffaaff;
			}
			
			.top-img ul{
				margin: 0;
				padding: 0;
				list-style: none;
				width: 3280px;
				position: absolute;
				left: 0;
				transition: left 0.5s;
				animation: my 5s infinite;
				
			}
			/* 设置图片大小 */
			.box .top-img li img{
				width: 100%;
			}
			/* 鼠标悬浮时移动ul标签 */
			
			
			
			@keyframes my{
				0% {
					left: 0px;
				}
				30%,35% {
					left: -820px;
				}
				60%,70%{
					left: -1640px;
				}
				95%,100%{
					left: -2460px;
				}
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			<!-- 导航部分 -->
			<ul class="box-u">
				<!-- 切换的部分 -->
				<div class="top-img">
					<ul>
						<li class="i1"><!-- <img src="./huawei.jpg"> --></li>
						<li class="i2"><!-- <img src="./img1.jpeg"> --></li>
						<li class="i3"><!-- <img src="img2.jpeg"> --></li>
						<li class="i4"><!-- <img src="./huawei.jpg"> --></li>
					</ul>
				</div>

			</ul>
		</div>
	</body>
</html>

狗的一天

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css自动轮播图

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul{ margin: 0; padding: 0; } .box{ width: 820px; height: 200px; } .top-img {
复制链接

扫一扫