手机红包雨特效-html代码-BFW代码库

手机红包雨特效

代码语言：html

所属分类：红包

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

<!DOCTYPE>
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>红包雨特效</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
        <!--在iPhone 手机上禁止了把数字转化为拨号链接-->
        <meta content="telephone=no" name="format-detection" />
        <!--删除默认的苹果工具栏和菜单栏-->
        <meta content="yes" name="apple-mobile-web-app-capable">
        <!-- 网站开启对web app程序的支持，在web app应用下状态条（屏幕顶部条）的颜色，默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）-->
        <meta name="apple-mobile-web-app-status-bar-style" content="black">


        <style type="text/css">
            html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed,
            figure, figcaption, footer, header, hgroup,
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
                font: inherit;
                font-size: 100%;
                vertical-align: baseline;
            }

            html {
                line-height: 1;
            }

            ol, ul {
                list-style: none;
            }

            table {
                border-collapse: collapse;
                border-spacing: 0;
            }

            caption, th, td {
                text-align: left;
                font-weight: normal;
                vertical-align: middle;
            }

            q, blockquote {
                quotes: none;
            }
            q:before, q:after, blockquote:before, blockquote:after {
                content: "";
                content: none;
            }

            a img {
                border: none;
            }

            article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
                display: block;
            }

            body {
                margin: 0;
                padding: 0;
                position: relative;
                background-position: center;
                width: 100%;
                height: 100%;
                overflow-y: hidden;
                background: url(http://repo.bfw.wiki/bfwrepo/image/5de084d231193.png) no-repeat top left;
                background-size: 100%;
            }
            .couten {
                width: 100%;
                height: 100%;
                overflow: hidden;
                overflow-y: hidden;
            }
            .couten li {
                position: absolute;
                animation: all   3s linear;
                top: -100px;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }
            .couten li a {
                display: block;
            }
            .mo {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, .2);
                z-index: 100;
                display: none;
            }
            .mo .sen {
                width: 70%;
                height: 150px;
                border-radius: 5px;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
            .mo .sen img {
                width: 60%;
                height: 127px;
                position: absolute;
                top: 0px;
                left: 0;
                right: 0;
                bottom: 212px;
                margin: auto;
                vertical-align: top;
            }
            .mo .sen h3 {
                width: 50%;
                height: 30px;
                position: absolute;
                top: -35px;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                text-align: center;
                color: red;
                font-size: 140%;
                font-weight: bold;
                z-index: 999;
            }

            .mo .sen a {
                width: 26%;
                height: 50px;
                background-color: rgb(174, 222, 244);
                box-shadow: rgba(174, 222, 244, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset;
                position: absolute;
                top: 100px;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                color: #fff;
                border-radius: 5px;
                text-align: center;
         .........完整代码请登录后点击上方下载按钮下载查看