纯css实现竖向公告栏无缝滚动

最新推荐文章于 2024-01-10 14:12:40 发布

big tail

最新推荐文章于 2024-01-10 14:12:40 发布

阅读量1.2k

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_37698249/article/details/120217173

版权

通过translateY来进行滚动，滚动距离为100%，±控制方向
如果出现卡顿，大部分原因是边距问题，下面给大盒子添加了padding-top，不要用margin

// html
<view class="bullet">
  <view class="bullet_inner">
    <view class="bullet_wrap">
      <view class="bullet_item" a:for="{{ list }}">{{ item }}</view>
    </view>
    <view class="bullet_wrap">
      <view class="bullet_item" a:for="{{ list }}">{{ item }}</view>
    </view>
  </view>
</view>

.bullet {
  position: fixed;
  top: 375rpx;
  left: 25rpx;
  width: 330rpx;
  height: 110rpx;
  .bullet_inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .bullet_wrap {
      padding-top: 8rpx;
      animation: roll 8s linear infinite;
      .bullet_item {
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
        font-size: 20rpx;
        color: #fff;
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.3) 50%,
          rgba(0, 0, 0, 0) 100%
        );
      }
      .bullet_item:not(:last-child) {
        margin-bottom: 8rpx;
      }
    }
  }
}

@keyframes roll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.swiper-item {
  display: block;
  height: 150px;
  margin: 10px;
}
.margin-t {
  margin-top: 24px;
}
.bc_red {
  background-color: red;
}
.bc_yellow {
  background-color: yellow;
}
.bc_blue {
  background-color: blue;
}