zoukankan      html  css  js  c++  java
  • css3动画实现伪弹幕效果

    如图所示:

      

     效果还可以直接用麦唱APP把一首歌分享到微信里面看到,方法类似全民K歌的方法,都是用css3动画实现的,

      代码如下:(这是我做真实效果前的一个dome) 直接粘代码就可以看到效果,里面有两个js,一个是jq一个是rem适配的js,之前博客里面有这个适配的js

        

    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/sy.js" type="text/javascript" charset="utf-8"></script>
    <title>Document</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      html,body{
         100%;
        height: 100%;
      }
      #Barrage{
         100%;
        height: 28.2rem;
        background-color: bisque;
        overflow: hidden;
        position: relative;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        -ms-perspective: 1000;
        perspective: 1000;
      }
      .danmuobj1{
        -webkit-animation:move 2s ease-in-out 1;
        animation:move 2s ease-in-out 1;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-delay: 3000ms;
        animation-delay: 3000ms;

      }
      .danmuobj2{
        -webkit-animation:move 6s linear 1;
        animation:move 6s linear 1;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-delay: 1000ms;
        animation-delay: 1000ms;

      }
      .danmuobj3{
        -webkit-animation:move 9s linear 1;
        animation:move 9s linear 1;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-delay: 1000ms;
        animation-delay: 1000ms;

      }
      .danmuobj4{
        -webkit-animation:move 15s linear 1;
        animation:move 15s linear 1;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-delay: 800ms;
        animation-delay: 800ms;

      }
      .danmuobj5{
        -webkit-animation:move 3s linear 1;
        animation:move 3s linear 1;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-delay: 1200ms;
        animation-delay: 1200ms;

      }
      @-webkit-keyframes move{
        0%{
          -webkit-transform: translate3d(0px,0,0);
          transform: translate3d(0px,0,0);
        }
        100%{
          -webkit-transform: translate3d(-1124px,0,0);
          transform: translate3d(-1124px,0,0);
        }
      }

      #open{
         5.0em;
        height: 5.0em;
        line-height: 5.0rem;
        /*background-color: blue;*/
      }
      #close{
         5.0em;
        height: 5.0em;
        line-height: 5.0rem;
        /*background-color: black;*/
      }
    </style>
    </head>

    <body>
      <div id="Barrage">


      </div>
      <div id="open">
        打开弹幕
      </div>
      <div id="close">
        关闭弹幕
      </div>
    </body>
    <script type="text/javascript">
      var jj = 0;
      var arr = ["还不必多说", "孟大妈排名都平等的", "难道是哪都撒", "dsajdjksajd", "孟大妈排名都平等的", "孟大妈排名都平等的","还不必多说", "孟大妈排名都平等的", "难道是哪都撒大家别惦记拜见大圣", "dsajdjksajd", "孟大妈排名都平等的", "难道你三大块脑袋里看到拉萨离队抹上了房门时可免费"]
      var srr = ["danmuobj1","danmuobj2","danmuobj3","danmuobj4","danmuobj5"]
      function danmuopen(){
        var num = 0;
        var opentimer = setInterval(function(){
        if (num > 12) {
          num = 0;
      }
      var danmuobj = $('<p style="font-size: 1.0rem;z-index: 10;overflow: hidden; padding:0.2rem 1.0rem; border-radius: 1.0rem;white-space: nowrap;   color:#ffffff;background:rgba(49,58,65,0.3); max-10rem ;text-overflow: ellipsis;">' + arr[num] + '</p>');
      // danmuobj.addClass("danmuobj");
      danmuobj.css({
        "position":"absolute",
        "right":"-400px",
        "top":rand(5,24)+"rem"
        })
        $("#Barrage").append(danmuobj);
          danmuobj.addClass(srr[rand(0,4)]);
          num++;
        },1000)
      }

      danmuopen();


      setInterval(function() {
        var lis = $("#Barrage>p")
        if(lis.length > 30) {
          $("#Barrage p:eq(1)").remove();
        }
      }, 20)

      $("#open").on("click",function(){
        $("#Barrage").show();
      })

      $("#close").on("click",function(){
        $("#Barrage").empty();
        $("#Barrage").hide();
      })
    </script>
    </html>

        

  • 相关阅读:
    CS224N Assignment 1扩展阅读——词嵌入
    算法面经总结
    Leetcode刷题笔记(一)
    使用python-Statsmodels进行基于统计学的时间序列分析
    chinaunix book
    行政区划分
    视频网站
    sqlserver还原bak备份文件
    linux给终端设置代理
    ruby中exec,system,%x的区别
  • 原文地址:https://www.cnblogs.com/lijuntao/p/7063525.html
Copyright © 2011-2022 走看看