HTML中图片连续滚动
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML中图⽚连续滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
div{
margin: 100px auto;
width: 600px;
height: 200px;
border:1px solid black;
overflow: hidden;
}
ul{
width: 2000px;
height: 200px;
background: darkgray;
animation:change 10s linear 0s infinite normal; /*动画元素，持续时间，速度，延迟时间，重复次数，是否往返*/ }
ul:hover{
animation-play-state: paused;
}
ul:hover li{
opacity: 0.5; /*透明度，显⽰⽗元素颜⾊*/
}
ul li:hover{
opacity: 1;
}
ul li{
width: 300px;height: 200px;
list-style: none;
float: left;
border:1px solid black;
background-color: brown;
box-sizing: border-box;
}
@keyframes change{
from{margin-left: 0;}
to{margin-left:-1200px ;}
}
</style>
</head>
<body>
<div><ul>
<li><img src=""/>1</li>
<li><img src=""/>2</li>
<li><img src=""/>3</li>
<li><img src=""/>4</li>
<li><img src=""/>1</li>
<li><img src=""/>2</li>
</ul></div>
</body>
</html>
注：img标签中最后两个图⽚必须和第⼀，⼆相同，从⽽做到动画⽆缝衔接