<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 1.清除默认样式 */
* {
margin: 0;
padding: 0;
/* box-sizing: border-box; */
}
li {
list-style: none;
}
a {
text-decoration: none;
}
/* 2.盒子区域一次性显示3张图片,每张图片宽度为200px */
.box {
width: 600px;
height: 100px;
border: 2px solid #000;
margin: auto;
/* 隐藏溢出部分的内容 */
overflow: hidden;
}
/* 3.设置图片的宽度为200 */
.box ul>li>a>img {
width: 200px;
height: 100px;
/* 让图片垂直对齐 */
vertical-align: middle;
}
/* 4.让li浮动 */
.box ul>li {
float: left;
}
/* 5.给ul设置宽度,宽度等于图片的个数×200px */
.box ul {
/* 7*200px */
/* width: 1400px; */
width: 2000px;
/* 7.ul移动动画,匀速移动:linear,循环播放:infinite */
animation: move 10s linear infinite;
}
/* 6.定义动画让ul往左水平移动 */
@keyframes move {
to {
transform: translateX(-1400px);
}
}
/* box,hover,让ul暂停播放 */
.box:hover ul {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<ul>
<!-- 1.li产品显示七张图片 -->
<li><a href=""><img src="img/d.png" alt=""></a></li>
<li><a href=""><img src="img/ddd.png" alt=""></a></li>
<li><a href=""><img src="img/dddd.png" alt=""></a></li>
<li><a href=""><img src="img/ddddddd.jpg" alt=""></a></li>
<li><a href=""><img src="img/d.png" alt=""></a></li>
<li><a href=""><img src="img/ddd.png" alt=""></a></li>
<li><a href=""><img src="img/ddddddd.jpg" alt=""></a></li>
<!-- 移动到第七张图片的时候后面没有位置了,所以要将前三张图片复制到尾部,显示内容区域多大,就复制多少张图片 -->
<!-- 还得改变ul的宽度,否则图片会不在一行显示10*200=2000px -->
<li><a href=""><img src="img/d.png" alt=""></a></li>
<li><a href=""><img src="img/ddd.png" alt=""></a></li>
<li><a href=""><img src="img/dddd.png" alt=""></a></li>
</ul>
</div>
</body>
</html>
2356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
