站在巨人的肩膀上用css3做简单弹幕。

 网上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%);
            }
        }