站在巨人的肩膀上用css3做简单弹幕。-优快云博客

本文分享了一种使用CSS和JS实现弹幕效果的方法。通过固定定位和CSS3动画，配合JS动态计算宽度，实现了从屏幕外滑入再滑出的弹幕效果。详细解析了从代码实现到优化调整的过程。

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

网上copy了一份css做简单弹幕的代码

        .danmu {
            position: fixed;
            left: 0;
            visibility: hidden;
            -webkit-animation: danmu 5s linear 0s infinite;
            animation: danmu 5s linear 0s infinite;
        }

// js代码 
  let style = document.createElement('style');
  document.head.appendChild(style);
  let width = window.innerWidth;
  let from = `from { visibility: visible; -webkit-transform: translateX(${width}px); }`;
  let to = `to { visibility: visible; -webkit-transform: translateX(-100%); }`;
  style.sheet.insertRule(`@-webkit-keyframes danmu { ${from} ${to} }`, 0);

下面是我把js动态计算宽度改成css里用100vw宽度。

visibility: hidden; 没有执行css3动画时候，弹幕隐藏。left设置为0，css3动画才能正常执行，left：100%，设置这样动画会跳帧，目前不懂这个原理。

当把left: 100% ,还没有执行动画时候，弹幕元素已经在屏幕外了，css3动画出现在屏幕时，还没移动一个屏幕的宽度，动画就结束了。

        .danmu {
            position: fixed;
            left: 0;
            visibility: hidden;
            animation: danmu 5s linear 0s infinite;

        }

        @-webkit-keyframes danmu {
            from {
                visibility: visible;
                -webkit-transform: translateX(100vw);
                transform: translateX(100vw);
            }

            to {
                visibility: visible;
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }