查资料的时候刚好看到有的网站在建设中，首页是一个CSS实现的浏览器，感觉挺不错的，遂扒了一下代码。原链接：http://jika.cn/
爱肤佳（aifujia） 一次性洗脸巾加厚加量婴儿干湿两用男女通用擦脸卸妆棉柔巾3卷￥9.90
预览图：
代码：
<!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
