前端 —— 随机涩图

前端 —— 随机涩图（灵感来源于https://r-18.dominoh.com/）

预览地址：http://r-18.mxzfun.xyz/

html部分

<html>
    <head>
    <title>测试</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <section id="banner">
        <div class="inner">
            <header>
                <h2>weresfsdffds</h2>
            </header>
        <p>
            <span id="busuanzi_container_site_pv" style="display: inline;">
                有
                <span id="busuanzi_value_site_pv">114514</span>位绅士来过这里</span>
            <br>
            ……不要再扩散了啦！！
            <br>
            点击按钮打开新世界的大门
            </p>
            
            <footer>
                <ul class="buttons stacked">
                    <li><a href="https://www.bilibili.com/video/av416607571" class="button fit scrolly">
                        来张涩图</a>
                    </li>
                </ul>
                <ul class="buttons stacked">
                    <li><a href="http://mxzfun.xyz" class="button fit scrolly">博客</a>
                    </li>
                </ul>
            </footer>
            </div>
            </section>
            </body></html>

CSS部分

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;}


/* Basic *//*这段不能，往右偏移就是他*/

    html {
        box-sizing: border-box;
    }

    *, *:before, *:after {
        box-sizing: inherit;
    }

    body, input, select, textarea {
        color: #7c8081;
        font-family: 'Lato', sans-serif;
        font-size: 15pt;
        font-weight: 300;
        letter-spacing: 0.025em;
        line-height: 1.75em;
    }

    p, ul, ol, dl, table, blockquote {
        margin: 0 0 2em 0;
    }

    h1, h2, h3, h4, h5, h6 {
        color: inherit;
        font-weight: 300;
        line-height: 1.75em;
        margin-bottom: 1em;
        text-transform: uppercase;
    }


/* Buttons */

    ul.buttons {
        cursor: default;
        list-style: none;
        padding-left: 0;
    }

        ul.buttons.stacked li {
            display: block;
            padding: 1.5em 0 0 0;
        }

            ul.buttons.stacked li:first-child {
                padding: 0;
            }


/* Button */

    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    button,
    .button {
        -moz-appearance: none;
        -webkit-appearance: none;
        -ms-appearance: none;
        appearance: none;
        -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
        -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
        -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
        transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
        background: none;
        border: solid 1px;
        border-radius: 0;
        color: inherit;
        cursor: pointer;
        display: inline-block;
        font-size: 0.8em;
        font-weight: 900;
        letter-spacing: 2px;
        min-width: 18em;
        padding: 0 0.75em;
        line-height: 3.75em;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }

        input[type="button"]:hover,
        input[type="submit"]:hover,
        input[type="reset"]:hover,
        button:hover,
        .button:hover {
            background: rgba(188, 202, 206, 0.15);
            border-color: inherit;
        }


        input[type="button"].fit,
        input[type="submit"].fit,
        input[type="reset"].fit,
        button.fit,
        .button.fit {
            width: 100%;
        }

/* Banner */


    @-webkit-keyframes reveal-banner {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }



    #banner {
        background-attachment: scroll, scroll, scroll, fixed;
        background-color: #645862;
        background-image: url("images/light-bl.svg"), url("images/light-br.svg"), url("whyy.png"), url("why.png");
        background-position: bottom left, bottom right, top left, top center;
        background-repeat: no-repeat, no-repeat, repeat, no-repeat;
        background-size: 25em, 25em, auto, cover;
        color: #fff;
        cursor: default;
        padding: 6em 0;
        text-align: center;
    }

        #banner .inner {
            -moz-animation: reveal-banner 1s 0.25s ease-in-out;
            -webkit-animation: reveal-banner 1s 0.25s ease-in-out;
            -ms-animation: reveal-banner 1s 0.25s ease-in-out;
            animation: reveal-banner 1s 0.25s ease-in-out;
            -moz-animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards;
            -ms-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
            background: rgba(52, 27, 43, 0.5);
            color: #fff;
            display: inline-block;
            opacity: 0;
            padding: 3em;
            text-align: center;
        }

            #banner .inner header {
                display: inline-block;
                border-bottom: solid 2px;
                border-top: solid 2px;
                margin: 0 0 2em 0;
                padding: 3px 0 3px 0;
            }


                #banner .inner header h2 {
                    border-bottom: solid 2px;
                    border-top: solid 2px;
                    font-size: 2.5em;
                    font-weight: 900;
                    letter-spacing: 0.2em;
                    margin: 0;
                    padding-left: 0.05em;
                    position: relative;
                    text-transform: uppercase;
                }