网上扒的一个CSS实现的浏览器样式

查资料的时候刚好看到有的网站在建设中,首页是一个CSS实现的浏览器,感觉挺不错的,遂扒了一下代码。原链接:http://jika.cn/

预览图:

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS浏览器</title>
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box
    }

    a {
        color: inherit;
        text-decoration: none;
        background-color: transparent
    }

    li {
        list-style: none
    }

    .clearfix:after {
        content: '';
        display: table;
        clear: both
    }

    body {
        font-size: 14px;
        color: #494949;
        overflow: auto
    }

    .wrap {
        position: relative;
        min-height: 580px
    }

    .wrap-bg circle, .wrap-bg rect {
        stroke-width: 0;
        -ms-transform: rotate(30deg) scale(1.1);
        transform: rotate(30deg) scale(1.1);
        -ms-transform-origin: center;
        transform-origin: center
    }

    .main {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        width: 970px;
        background: #effbff;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        box-shadow: 0 0 50px rgba(0, 0, 0, .1)
    }

    .header-tabs {
        width: 100%;
        height: 55px;
        padding: 0 30px;
        background: linear-gradient(45deg, #4c75e9, #2c7ce3);
        overflow: hidden
    }

    .header-tabs .tab {
        float: left;
        height: 40px;
        width: 200px;
        padding: 0 18px;
        margin-top: 15px;
        border-radius: 10px 10px 0 0;
        background: #fbfdff;
        line-height: 40px;
        color: #113c73
    }

    .header-tabs .tab:after {
        content: '';
        display: table;
        clear: both
    }

    .header-tabs .tab span {
        float: left
    }

    .header-tabs .tab i {
        position: relative;
        float: right;
        width: 11px;
        height: 11px;
        margin-top: 14px;
        cursor: pointer;
        -ms-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .header-tabs .tab i:before {
        content: '';
        position: absolute;
        top: 5px;
        left: 0;
        display: block;
        width: 100%;
        height: 1px;
        background: #113c73
    }

    .header-tabs .tab i:after {
        content: '';
        position: absolute;
        left: 5px;
        top: 0;
        display: block;
        width: 1px;
        height: 100%;
        background: #113c73
    }

    .header-tabs .tab-add {
        position: relative;
        float: left;
        width: 28px;
        height: 28px;
        margin: 20px 0 0 15px;
        border-radius: 50%;
        background: #a9cdf7
    }

    .header-tabs .tab-add:before {
        content: '';
        position: absolute;
        top: 13px;
        left: 9px;
        display: block;
        width: 10px;
        height: 2px;
        background: #113c73
    }

    .header-tabs .tab-add:after {
        content: '';
        position: absolute;
        left: 13px;
        top: 9px;
        display: block;
        width: 2px;
        height: 10px;
        background: #113c73
    }

    .header-tabs .tabs-tool {
        float: right;
        height: 100%
    }

    .header-tabs .tabs-tool a {
        position: relative;
        float: left;
        width: 14px;
        height: 100%;
        margin: 0 15px
    }

    .header-tabs .tabs-tool .btn-min:before {
        content: '';
        position: absolute;
        top: 27px;
        left: 0;
        width: 100%;
        height: 1px;
        background: #113c73
    }

    .header-tabs .tabs-tool .btn-max:before {
        content: '';
        position: absolute;
        top: 20px;
        left: 0;
        width: 14px;
        height: 14px;
        border: 1px solid #113c73;
        box-sizing: border-box
    }

    .header-tabs .tabs-tool .btn-close {
        width: 15px;
        -ms-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .header-tabs .tabs-tool .btn-close:before {
        content: '';
        position: absolute;
        top: 27px;
        left: 0;
        display: block;
        width: 15px;
        height: 1px;
        background: #113c73
    }

    .header-tabs .tabs-tool .btn-close:after {
        content: '';
        position: absolute;
        left: 7px;
        top: 20px;
        display: block;
        width: 1px;
        height: 15px;
        background: #113c73
    }

    .header-url {
        width: 100%;
        height: 54px;
        padding: 10px 20px 10px 15px;
        background: #f2f2f2
    }

    .header-url a {
        float: left;
        height: 100%;
        margin: 0 9px;
        overflow: hidden
    }

    .header-url a svg {
        margin-top: 9px
    }

    .header-url a .arrow {
        fill: none;
        stroke: #494949;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .header-url .btn-next .arrow {
        -ms-transform-origin: center;
        transform-origin: center;
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        stroke: #d4d5d6
    }

    .header-url .btn-refresh path {
        fill: none;
        stroke: #494949;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round;
        -ms-transform-origin: center;
        transform-origin: center;
        -ms-transform: rotate(40deg);
        transform: rotate(40deg)
    }

    .header-url .btn-refresh polyline {
        fill: #494949;
        -ms-transform-origin: center;
        transform-origin: center;
        -ms-transform: rotate(40deg);
        transform: rotate(40deg)
    }

    .header-url input[type=text] {
        height: 100%;
        width: 820px;
        margin-left: 6px;
        padding: 0 1em;
        border: 1px solid #a9a9a9;
        border-radius: 4px;
        background: #fff
    }

    .main-content {
        height: 470px;
        border: 1px solid #c4dce5;
        background: #f4fcff
    }

    .main-content h5 {
        padding: 110px 0;
        font-weight: 400;
        text-align: center
    }

    .main-content h5 span {
        position: relative;
        display: inline-block;
        font-size: 60px;
        color: #2c7ce3
    }

    .main-content h5 span:before {
        content: '';
        position: absolute;
        top: 48px;
        left: -36px;
        display: block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: linear-gradient(45deg, #ded9ff, #2c7ce3);
        opacity: .2
    }

    .main-content h5 span:after {
        content: '';
        position: absolute;
        top: 32px;
        left: -80px;
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: linear-gradient(45deg, #ded9ff, #2c7ce3);
        opacity: .2
    }

    .main-content h5 span i:before {
        content: '';
        position: absolute;
        top: 32px;
        right: -72px;
        display: block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: linear-gradient(45deg, #ded9ff, #2c7ce3);
        opacity: .2
    }

    .main-content h5 span i:after {
        content: '';
        position: absolute;
        top: 48px;
        right: -40px;
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: linear-gradient(45deg, #ded9ff, #2c7ce3);
        opacity: .2
    }

    .main-content p {
        font-size: 26px;
        text-align: center
    }
    </style>
</head>
<body>
<div class="wrap">
    <svg class="wrap-bg" width="98vw" height="99vh" viewBox="0 0 400 400">
        <defs>
            <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="20%" stop-color="#fff" stop-opacity="0.2"/>
                <stop offset="40%" stop-color="#c4efff" stop-opacity="0.2"/>
                <stop offset="100%" stop-color="#fff" stop-opacity="0.2"/>
            </linearGradient>
            <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#fff" stop-opacity="0.2"/>
                <stop offset="30%" stop-color="#e7c4ff" stop-opacity="0.2"/>
                <stop offset="50%" stop-color="#fff" stop-opacity="0.2"/>
                <stop offset="70%" stop-color="#c4d6ff" stop-opacity="0.2"/>
                <stop offset="100%" stop-color="#fff" stop-opacity="0.2"/>
            </linearGradient>
            <linearGradient id="gradient3" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#fff" stop-opacity="0.2"/>
                <stop offset="30%" stop-color="#a3bbff" stop-opacity="0.2"/>
                <stop offset="50%" stop-color="#fff" stop-opacity="0.2"/>
                <stop offset="70%" stop-color="#73dcfe" stop-opacity="0.2"/>
                <stop offset="100%" stop-color="#fff" stop-opacity="0.2"/>
            </linearGradient>
            <linearGradient id="gradient4" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#fff" stop-opacity="0.2"/>
                <stop offset="30%" stop-color="#fec0dd" stop-opacity="0.2"/>
                <stop offset="50%" stop-color="#fff" stop-opacity="0.2"/>
                <stop offset="70%" stop-color="#a3bbff" stop-opacity="0.2"/>
                <stop offset="100%" stop-color="#fff" stop-opacity="0.2"/>
            </linearGradient>
            <linearGradient id="gradient5" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#fff" stop-opacity="0.2"/>
                <stop offset="30%" stop-color="#c4d6ff" stop-opacity="0.2"/>
                <stop offset="50%" stop-color="#fff" stop-opacity="0.2"/>
                <stop offset="70%" stop-color="#e7c4ff" stop-opacity="0.2"/>
                <stop offset="100%" stop-color="#fff" stop-opacity="0.2"/>
            </linearGradient>
            <linearGradient id="gradient6" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="40%" stop-color="#fff" stop-opacity="0.2"/>
                <stop offset="70%" stop-color="#c4efff" stop-opacity="0.2"/>
                <stop offset="90%" stop-color="#fff" stop-opacity="0.2"/>
            </linearGradient>
            <radialGradient id="gradient7" fx="50%" fy="50%" r="65%" spreadMethod="pad">
                <stop offset="0%" stop-color="#eefafe" stop-opacity="0.2"></stop>
                <stop offset="100%" stop-color="#fff" stop-opacity="0.2"></stop>
            </radialGradient>
        </defs>
        <rect x="50" y="0" width="50" height="400" style="fill:url(#gradient1)"></rect>
        <rect x="100" y="0" width="50" height="400" style="fill:url(#gradient2)"></rect>
        <rect x="150" y="0" width="50" height="400" style="fill:url(#gradient3)"></rect>
        <rect x="200" y="0" width="50" height="400" style="fill:url(#gradient4)"></rect>
        <rect x="250" y="0" width="50" height="400" style="fill:url(#gradient5)"></rect>
        <rect x="300" y="0" width="50" height="400" style="fill:url(#gradient6)"></rect>
        <circle cx="200" cy="200" r="300" style="fill:url(#gradient7)"></circle>
    </svg>
    <div class="main">
        <header>
            <div class="header-tabs clearfix"><a href="javascript: void(0);" class="tab"><span>新建标签页</span> <i></i> </a><a
                    href="javascript: void(0);" class="tab-add"></a>
                <div class="tabs-tool"><a href="javascript: void(0);" class="btn-min"></a> <a
                        href="javascript: void(0);" class="btn-max"></a> <a href="javascript: void(0);"
                                                                            class="btn-close"></a></div>
            </div>
            <div class="header-url clearfix">
                <svg style="display:none">
                    <defs>
                        <g id="arrow">
                            <path d="M8,2 L1,8 8,14"></path>
                            <path d="M2,8 L15,8"></path>
                        </g>
                    </defs>
                </svg>
                <a href="javascript: void(0);" class="btn-back">
                    <svg width="16" height="16">
                        <use class="arrow" xlink:href="#arrow"></use>
                    </svg>
                </a><a href="javascript: void(0);" class="btn-next">
                <svg width="16" height="16">
                    <use class="arrow" xlink:href="#arrow"></use>
                </svg>
            </a><a href="javascript: void(0);" class="btn-refresh">
                <svg width="16" height="16">
                    <path class="refresh-arc" d="M15,8  A7,7 0 1,1 8,1"></path>
                    <polyline points="8,-3  11,1  8,5"></polyline>
                </svg>
            </a><input type="text" readonly="readonly" class="url-value"></div>
        </header>
        <div class="main-content"><h5><span>网站正在建设中<i></i></span></h5>
            <p>合作洽谈请联系 xxx@qq.com </p></div>
    </div>
</div>
<script type="text/javascript">
    window.onload = function () {
        document.getElementsByClassName("url-value")[0].value = location.href;
    }
</script>
</body>
</html>

完整代码:https://gitee.com/lqccan/blog-demo/tree/master/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8