zoukankan      html  css  js  c++  java
  • 站在巨人的肩膀上用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%); } }
  • 相关阅读:
    第一本书 第七章(课后题)
    java基础小测试
    随笔1
    随笔
    日记 晴 2017.7.30
    自我介绍
    与或非逻辑运算符 与或非位运算符
    日记1 天气阴 阵雨
    归并排序的两个版本实现代码
    Winedt打开tex文件报错error reading的解决方案
  • 原文地址:https://www.cnblogs.com/Koming/p/10419895.html
Copyright © 2011-2022 走看看