点击刷新
怎样用css实现图片不间断滚动
效果图：
思路分析：
第一步，定义div>ul>li*7,因为有7张图片。
第二步，设置div的宽度高度以及li的浮动，保证它们全部在div内的同一行。
第三步，实现滚动。用到了动画相关知识点，即
animation: move 5s linear infinite;
@keyframes move{
from{
transform: translateX(0);
}
to{
transform: translateX(-882px);
}
}第四步，现在已经可以向左滚动了，但是问题是什么呢？“无缝”还没有实现，即向左滚动后原位置出现了空隙。解决办法就是复制相同的li内容添加在后面，为了避免出现两行，要把ul的宽度设置为200%。
（相关课程推荐：css视频教程）
第五步，最后一步，限制所有内容都在div内，所以添加overflow:hidden，大功告成。
完整源代码
<!DOCTYPE html>
<html>
<head>
<title>无缝滚动效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/
-webkit-animation: move 5s linear infinite;
-o-animation: move 5s linear infinite;
animation: move 5s linear infinite;
width:200%;
}
li{
float: left;
overflow: auto;
}
li img{
width: 126px;
}
div{
width:882px;
margin:100px auto;
border: 1px solid red;
overflow: hidden;
}
@keyframes move{
from{
transform: translateX(0);
}
to{
transform: translateX(-882px);
}
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="css3.jpg"></li>
<li><img src="css-4.jpg"></li>
<li><img src="css-5.jpg"></li>
<li><img src="hc1.jpg"></li>
<li><img src="html.jpg"></li>
<li><img src="css3.jpg"></li>
<li><img src="css-4.jpg"></li>
<li><img src="css3.jpg"></li>
<li><img src="css-4.jpg"></li>
<li><img src="css-5.jpg"></li>
<li><img src="hc1.jpg"></li>
<li><img src="html.jpg"></li>
<li><img src="css3.jpg"></li>
<li><img src="css-4.jpg"></li>
</ul>
</div>
</body>
</html>© 著作权归作者所有
举报
发表评论
0/200
