小编给大家分享一下纯css3如何实现横向无限滚动，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
wxml
装图片的盒子多复制一份，让循环图片的首尾相接
计算
安全
数据库
网络和加速
企业服务
<view class="scrollbox dis-flex">
<view class="imgItem dis-flex" style="animation: {{computedAni}};">
<image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
</view>
<view class="imgItem dis-flex" style="animation: {{computedAni}};">
<image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
</view>
</view>wxss
.dis-flex {
display: flex;
display: -webkit-flex;
}
.scrollbox {
margin: 30px;
text-align: center;
border: 1px solid blue;
height: 220rpx;
align-items: center;
overflow: hidden;
}
.imgItem {
animation: 24s rowup linear infinite normal;
}
.imgItem image {
width: 200rpx;
height: 200rpx;
margin: 0 20rpx;
}
@keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@-webkit-keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-1000px, 0, 0);
transform: translate3d(-1000px, 0, 0);
}
}js
调整速度的关键就在，动画的时间是由循环的项目个数动态控制的
Page({
data: {
images: new Array(4),
computedAni: ''
},
onLoad: function () {
this.setAniSpeed(this.data.images.length)
},
setAniSpeed (num) {
let time = Math.ceil(num / 5 * 15) // 这里是以5张图片的时候，动画时间15s为基准,可以自己调节
this.setData({
computedAni: `${time}s rowup linear infinite normal`
})
}
})以上是“纯css3如何实现横向无限滚动”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.jb51.net/css/751236.html
