在此之前，使用轮播插件来实现效果的，而且轮播要求每个内容的长度一样
用css实现迅速移动，如下图；加粗部分为终于代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>我们</title>
<style type="text/css">
.more{
width: 375px;
overflow-x: scroll; //横轴移动
scrollbar-width: none;
-ms-overflow-style: none;
}
.more::-webkit-scrollbar{
display: none; //去掉进度条
}
ul{
animation: gundong 6s linear infinite; //动画
white-space: nowrap; //超出不换行
}
li{
border-radius: 4px;
border: solid 1px #ff9822;
font-size: 12px;
color: #c77d28;
display: inline-block;
padding: 4px 12px;
margin-right: 8px;
}
@keyframes gundong {
0%{
margin-left: 0;
}
100%{
margin-left: -100%; //移动到最后，不用算内容的长度
}
}
</style>
</head>
<body>
<div class="more">
<ul>
<li>未发现失信被执行记录</li>
<li>未发现经营异常记录</li>
<li>未发现严重违法记录</li>
<li>未发现重大负面舆情</li>
<li>未发现行政处罚记录</li>
</ul>
</div>
</body>
</html>
网友评论