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;  /*动画元素，持续时间，速度，延迟时间，重复次数，是否往返*/            }
html滚动效果代码
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标签中最后两个图⽚必须和第⼀，⼆相同，从⽽做到动画⽆缝衔接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。