uni小程序 跑马灯效果

写在前面

前几天帮一个朋友咋小程序上加一个类似于跑马灯的效果，本自己手写了一个。（代码和截图都在下方）

效果展示

代码展示

布局代码

主要就是图片css哪里加了一个“flex-shrink: 0;”，因为只是本地的一个功能，所以我就图片数据就写死了，需要的自己改数据结构，对于你来说应该不难。

 <view class="manhe">
        <view class="picture">
          <image src="../../static/images/pao/1.png" alt="" srcset="">
          <image src="../../static/images/pao/2.png" alt="" srcset="">
          <image src="../../static/images/pao/3.png" alt="" srcset="">
          <image src="../../static/images/pao/4.png" alt="" srcset="">
          <image src="../../static/images/pao/5.png" alt="" srcset="">
          <image src="../../static/images/pao/6.png" alt="" srcset="">
          <image src="../../static/images/pao/7.png" alt="" srcset="">
          <image src="../../static/images/pao/8.png" alt="" srcset="">
          <image src="../../static/images/pao/9.png" alt="" srcset="">
          <image src="../../static/images/pao/10.png" alt="" srcset="">
          <image src="../../static/images/pao/11.png" alt="" srcset="">
          <image src="../../static/images/pao/12.png" alt="" srcset="">
        </view>
 </view>

css代码 （其实主要就是用了动画）

.manhe {
  width: 560rpx;
  background: #fff;
  border: 10rpx solid #ff9933;
  border-radius: 6px;
  position: absolute;
  bottom: 196rpx;
  left: 50%;
  transform: translateX(-50%);

  .picture {
    width: 100%;
    padding: 10rpx;
    display: flex;
    // flex-wrap: nowrap;
    // justify-content: space-between;
    overflow: hidden;
    image {
      flex-shrink: 0;
      width: 100rpx;
      height: 80rpx;
      padding-right: 10rpx;
      animation: myfirst2 6s linear infinite;
    }

    image:hover {
      animation: myfirst2 5s linear infinite paused;
    }

    @keyframes myfirst2 {
      0% {
        transform: translateX(30px);
      }

      100% {
        transform: translateX(-70px);
      }
    }
  }
}

文章首发：本文链接：https://blog.csdn.net/qq_31888837/article/details/126459067