H5 中怎么用 CSS 渐变实现直播间弹幕飘过的淡入淡出背景光带-H5教程-PHP中文网

用css渐变实现弹幕光带效果的核心是结合linear-gradient与background-position动画及opacity过渡：1. 光带为4–8px宽水平渐变条，两端透明中间高亮；2. 通过lightsweep动画平移background-position模拟光随弹幕移动；3. 用::before伪元素叠加fadeinout opacity动画实现淡入淡出；4. 配合will-change、动态duration和css变量优化性能与适配性。

h5 中怎么用 css 渐变实现直播间弹幕飘过的淡入淡出背景光带

用 CSS 渐变实现弹幕飘过时的“背景光带”效果，核心是结合 background-image: linear-gradient 与 background-position 动画，再配合透明度变化模拟淡入淡出。关键不在渐变本身，而在于让渐变区域随弹幕移动，并在进入/离开视口时自然过渡。

1. 光带本质：一个窄而亮的渐变条

弹幕光带不是整条弹幕发光，而是像一道柔和的“光轨”贴着文字底部或顶部滑过。推荐用水平线性渐变，宽度控制在 4–8px，两端透明，中间高亮：

.danmaku-light {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 220, 100, 0.7) 50%,
    transparent 100%
  );
  background-size: 200px 6px; /* 宽度要足够长，避免重复感 */
  background-repeat: no-repeat;
}

2. 让光带“跟着弹幕走”：用 animation + background-position

通过动画平移 background-position，制造光从左向右（或反向）流动的错觉。注意动画时长需和弹幕滚动时间匹配（例如弹幕横穿屏幕需 8s，则光带动画也设为 8s）：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

@keyframes lightSweep {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
<p>.danmaku-light {
animation: lightSweep 8s linear infinite;
}</p>

说明：

起始位置设为负值（如 -200px），确保光带从屏幕外左侧进入；
background-size 的宽度（如 200px）应 ≥ 动画位移总距离，否则会露白或断续；
用 infinite 实现循环，但单条弹幕只需播一次？那就改用 forwards + JS 控制动画触发时机。

3. 淡入淡出：靠 opacity 动画叠加，而非渐变本身

渐变负责“光形”，透明度负责“呼吸感”。给弹幕容器加一层独立的光带元素（或伪元素），单独控制其 opacity 动画：

.danmaku {
  position: relative;
}
.danmaku::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background-image: linear-gradient(90deg, transparent, #ffdca0, transparent);
  background-size: 200px 6px;
  background-repeat: no-repeat;
  opacity: 0;
  animation: 
    lightSweep 8s linear,
    fadeInOut 8s ease-in-out;
}
@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 0.8; }
}

这样光带在弹幕刚出现时淡入，居中时最亮，快消失时淡出，视觉更自然。