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%); } }
  • 相关阅读:
    Python3.6中PyInstaller不能对文件进行打包问题
    itchat和matplotlib的结合使用爬取微信信息
    NumPy笔记
    Spyder在windows下常用快捷键
    React 省市区三级联动
    react-router 4.0中跳转失灵
    React+ajax+java 上传图片并预览
    CMDB与自动化运维,一切尽在掌握中?
    XSS跨站脚本攻击
    shell脚本?
  • 原文地址:https://www.cnblogs.com/Koming/p/10419895.html
Copyright © 2011-2022 走看看