uni小程序 跑马灯效果

写在前面

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

效果展示

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

版权声明:懒人收藏夹 发表于 2022年8月25日 am11:15。
转载请注明:uni小程序 跑马灯效果 | 懒人导航网

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...
联系站长