html{ height: 100%; width: 100%}
    body{ background: #282B35; height: 100%; width: 100%; margin: 0; padding: 0;}
    .loginBox{ position: absolute; top: 16%; width:400px; left: 50%; margin-left: -200px;z-index:2;}
    .loginInput input{ display: block;margin-bottom: 10px; border-radius: 9px; height: 40px; border: none; width: 100%; text-indent: 20px; outline: none;font-size: 15px;}
    .loginInput a{ display: block;margin-bottom: 10px;  height: 40px; line-height: 40px; text-align: right; color:#fff; width: 100%;font-size: 15px;}
    .loginInput button{ display: block;margin-bottom: 10px; border-radius: 9px; height: 40px; border: none; width: 100%; color: #fff; outline: none;font-size: 15px; cursor: pointer;}
    .loginInput .btn-login{ background: #E84034;}
    .loginInput .btn-login:hover{ background: #D03429;}
    .loginInput .btn-sign{ background: #3FB55F;}
    .loginInput .btn-sign:hover{ background: #31a851;}
    .loginLogo{text-align: center; margin-bottom: 50px;}
    .sportType{ height: 100%; width: 100%; position: relative;z-index: 1; overflow: hidden;}
    .sportType div{ position: absolute; width: 12%;}
    .sportType div span{ color: #fff; position: absolute; top:50px; border: 1px solid #ffffff20;padding: 10px; border-radius: 9px; font-size: 14px; display: none;}
    /*乒乓球*/
    .pingpong{ left:10%; top:15%; animation: pp 10s linear infinite alternate;}
    .pingpong .ppp{ position: absolute; top:0;left: 0; opacity: 1;}
    .pingpong .ppq{ position: absolute; top:-10px; left: 0; opacity: 1;}
    @keyframes pp {
        from{left:10%; top:15%;}
        to{left:20%; top:0%;}
    }
    .pingpong:hover .ppp{animation: pppimg 0.5s linear infinite;}
    @keyframes pppimg {
        0%{left:0px;}
        30%{left:-5px;}
        60%{left:10px;}
        100%{left:0px;}
    }
    .pingpong:hover .ppq{animation: ppqimg 0.5s linear infinite;}
    @keyframes ppqimg {
        0%{left:0px;}
        30%{left:30px;}
        60%{left:-20px;}
        100%{left:0px;}
    }
    /*篮球*/
    .basketball{ left:10%; top:80%; animation: lq 10s linear infinite alternate;}
    @keyframes lq {
        from{left:10%; top:60%;}
        to{left:5%; top:20%;}
    }
    .basketball img:hover{animation: lqimg 1s linear infinite;}
    @keyframes lqimg {
        from{transform:rotate(0deg);}
        to{transform:rotate(360deg);}
    }
    /*奖杯*/
    .trophy{ left:20%; top:35%; animation: tp 10s linear infinite alternate;}
    @keyframes tp {
        from{left:20%; top:35%;}
        to{left:25%; top:25%;}
    }
    /*棒球*/
    .baseball{ left:30%; top:70%; animation: bq 10s linear infinite alternate;}
    .baseball .bqq{ position: absolute; top: 0; left: -10px; }
    .baseball .bqp{position: absolute; top: 0; }
    @keyframes bq {
        from{left:30%; top:70%;}
        to{left:20%; top:60%;}
    }
    .baseball:hover .bqp{animation: bqpimg 3s infinite;}
    @keyframes bqpimg {
        0%{transform:rotate(0deg);}
        10%{transform:rotate(-30deg);}
        13%{transform:rotate(30deg);}
        16%{transform:rotate(0deg);}
        100%{transform:rotate(0deg);}
    }
    .baseball:hover .bqq{animation: bqqimg 3s linear infinite;}
    @keyframes bqqimg {
        0%{left:-10px;top:0px;}
        11.5%{left: -10px;top:0px;}
        16%{ left: 80px; top: -75px;}
        100%{left:-10px; top:0px;}
    }
    /*橄榄球*/
    .rugby{ left:80%; top:70%; animation: gl 10s linear infinite alternate;}
    @keyframes gl {
        from{left:80%; top:70%;}
        to{left:85%; top:50%;}
    }
    .rugby img:hover{animation: glimg 0.3s linear infinite;}
    @keyframes glimg {
        0%{transform:rotate(0deg);}
        25%{transform:rotate(15deg);}
        50%{transform:rotate(0deg);}
        75%{transform:rotate(-15deg);}
        100%{transform:rotate(0deg);}
    }
    /*羽毛球*/
    .badminton{ left:45%; top:70%; animation: ym 10s linear infinite alternate;}
    @keyframes ym {
        from{left:45%; top:70%;}
        to{left:50%; top:55%;}
    }
    .badminton img:hover{animation: ymimg 2s linear infinite;}
    @keyframes ymimg {
        0%{transform:translate(0px,0px);}
        10%{transform:translate(0px,-30px);}
        20%{transform:translate(0px,0px);}
        30%{transform:translate(0px,-30px);}
        40%{transform:translate(0px,0px);}
        70%{transform:rotate(60deg);}
        100%{transform:rotate(0deg);}
    }
    /*网球*/
    .tennis{ left:60%; top:70%; animation: wq 10s linear infinite alternate;}
    @keyframes wq {
        from{left:60%; top:70%;}
        to{left:70%; top:50%;}
    }
    /*足球*/
    .football{ left:75%; top:40%; animation: zq 10s linear infinite alternate;}
    @keyframes zq {
        from{left:75%; top:40%;}
        to{left:60%; top:20%;}
    }
    .football img:hover{animation: zqimg 1s linear infinite;}
    @keyframes zqimg {
        from{transform:rotate(0deg);}
        to{transform:rotate(360deg);}
    }
    /*游泳*/
    .swimming{ left:60%; top:20%; animation: yy 10s linear infinite alternate;}
    @keyframes yy{
        from{left:60%; top:20%;}
        to{left:80%; top:0%;}
    }
    .swimming img:hover{animation: yyimg 1s linear infinite;}
    @keyframes yyimg {
        0%{transform:scale(1,1);}
        50%{transform:scale(1.2,0.8);}
        100%{transform:scale(1,1);}
    }
    .sportType div img{width: 100%; opacity:1}
    canvas {position: absolute;top: 0;left: 0;background-color: #282B35;}
    .dg.ac{display: none;}