CSS实现循环无缝滚动
最近看到微信阅读上面的本周推荐卡片的滚动动画效果，就想试试也实现一下。乍一看感觉只要做一下倾斜和移动的动画就可以了，其实主要的难点是如何做到无缝循环。
微信阅读效果
实现思路
倾斜
使用 transform: rotate() 即可
滚动
使用 css Animation
@keyframes move {
0% {
transform: translateX(...);
}
100% {
transform: translateX(...);
}
}无缝循环
这个是难点。首先需要明确的是，动画开始的画面和动画结束的画面应该是同一个画面，这样才能做到无缝循环。
为此，需要增加一些重复的元素在末尾，作为衔接下次循环的过渡。
两个要素
增加足够的重复元素在原队列的末尾，这些重复元素是开头的那几个。
计算一个完整队列走完的长度，这个长度就是一次循环画面偏移的距离。
实现代码
<div class="container">
<div class="wrap">
<ul class="list">
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/840/13378840/t3_13378840.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/294/229294/t3_229294.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/56/13254056/t3_13254056.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/148/415148/t3_415148.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/47/514047/t3_514047.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/693/13714693/t3_13714693.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/840/13378840/t3_13378840.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/294/229294/t3_229294.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/56/13254056/t3_13254056.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/148/415148/t3_415148.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/47/514047/t3_514047.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/693/13714693/t3_13714693.jpg">
</li>
</ul>
<ul class="list rev-list">
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/840/13378840/t3_13378840.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/294/229294/t3_229294.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/56/13254056/t3_13254056.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/148/415148/t3_415148.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/47/514047/t3_514047.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/693/13714693/t3_13714693.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/840/13378840/t3_13378840.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/294/229294/t3_229294.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/56/13254056/t3_13254056.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/148/415148/t3_415148.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/47/514047/t3_514047.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/693/13714693/t3_13714693.jpg">
</li>
</ul>
<ul class="list">
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/840/13378840/t3_13378840.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/294/229294/t3_229294.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/56/13254056/t3_13254056.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/148/415148/t3_415148.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/47/514047/t3_514047.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/693/13714693/t3_13714693.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/840/13378840/t3_13378840.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/294/229294/t3_229294.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/56/13254056/t3_13254056.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/148/415148/t3_415148.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/47/514047/t3_514047.jpg">
</li>
<li class="one-item">
<img src="http://wfqqreader.3g.qq.com/cover/693/13714693/t3_13714693.jpg">
</li>
</ul>
</div>
</div>
<style>
.container {
width: 280px;
height: 360px;
border-radius: 6px;
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}
.container .wrap {
position: relative;
top: -28px;
transform: rotate(-45deg);
}
.list {
list-style-type: none;
margin: 0;
padding-top: 15px;
padding-left: 0;
animation: 15s move infinite linear;
white-space: nowrap;
font-size: 0;
}
.list .one-item {
width: 80px;
height: 120px;
display: inline-block;
overflow: hidden;
padding-right: 15px;
}
.rev-list {
animation: 15s reverseMove infinite linear;
}
img {
width: 100%;
height: 100%;
}
@keyframes move {
0% {
transform: translateX(-100px);
}
100% {
transform: translateX(-670px);
}
}
@keyframes reverseMove {
0% {
transform: translateX(-670px);
}
100% {
transform: translateX(-100px);
}
}
</style>作者：小皮草
链接：https://juejin.cn/post/6844903704177410056
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
