div+css实现逼真天气预报动画卡片翻转效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：div+css实现逼真天气预报动画卡片翻转效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>
  
<style>
body{
        margin:0;
        color:#444;
        background-color:#333366;
        font:300 14px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

@font-face{
        font-family:'iconvault';
        src:url(data:application/font-woff;charset=utf-8;base64,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) format('woff');
        font-weight:normal;
        font-style:normal;
}
[class^="icon-"],
[class*=" icon-"]{
        font-family:'iconvault';
        font-style:normal;
        font-weight:normal;
        text-decoration:inherit;
        -webkit-font-smoothing:antialiased;
 }
.basecloud:before,
.windyraincloud:before,
.windysnowcloud:before,
.basethundercloud:before{font-family:'iconvault';font-style:normal;position:absolute;color:#ccc}
.basecloud:before{content:'\f105'}
.windyraincloud:before{content:'\f111'}
.windysnowcloud:before{content:'\f109'}
.basethundercloud:before{content:'\f105'}

.icon-thunder:before{content:'\f114';position:absolute;color:#ffa500}
.icon-sunny:after{content:'\f101';color:#ffa500;position:absolute}
.icon-drizzle:before{content:'\f10a';color: #82b2e4;position:absolute}
.icon-hail:before{content:'\f10f';position:absolute;color:#ccc}
.icon-showers:before{content:'\f104';position:absolute;color:#82b2e4}
.icon-rainy:before{content:'\f107';position:absolute;color:#4681c3}
.icon-snowy:before{content:'\f10b';position:absolute;color:#acd3f3}
.icon-frosty:before{content:'\f102';position:absolute;color:#85d8f7}
.icon-windy:before{content:'\f115';position:absolute;color:#ccc}
.icon-windyrain:before{content:'\f10e';position:absolute;color:#acd3f3}
.icon-windysnow:before{content:'\f103';position:absolute;color:#acd3f3}
.icon-sleet:before{content:'\f10c';position:absolute;color:#acd3f3}
.icon-moon:after{content:'\f10d';color:#ffa500;position:absolute}
.icon-night:after{content:'\f100';position:absolute;color:#ffa500}
.icon-sun::after{content:'\f113';color:#ffa500;position:absolute}
.icon-cloud:after{content:'\f106';color:#ccc;position:absolute}
.icon-sunrise:before{content:'\f112';color:#ffa500;position:absolute}
.icon-sunset:before{content:'\f110';color:#f96f23;position:absolute}
.icon-mist:before{content:'\f108';color:#ccc;position:absolute}

.box-inner:after,
.box-base:before,
.box-base:after,
.cloud:before,
.cloud:after,
.cloud .dtl:before,
.cloud .dtl:after,
.statue .hair:before,
.statue .hair:after,
.statue .crown .arrow:before,
.statue .crown .arrow:after,
.statue .body:before,
.statue .body:after,
.statue .hand:before,
.statue .hand:after,
.statue .torch-glow:before,
.statue .torch-glow:after,
.statue .torch:before,
.statue .torch:after,
.statue .cloth:before,
.statue .cloth:after,
.statue .cloth-wrap:before,
.statue .cloth-wrap:after,
.statue .base .top:before,
.statue .base .top:after,
.toggle-switch .tgl-btn:after,
.toggle-switch .dtl-icon>i:before,
.toggle-switch .dtl-icon>i:after
{
        content:'';
        position:absolute;
}
.statue,
.statue .head,
.statue .hair,
.statue .crown .arrow,
.statue .torch,
.statue .body,
.statue .cloth,
.statue .base .bar,
.statue .base .top,
.statue .cloth-wrap,
.toggle-switch .dtl-icon>i{
        margin:auto;
        position:relative;
}

.box-wrap{
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:-1;
        position:fixed;
        background-color:#333366;
        background:linear-gradient(to bottom,#333366 0, #000 100%);
}
.box,
.box-base,
.box-inner,
.box .flip{max-width:600px;max-height:350px;width:100%;height:100%}
.box-inner{margin:auto;position:relative}
.box-inner:after{
        width:100%;
        height:5px;
        bottom:-56px;
        background:#444;
        transform:scaleX(1.41);
}
.box{
        margin:auto;
        margin-top:80px;
        perspective:600px;
}
.box-base{
        z-index:1;
        bottom:-320px;
        position:absolute;
        background-color:#333;
        transform:rotateX(90deg) translateZ(160px);
}
.box .flip{
        position:absolute;
        transform-style:preserve-3d;
        -webkit-backface-visibility:hidden;
                backface-visibility:hidden;
        transition:all .8s cubic-bezier(1,1.55,.2,.8);
}
.box .flip.front{
        z-index:1;
}
.box .flip.back{
        color:#66cccd;
        background:#333;
        transform:rotateX(-90deg) translateZ(160px);
}
.toggle{
        opacity:0;
        z-index:999;
        visibility:hidden;
        position:absolute;
}
.toggle:checked ~ .box-inner .flip.front{
        z-index:-1;
        opacity:0;
        transform:rotateX(90deg) translateZ(160px);
}
.toggle:checked ~ .box-inner .flip.back{
        transform:rotateX(0deg);
}
.toggle:checked ~ .box-inner .box:after{z-index:-1}

.city{
        width:100%;
        bottom:40px;
        position:absolute;
}
.clouds,
.cloud,
.cloud .dtl{
        position:absolute;
}
.clouds{
        z-index:-1;
        width:inherit;
}
.cloud{
        width:75px;
        height:15px;
        border-radius:15px;
        background-color:#4b5d8b;
        -webkit-animation:move-cloud 10s linear infinite;
                animation:move-cloud 10s linear infinite;
}
.cloud .dtl{
        bottom:0;
        left:-4px;
        width:24px;
        height:24px;
        border-radius:50%;
        background-color:inherit;
}
.cloud .dtl:before{
        top:-4px;
        left:22px;
        width:14px;
        height:20px;
        border-radius:12px;
        background-color:inherit;
}
.cloud .dtl:after{
        left:34px;
        width:34px;
        bottom:2px;
        height:34px;
        border-radius:50%;
        background-color:inherit;
}
.cloud.cloud-1{
        top:15px;
        left:80px;
        animation-dealy:.2s;
}
.cloud.cloud-2{
        top:-25px;
        right:200px;
        background-color:#333366;
        animation-dealy:.4s;
        -webkit-animation-duration:13s;
                animation-duration:13s;
}
.cloud.cloud-3{
        top:40px;
        width:55px;
        right:240px;
        background-color:#2c2c54;
        animation-dealy:.6s;
        -webkit-animation-duration:15s;
                animation-duration:15s;
}
.cloud.cloud-3 .dtl{
        width:18px;
        height:18px;
}
.cloud.cloud-3 .dtl:before{
        top:-12px;
        left:14px;
        width:28px;
        height:28px;
        border-radius:50%;
        background-color:inherit;
}
.cloud.cloud-3 .dtl:after{
        bottom:0;
        left:38px;
        width:24px;
        height:24px;
}
@-webkit-keyframes move-cloud{
        0%,100%{transform:translateX(100px)}
        50%{transform:translateX(-50px)}
}
@keyframes move-cloud{
        0%,100%{transform:translateX(100px)}
        50%{transform:translateX(-50px)}
}

.statue{
        left:-70px;
}
.statue .head{
        z-index:2;
        width:18px;
        height:22px;
        margin-bottom:4px;
        background-color:#66cccd;
        border-top-left-radius:12px;
        border-top-right-radius:12px;
        border-bottom-left-radius:12px 22px;
        border-bottom-right-radius:12px 22px;
    box-shadow:0 2px 4px rgba(0,0,0,.38);
}
.statue .hair{
        width:inherit;
        height:inherit;
        overflow:hidden;
        border-radius:inherit;
        border-top:2px solid #006f75;
}
.statue .hair:before,
.statue .hair:after{
        top:-8px;
        width:16px;
        height:16px;
        border-radius:50%;
        background-color:#389699;
}
.statue .hair:before{left:-7px}
.statue .hair:after{right:-5px}

.statue .crown{
        width:inherit;
        height:inherit;
        position:absolute;
}
.statue .crown .arrow,
.statue .crown .arrow:before,
.statue .crown .arrow:after{
        width:0;
        height:0;
        position:absolute;
        border:2px solid transparent;
        border-bottom:16px solid #66cccd;
}
.statue .crown .arrow.arrow-1{top:-7px;left:-8px;transform:rotate(-70deg)}
.statue .crown .arrow.arrow-1:before{top:1px;left:-8px;transform:rotate(-18deg)}
.statue .crown .arrow.arrow-1:after{right:-9px;transform:rotate(25deg)}

.statue .crown .arrow.arrow-2{top:-17px;left:50%;margin-left:-2px}
.statue .crown .arrow.arrow-2:before,
.statue .crown .arrow.arrow-2:after{display:none}

.statue .crown .arrow.arrow-3{top:-7px;right:-8px;transform:rotate(70deg)}
.statue .crown .arrow.arrow-3:before{top:1px;right:-8px;transform:rotate(18deg)}
.statue .crown .arrow.arrow-3:after{left:-9px;transform:rotate(-25deg)}

.statue .body{
        width:30px;
        height:90px;
        margin:auto;
        background-color:#66cccd;
        border-top-right-radius:4px;
}
.statue .body:before,
.statue .body:after{
        width:0;
        bottom:0;
        height:0;
        border:4px solid transparent;
}
.statue .body:before{
        left:-3px;
        border-bottom:18px solid #66cccd;
}
.statue .body:after{
        right:-3px;
        border-bottom:24px solid #66cccd;
}
.statue .hands{
        width:inherit;
        height:inherit;
        position:absolute;
}
.statue .hand{position:absolute}
.statue .hand.left{
        top:-45px;
        width:30px;
        left:-16px;
        height:52px;
        border:7px solid #66cccd;
        border-top:none;
        border-right:none;
        border-bottom-left-radius:35px 45px;
        border-top-left-radius:5px 30px;
}
.statue .hand.left:before{
        top:-4px;
        z-index:1;
        left:-8px;
        width:10px;
        height:14px;
        box-shadow:0 0 2px;
        background-color:#66cccd;
        border-top-left-radius:4px 4px;
        border-top-right-radius:4px 4px;
        border-bottom-left-radius:5px 8px;
        border-bottom-right-radius:5px 8px;
}
.statue .hand.left:after{
    left:-4px;
        z-index:1;
        width:18px;
    bottom:-5px;
        height:14px;
        background-color:#66cccd;
    transform:rotate(30deg);
}
.statue .hand.right{
    top:4px;
    z-index:2;
        width:15px;
    right:-12px;
        height:40px;
        background-color:#4b9296;
    transform:rotate(35deg);
}
.statue .hand.right:after{
    top:12px;
    left:10px;
        width:9px;
        height:13px;
        background-color:#66cccd;
    border-top-left-radius:4px 4px;
    border-top-right-radius:4px 4px;
    border-bottom-right-radius:5px 8px;
}
.statue .torch-glow,
.statue .torch{
        position:absolute;
}
.statue .torch-glow{
        top:-50px;
        left:-38px;
        width:72px;
        height:72px;
}
.statue .torch-glow:before,
.statue .torch-glow:after{
        z-index:-1;
        width:inherit;
        height:inherit;
        border-radius:50%;
        -webkit-animation:torch-glow 2s linear infinite;
                animation:torch-glow 2s linear infinite;
}
.statue .torch-glow:before{
        color:rgb(73,70,81);
        background-color:rgba(73,70,81,.75);
        background:radial-gradient(#444 0,rgba(68,68,68,.15) 100%);
}
.statue .torch-glow:after{
        top:50%;
        left:50%;
        width:48px;
        height:48px;
        margin-top:-24px;
        margin-left:-24px;
        color:rgb(99,84,63);
        background-color:rgba(99,84,63,.75);
        background:radial-gradient(#996633 0,rgba(68,68,68,.15) 100%);
}
@-webkit-keyframes torch-glow{
        0%,100%{
                box-shadow:0 0 20px;
                transform:scale(1);
        }
        50%{
                box-shadow:none;
                transform:scale(1.1);
        }
}
@keyframes torch-glow{
        0%,100%{
                box-shadow:0 0 20px;
                transform:scale(1);
        }
        50%{
                box-shadow:none;
                transform:scale(1.1);
        }
}
.statue .torch{
        top:-8px;
        left:-5px;
        width:4px;
        height:22px;
        background-color:#4b9296;
        border-radius:0 0 4px 4px;
}
.statue .torch:after{
        top:-5px;
        left:50%;
        width:10px;
        height:5px;
        margin-left:-5px;
        background-color:#4b9296;
        border-radius:0 0 4px 4px;
}
.statue .torch .flame{
        left:-1px;
    top:-14px;
        width:8px;
        height:8px;
        position:absolute;
    border-top-right-radius:8px 12px;
    border-bottom-left-radius:12px 8px;
        background-color:#ff9642;
        background:linear-gradient(to bottom,#face3a -4px,#ff9642 100%);
        transform:rotate(60deg);
}

.statue .cloth-wrap{height:100%}
.statue .cloth-wrap:before,
.statue .cloth-wrap:after{
        background-color:#66cccd;
}
.statue .cloth-wrap:before{
        left:2px;
        top:-11px;
        width:20px;
        height:32px;
        background-color:#66cccd;
        transform:rotate(-80deg);
}
.statue .cloth-wrap:after{
        right:-4px;
        width:20px;
        height:20px;
        background-color:#66cccd;
        transform:rotate(-28deg);
        border-top-right-radius:4px;
}
.statue .cloth{
        width:100%;
        height:100%;
        position:absolute;
}
.statue .cloth:before,
.statue .cloth:after{
        width:0;
        height:0;
        z-index:1;
}
.statue .cloth.cloth-1:before{
        top:-8px;
        left:-5px;
        width:4px;
        height:14px;
        background-color:#46aab3;
        transform:rotate(32deg);
}
.statue .cloth.cloth-1:after{
        top:2px;
        left:-10px;
        border-radius:1px;
        border:8px solid #66cccd;
        border-right:14px solid transparent;
        border-bottom:0 solid transparent;
        transform:rotate(-70deg) skew(-30deg);
}
.statue .cloth.cloth-2:before{
    top:-2px;
    left:-2px;
        width:12px;
        z-index:0;
        height:20px;
        background-color:#46aab3;
    transform:rotate(-18deg);
}
.statue .cloth.cloth-2:after{
        left:2px;
        width:15px;
        height:35px;
        background-color:#66cccd;
        border-bottom-left-radius:3px 12px;
        transform:rotate(58deg) skewX(18deg);
}
.statue .cloth.cloth-3:before{
        top:24px;
        left:-10px;
        border-radius:1px;
        border:8px solid #46aab3;
        border-right:32px solid transparent;
        border-bottom:3px solid transparent;
        transform:rotate(-52deg) skew(-28deg);
}
.statue .cloth.cloth-3:after{
        top:30px;
        left:8px;
        width:3px;
        height:35px;
        background:#46aab3;
        border-top-left-radius:3px 35px;
        border-bottom-right-radius:3px 35px;
        transform:rotate(15deg);
}
.statue .cloth.cloth-4:before{
        top:20px;
        left:11px;
        border-radius:1px;
        border:7px solid #46aab3;
        border-left:2px solid transparent;
        border-top:7px solid transparent;
        border-bottom:42px solid transparent;
        transform:rotate(-14deg) skewX(-26deg);
}
.statue .cloth.cloth-4:after{
        left:3px;
        z-index:2;
        width:15px;
        bottom:14px;
        height:10px;
        background-color:#66cccd;
        transform:rotate(-33deg) skewX(20deg);
}
.statue .cloth.cloth-5{overflow:hidden}
.statue .cloth.cloth-5:before{
        width:24px;
        height:30px;
        bottom:1px;
        right:-5px;
        background-color:#46aab3;
        transform:rotate(60deg);
        background:linear-gradient(136deg,#46aab3 0,transparent 100%);
}
.statue .cloth.cloth-6:before{
        right:2px;
        border:10px solid transparent;
        border-top:4px solid #46aab3;
        border-right:4px solid #46aab3;
        border-top-right-radius:4px;
}
.statue .cloth.cloth-6:after{
        width:4px;
        right:-2px;
        height:30px;
        bottom:20px;
        background-color:#46aab3;
        border-bottom-right-radius:4px 5px;
        transform:rotate(-4deg);
}

.statue .base .top{
        width:45px;
        height:45px;
        background:linear-gradient(to bottom,#38999d 0, #3f6564 100%);
}
.statue .base .top:before,
.statue .base .top:after{
        left:50%;
        background-color:#66cccd;
}
.statue .base .top:before{height:4px;width:50px;margin-left:-25px}
.statue .base .top:after{top:10px;height:6px;width:54px;margin-left:-27px}
.statue .base .bar.mid,
.statue .base .bar.bot{
        width:66px;
        height:8px;
        background-color:#3f6564;
}
.statue .base .bar.bot{
        width:100px;
}
.rain{
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:1;
        width:100%;
        height:100%;
        /*display:none;*/
        overflow:hidden;
        position:absolute;
        -webkit-animation:blnk 6s linear infinite;
                animation:blnk 6s linear infinite;
}
.rain i{
        width:1px;
        height:30px;
        bottom:200px;
        position:absolute;
        background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 100%);
        -webkit-animation:fall .63s linear infinite;
                animation:fall .63s linear infinite;
}
@-webkit-keyframes fall{ to{margin-top:900px} }
@keyframes fall{ to{margin-top:900px} }
@-webkit-keyframes blnk{ 0%,95%,98%{background-color:transparent}96%,99%,100%{background-color:#fff} }
@keyframes blnk{ 0%,95%,98%{background-color:transparent}96%,99%,100%{background-color:#fff} }
.toggle:checked ~ .rain{
        z-index:-1;
}

.text-gradient{color:#33ffcc;background:-webkit-linear-gradient(left,#33ffcc 0,#33ffff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.general-info{
        right:0;
        bottom:0;
        min-width:180px;
        min-height:200px;
        position:absolute;
        transform:translateX(0);
        transition:all .4s ease-in-out 0s;
}
.general-info .measure{
        font-size:36px;
        line-height:36px;
        font-weight:400;
}
.general-info .status,
.general-info .current-date{font-size:13px;font-weight:400}
.general-info .city-name{font-size:24px;margin-top:15px}
.toggle:checked ~ .box-inner .general-info{transform:translateX(50px)}

.content{
        padding:30px;
}
.content .title{
        font-size:24px;
        margin-bottom:8px;
}
.forecast .grd:after,.content .forecast .grd:before{content:'';display:table}
.forecast .grd:after{clear:both;display:block}
.forecast .grd{
        margin-left:-5px;
        margin-right:-5px;
}
.forecast .grd>.col{
        float:left;
        padding:5px;
        width:16.6666%;
        transition:all .4s ease-in-out 0s;
}
@-webkit-keyframes show-list{
        0%{transform:translateY(100px);opacity:0}
        100%{transform:translateY(0);opacity:1}
}
@keyframes show-list{
        0%{transform:translateY(100px);opacity:0}
        100%{transform:translateY(0);opacity:1}
}
.toggle:checked ~ .box-inner .forecast .grd>.col{-webkit-animation:show-list 1s linear backwards;animation:show-list 1s linear backwards;-webkit-animation-delay:.4s;animation-delay:.4s}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(1){-webkit-animation-duration:.3s;animation-duration:.3s}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(2){-webkit-animation-duration:.4s;animation-duration:.4s}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(3){-webkit-animation-duration:.5s;animation-duration:.5s}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(4){-webkit-animation-duration:.6s;animation-duration:.6s}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(5){-webkit-animation-duration:.7s;animation-duration:.7s}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(6){-webkit-animation-duration:.8s;animation-duration:.8s}

.forecast .info{
        padding:10px;
        cursor:default;
        background-color:rgba(255,255,255,.03);
        transition:background .2s ease-in-out 0s;
}
.forecast .grd .info:hover{
        background-color:rgba(255,255,255,.08);
}
.forecast .date{
        font-size:14px;
}
.forecast .ico{
        width:38px;
        height:38px;
        font-size:38px;
        line-height:38px;
        display:inline-block;
}
.forecast .unit .min,
.forecast .unit .max{position:relative;margin-right:8px}
.forecast .unit .min{font-size:14px}
.forecast .info .text{
        font-size:14px;
        margin-top:5px;
}
.author{
        margin-top:5px;
        text-align:right;
}
.summary{margin-top:5px;transition:all .2s ease-in-out 0s}
.toggle:checked ~ .box-inner .summary{-webkit-animation:flip-inf .2s linear backwards;animation:flip-inf .2s linear backwards;-webkit-animation-delay:.9s;animation-delay:.9s}
@-webkit-keyframes flip-inf{
        0%{transform:scale(0)}
        100%{transform:scale(1)}
}
@keyframes flip-inf{
        0%{transform:scale(0)}
        100%{transform:scale(1)}
}
.author{
        margin-top:10px;
}
.author a{
        color:#fff;
        display:inline-block;
        text-decoration:none;
}
.toggle-switch{
        right:0;
        z-index:20;
        width:50px;
        height:50px;
        bottom:-50px;
        cursor:pointer;
        position:absolute;
        perspective:200px;
}
.toggle-switch .tgl-btn{
        width:50px;
        height:50px;
        overflow:hidden;
        position:absolute;
        background-color:#80DEEA;
        -webkit-backface-visibility:hidden;
                backface-visibility:hidden;
        transition:all .4s ease-in-out 0s;
        background:linear-gradient(30deg,#80DEEA 0, #26C6DA 100%);
}
.toggle-switch .tgl-btn:hover{color:#fff;background:linear-gradient(30deg,#26C6DA 0, #80DEEA 100%)}
.toggle-switch .tgl-btn:after{
        top:0;
        left:-25px;
        width:20px;
        height:100%;
        background-color:rgba(255,255,255,.55);
        transform:skewX(-15deg);
        -webkit-filter:blur(2px);
}
.toggle-switch .tgl-btn.front:after{-webkit-animation:shine 2s linear infinite;animation:shine 2s linear infinite}
@-webkit-keyframes shine{
        0%,90%{opacity:0;left:-25px}
        100%{opacity:1;left:50px}
}
@keyframes shine{
        0%,90%{opacity:0;left:-25px}
        100%{opacity:1;left:50px}
}
.toggle-switch .ico{
        width:36px;
        margin:auto;
        height:36px;
        font-size:36px;
        line-height:50px;
}
.toggle-switch .ico>i:before,
.toggle-switch .ico>i:after{color:inherit}
.toggle-switch .dtl-icon{
        width:inherit;
        height:inherit;
        text-align:center;
}
.toggle-switch .dtl-icon>i{
        height:30px;
        margin-top:10px;
        position:relative;
        display:inline-block;
        border-left:1px solid;
}
.toggle-switch .dtl-icon>i:before,
.toggle-switch .dtl-icon>i:after{
        top:-1px;
        height:15px;
        border:inherit;
}
.toggle-switch .dtl-icon>i:before{
        left:-7px;
        transform:rotate(45deg);
}
.toggle-switch .dtl-icon>i:after{
        right:-6px;
        transform:rotate(-45deg);
}

.toggle-switch .tgl-btn.back,
.toggle:checked ~ .box-inner .toggle-switch .tgl-btn.front{transform:rotateX(180deg)}
.toggle:checked ~ .box-inner .toggle-switch .tgl-btn.back{transform:rotateX(0deg)}
.toggle:checked ~ .box-inner .toggle-switch .tgl-btn.back:after{-webkit-animation:shine 2s linear infinite;animation:shine 2s linear infinite}
</style>



</head>

<body >
  <div class="box-wrap">
        <input id="toggle" class="toggle" type="checkbox">
        <div class="rain"><i style="left:693px;top:844px"></i><i style="left:1307px;top:-31px"></i><i style="left:984px;top:101px"></i><i style="left:1662px;top:-64px"></i><i style="left:999px;top:1371px"></i><i style="left:960px;top:-820px"></i><i style="left:1288px;top:185px"></i><i style="left:1618px;top:103px"></i><i style="left:659px;top:1180px"></i><i style="left:648px;top:-408px"></i><i style="left:844px;top:10px"></i><i style="left:662px;top:1098px"></i><i style="left:471px;top:55px"></i><i style="left:811px;top:-752px"></i><i style="left:281px;top:1300px"></i><i style="left:117px;top:153px"></i><i style="left:579px;top:942px"></i><i style="left:657px;top:-977px"></i><i style=&q.........完整代码请登录后点击上方下载按钮下载查看