-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
1 lines (1 loc) · 4.3 KB
/
index.html
File metadata and controls
1 lines (1 loc) · 4.3 KB
1
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta property="wb:webmaster" content="9cdb29a00ae2fa84" /> <title>三桂</title> <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"/> <meta name="apple-touch-fullscreen" content="yes"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> <link rel="apple-touch-icon" sizes="72x72" href="/touch-icon-ipad.png"/> <link rel="apple-touch-icon" sizes="114x114" href="/touch-icon-iphone-retina.png"/> <link rel="apple-touch-icon" sizes="144x144" href="/touch-icon-ipad-retina.png"/> <!--link rel="apple-touch-startup-image" href="startup.png"/--> <style> html, body { overflow: hidden; margin: 0; } body { font-family: Monaco, "Helvetica Neue", Helvetica, "Hiragino Sans GB", "STHeitiSC-Light", "Microsoft YaHei"; background-color: #2f2d32; } ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; line-height: 1.8em; margin: 0 10px; } .wrapper { position: absolute; left: 0; width: 320px; height: 350px; top: 50%; left: 50%; margin: -175px 0 0 -160px; text-align: center; } .who-is-this-guy, .what-this-guy-do { position: relative; } .who-is-this-guy { font-weight: 400; color: #333; } .my-sexy-avatar { display: block; margin: 0 auto 10px; border-radius: 100px; } .you-can-call-me { display: inline-block; padding: 2px 35px; background: rgba(0, 0, 0, 0.2); color: #fff; font-size: .6em; text-shadow: 0 1px 0 #41474e; border-radius: 5px; } .what-this-guy-do { color: #999; font-weight: normal; font-size: 15px; letter-spacing: .12em; } .what-the-fuck { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } a { color: #4183c4; text-decoration: none; } .glow { position: absolute; left: 50%; margin: -2px 0 0 -52px; border-radius: 100px; border: 5px solid rgba(0, 0, 0, .1); width: 100px; height: 100px; border: 2px solid #fff; z-index: 2; -webkit-animation: pulsecircle .8s linear infinite; animation: pulsecircle .8s linear infinite; } @-webkit-keyframes pulsecircle { 0% { -webkit-transform: scale(1, 1); opacity: 0 } 50% { opacity: 1 } 100% { -webkit-transform: scale(1.3, 1.3); opacity: 0 } } @keyframes pulsecircle { 0% { transform: scale(1, 1); opacity: 0 } 50% { opacity: 1 } 100% { transform: scale(1.3, 1.3); opacity: 0 } } </style> </head> <body> <div class="wrapper"> <h1 class="who-is-this-guy"> <div class="glow"></div> <img class="my-sexy-avatar" width="100" height="100" src="http://samgui.com/public/img/avatar.png" alt="samgui(三桂)"/> <span class="you-can-call-me">三桂(samgui)</span> </h1> <h2 class="what-this-guy-do">非著名前端狗，崇尚简洁高效</h2> <ul class="some-useful-links"> <li><a href="/archive">blog</a></li> <li><a href="https://speakerdeck.com/and1coder" target="_blank">slides</a></li> <li><a href="https://github.com/and1coder" target="_blank">github</a></li> <li><a href="/about">about</a></li> </ul> </div> <canvas class="what-the-fuck"></canvas> <script> document.addEventListener('touchmove', function (e) { e.preventDefault(); }); var c = document.getElementsByTagName('canvas')[0], x = c.getContext('2d'), pr = window.devicePixelRatio || 1, w = window.innerWidth, h = window.innerHeight, f = 90, q, m = Math, r = 0, u = m.PI * 2, v = m.cos, z = m.random; c.width = w * pr; c.height = h * pr; x.scale(pr, pr); x.globalAlpha = 0.6; function i() { x.clearRect(0, 0, w, h); q = [{ x: 0, y: h * .7 + f}, { x: 0, y: h * .7 - f}]; while (q[1].x < w + f) d(q[0], q[1]); } function d(i, j) { x.beginPath(); x.moveTo(i.x, i.y); x.lineTo(j.x, j.y); var k = j.x + (z() * 2 - 0.25) * f, n = y(j.y); x.lineTo(k, n); x.closePath(); r -= u / -50; x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16); x.fill(); q[0] = q[1]; q[1] = {x: k, y: n}; } function y(p) { var t = p + (z() * 2 - 1.1) * f; return (t > h || t < 0) ? y(p) : t; } document.onclick = i; document.ontouchstart = i; i(); var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1253455174'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/stat.php%3Fid%3D1253455174' type='text/javascript'%3E%3C/script%3E")); </script> </body> </html>