纯css3如何实现横向无限滚动

小编给大家分享一下纯css3如何实现横向无限滚动，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

wxml

装图片的盒子多复制一份，让循环图片的首尾相接

<view class="scrollbox dis-flex">    <view class="imgItem dis-flex" style="animation: {{computedAni}};">      <image class="lazy" data-src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>    </view>    <view class="imgItem dis-flex" style="animation: {{computedAni}};">      <image class="lazy" data-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如何实现横向无限滚动”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！