微信小程序纯CSS实现无限弹幕滚动效果

下面从头开始讲解微信小程序纯CSS实现无限弹幕滚动效果的攻略。

1. 明确需要实现的效果

为了实现无限弹幕滚动效果，我们需要让弹幕以一定的速度不断地从右侧进入屏幕，并且不停地向左滚动，当弹幕滚出左侧屏幕后，又会从右侧进入屏幕，形成一个无限循环。

2. 设置弹幕外层容器

我们可以先设置一个外层容器 .barrage-container，用来包含所有的弹幕，如下代码所示：

<view class="barrage-container"></view>

3. 设置单个弹幕

每个弹幕都包含一个弹幕内容和一些样式属性，我们可以使用 text 标签来实现弹幕的内容，并设置 .barrage-item 类来包含其他的样式属性，如下代码所示：

<text class="barrage-item">我是一个弹幕</text>

4. 设置弹幕动画

为了实现弹幕的滚动效果，我们需要设置动画属性，可以通过 animation CSS 属性来实现。首先我们需要设置弹幕向右移动的动画：

.barrage-item {
  animation: move-right 4s linear;
}

@keyframes move-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

上述代码设置 .barrage-item 元素的动画为 move-right，时长为 4s，动画方式为线性。然后在 @keyframes 中设置了两帧，初始状态（0%）将弹幕向右移动100%，终止状态（100%）将弹幕恢复原位。

接着我们需要设置弹幕的无限循环，在动画终止时再次将弹幕移动到右侧：

@keyframes move-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

上述代码增加了一帧，将弹幕移动到屏幕左侧。

5. 设置弹幕样式

设置弹幕外观样式，如字体大小、颜色、背景色、边框等等。

.barrage-item {
  animation: move-right 4s linear infinite;
  position: absolute;
  white-space: nowrap;
  font-size: 32rpx;
  color: #fff;
  background-color: #000;
  border-radius: 16rpx;
  padding: 6rpx 16rpx;
}

上述代码设置弹幕以绝对定位的方式进行布局，并设置了一些常用的文本格式样式，如字体大小、颜色、背景色和圆角等。

6. 示例

下面是设置了一个黑底白字的弹幕滚动效果的示例代码：

<view class="barrage-container">
  <text class="barrage-item">我是一个弹幕</text>
  <text class="barrage-item">我也是一个弹幕</text>
  <text class="barrage-item">我是纯 CSS 实现的弹幕</text>
</view>

.barrage-container {
  position: relative;
  height: 200rpx;
  background-color: #000;
}

.barrage-item {
  animation: move-right 4s linear infinite;
  position: absolute;
  white-space: nowrap;
  font-size: 32rpx;
  color: #fff;
  background-color: #000;
  border-radius: 16rpx;
  padding: 6rpx 16rpx;
}

@keyframes move-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

接下来你可以根据自己的需求，自由扩展和修改弹幕的样式和动画效果。