拆红包效果-html代码-BFW代码库

拆红包效果

代码语言：html

所属分类：红包

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>领取礼物</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <style>
        article,aside,blockquote,body,button,code,dd,dialog,div,dl,dt,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,input,legend,li,nav,ol,p,pre,section,td,textarea,th,ul {
            margin: 0;
            padding: 0
        }
        input,select,textarea {
            font-size: 100%
        }
        table {
            border-collapse: collapse;
            border-spacing: 0
        }
        fieldset,img {
            border: 0
        }
        caption,th {
            text-align: left
        }
        h1,h2,h3,h4,h5,h6 {
            font-size: 100%;
            font-weight: 500
        }
        li,ol,ul {
            list-style: none
        }
        em,i {
            font-style: normal
        }
        del {
            text-decoration: line-through
        }
        address,caption,cite,code,dfn,em,th,var {
            font-style: normal;
            font-weight: 500
        }
        img {
            border: 0;
            max-width: 100%
        }
        img,input {
            vertical-align: middle
        }
        a:focus,input:focus {
            outline: 0
        }
        a {
            color: #353d44;
            text-decoration: none
        }
        * {
            outline: 0;
            -webkit-tap-highlight-color: transparent;
            -webkit-box-sizing: border-box
        }
        html {
            -webkit-text-size-adjust: none;
            overflow-y: scroll
        }
        body {
            min-width: 320px;
            line-height: 1.5;
            color: #353d44;
            font-family: Arial,Helvetica,STHeiTi,sans-serif;
            background: #F4F4F4;
            width: 100%
        }
        .w {
            margin: 0 auto;
            max-width: 15rem
        }
        html {
            font-size: 21.33px
        }
        body {
            font-size: 12px
        }
@media screen and (min-width:320px) {
            html {
                font-size: 21.33px
            }
            body {
                font-size: 12px
            }
        }
@media screen and (min-width:360px) {
            html {
                font-size: 24px
            }
            body {
                font-size: 12px
            }
        }
@media screen and (min-width:375px) {
            html {
                font-size: 25px
            }
            body {
                font-size: 12px
            }
        }
@media screen and (min-width:384px) {
            html {
                font-size: 25.6px
            }
            body {
                font-size: 14px
            }
        }
@media screen and (min-width:400px) {
            html {
                font-size: 26.67px
            }
            body {
                font-size: 14px
            }
        }
@media screen and (min-width:414px) {
            html {
                font-size: 27.6px
            }
            body {
                font-size: 14px
            }
        }
@media screen and (min-width:424px) {
            html {
                font-size: 28.27px
            }
            body {
                font-size: 14px
            }
        }
@media screen and (min-width:480px) {
            html {
                font-size: 32px
            }
            body {
                font-size: 15.36px
            }
        }
@media screen and (min-width:540px) {
            html {
                font-size: 36px
            }
            body {
                font-size: 17.28px
            }
        }
@media screen and (min-width:720px) {
            html {
                font-size: 48px
            }
            body {
                font-size: 23.04px
            }
        }
@media screen and (min-width:750px) {
            html {
                font-size: 50px
            }
            body {
                font-size: 24px
            }
        }
        html, body {
            width: 100%;
            height: 100%;
        }

        .hide {
            /*display: none;*/
            opacity: 0;
        }

        .draw-gift {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .draw-gift .draw-img {
            width: 100%;
            position: relative;
            margin-top: 6.5rem;
        }

        .draw-gift .draw-img .draw-down {
            position: absolute;
            width: 9rem;
            height: 9.9rem;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url(http://repo.bfw.wiki/bfwrepo/icon/5de092dfaadfe.png);
            left: 50%;
            margin-left: -4.5rem;
            z-index: 10;
            /*-webkit-animation:draw-down 0.5s ease 1.2s 1 alternate;*/
            /*-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);*/
        }

@-webkit-keyframes draw-down {
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
            100% {
                opacity: 0;
            }
        }

        .draw-gift .draw-img .draw-down2 {
            position: absolute;
            width: 9rem;
            height: 9.9rem;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: .........完整代码请登录后点击上方下载按钮下载查看