查资料的时候刚好看到有的网站在建设中,首页是一个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>
git地址:https://gitee.com/lqccan/blog-demo demo4