<!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: 5px 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 5s 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="./images/images/1.jpg" alt=""></a></li>
<li><a href=""><img src="./images/images/2.jpg" alt=""></a></li>
<li><a href=""><img src="./images/images/3.jpg" alt=""></a></li>
<li><a href=""><img src="./images/images/4.jpg" alt=""></a></li>
<li><a href=""><img src="./images/images/5.jpg" alt=""></a></li>
<li><a href=""><img src="./images/images/6.jpg" alt=""></a></li>
<li><a href=""><img src="./images/images/7.jpg" alt=""></a></li>
<!-- 移动到第七张图片的时候后面没有位置了,所以要将前三张图片复制到尾部,显示内容区域多大,就复制多少张图片 -->
<!-- 还得改变ul的宽度,否则图片会不在一行显示10*200=2000px -->
<li><a href=""><img src="./images/images/1.jpg" alt=""></a></li>
<li><a href=""><img src="./images/images/2.jpg" alt=""></a></li>
<li><a href=""><img src="./images/images/3.jpg" alt=""></a></li>
</ul>
</div>
</body>
</html>
....以上代码是本人练习作为博客记录，如有侵权请企业联系本人CSDN删除,以下为视频教程链接P52：
黑马程序员web前端进阶教程，前端html5+css3+移动端项目实战（含华为新闻，b站移动端等）_哔哩哔哩_bilibili
扫一扫
1169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
