无限滚动练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无限滚动练习</title>
<style>
* {
margin: 0;
padding: 0;
}
/*ul不够宽浮动只能并排放两张图片,所以直接增加一个盒子套住ul*/
div {
width: 1000px;
height: 333px;
border: 1px solid #000;
margin: 100px auto;
/* 隐藏多余部分*/
overflow: hidden;
}
/*然后将盒子设置成需要展示的宽高,ul只要大于1200px即可*/
ul {
width: 3000px;
height: 333px;
background-color: black;
animation: move 10s linear 0s infinite normal;
}
@keyframes move {
from {
margin-left: 0;
}
to {
/*移动四张图片*/
margin-left: -2000px;
}
}
ul li {
list-style: none;
width: 500px;
height: 333px;
background-color: red;
border: 1px solid #000;
box-sizing: border-box;
float: left;
}
/*谁在动就停止谁的动画,这里是ul在动,而不是li*/
ul:hover {
animation-play-state: paused;
}
ul:hover li {
opacity: 0.5;
}
ul li:hover {
opacity: 1;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="images/179images/1.jpg" alt=""></li>
<li><img src="images/179images/2.jpg" alt=""></li>
<li><img src="images/179images/3.jpg" alt=""></li>
<li><img src="images/179images/4.jpg" alt=""></li>
<!-- 类比js中的无限滚动原理都是一样的,最后加上第一帧显示的图片,这样最后一次滚动,就是最开始图片再立刻跳转,就看不出跳转的效果-->
<li><img src="images/179images/1.jpg" alt=""></li>
<li><img src="images/179images/2.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
注意点:
1,无限滚动之前用js做了一个,这个是css做的比较起来,css3还是很友好啊,减少了不少js代码。
2.就是一个大的盒子作为显示框,ul作为旋转的内容,li里放上每张图片,div影藏溢出内容。
3。无限滚动的本质就是:在所有重复的图片最后再加上第一帧显示的图片,这样在最后一次滚动就是循环第一帧,再把整个ul瞬间恢复到left:0;看不出来间断感。
4.注意以下三段代码
ul:hover { animation-play-state: paused; } ul:hover li { opacity: 0.5; } ul li:hover { opacity: 1; }
当鼠标悬停时,整个ul动画停止。
当鼠标悬停时,所有li透明度为0.5可以看到ul背景颜色
当鼠标悬停在li上时,li的透明度变成1,最亮
看着代码相似,其实还是有很大的区别的。