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

2020-02-04 10:25 CSS 阅1489

>> 饿了么、美团外卖红包领取地址<<

查资料的时候刚好看到有的网站在建设中，首页是一个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

觉得内容还不错？打赏个钢镚鼓励鼓励！！👍

彩虹烘鞋器可伸缩快速干鞋机家用旅行便携式烤鞋暖鞋器成人儿童安全烘干器鞋靴除湿机 伸缩款Q8103
￥46.00
良世医 医用一次性隔离衣 连体式连帽衣医用隔离服坐飞机男女通用（建议160CM-185CM）
￥25.20
励展（LIZHAN）医用外科口罩一次性成人防护三层医疗正品透气轻薄防尘50只/盒 蓝色非独立
￥19.80
若烟雪茄保湿包加湿包片保湿袋69%湿度双向保湿恒湿通用国产60g
￥29.00
圣农脆皮炸鸡原味750g 韩式炸鸡半成品 油炸小食 生鲜 空气炸锅食材
￥49.90
手护佳 一次性食品级丁腈手套 厨房家用公司复工学生开学劳保防护 盒装100只蓝色 L号
￥47.30
艾玛莫莉（EMMA MOLLY）星座香薰蜡片衣橱香包香味神器持久香氛清香除味 狮子座法国杜松与薰衣草
￥49.00
年年好1.2米*5付空白手写对联《经典版》2023兔年通用
￥27.90