纯css写滚动的弹幕特效

最新推荐文章于 2025-02-12 02:12:51 发布

冰晨之露

最新推荐文章于 2025-02-12 02:12:51 发布

阅读量697

点赞数 1

文章标签： css 动画前端 css3 javascript

本文链接：https://blog.youkuaiyun.com/lll19960406/article/details/128638730

版权

文章讲述了在开发一个春节活动中，为了解决中奖用户列表一秒一动的卡顿问题，作者从原本使用的定位方法转而采用CSS动画来实现更流畅的弹幕滚动效果。通过设置`@keyframes`和相对定位，实现了平滑的滚动动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在写一个春节活动，里面有一个类似拼多多展示中奖用户的弹幕滚动。

后台给了随机滚动将近一百条数据，之前写过一版，是使用定位，将数据顶上去，但是一秒一动的效果略略有些卡顿。后来决定使用css动画来实现

先来上代码吧

<view class="chat">
      <view class="chatInfo"  v-for="(item,i) in chatArr" :key='i'>
               <view class="chatItem">{{item}}</view><br>
      </view>
</view>

css代码

.chatInfo{
    position: relative;
    top: 0;
    animation: rowScrollTest 200s linear infinite;
}
@keyframes rowScrollTest {
  0% {
    top: 0;
  }
  100% {
      top:-3960rpx;//高度是我自己计算的，因为展示的内容不重要，高度就随意了一些；
   }
}

　　效果如图