console
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>来自程序员的表白</title>
<style type="text/css">
@font-face {
font-family: digit;
src: url('digital-7_mono.ttf') format("truetype");
}
span{font-size: 15px;color:#fff}
body{background:#fff;}
</style>
<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/64/pkiv8cab/default.css">
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/64/pkiv8cab/functions.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/64/pkiv8cab/garden.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/64/pkiv8cab/jquery.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/64/pkiv8cab/functions.js"></script>
</head>
<body>
<div class="bg">
<div id="mainDiv">
<div id="content">
<div id="code" style="width:140px">
<span class="comments">/**</span><br />
<span class="space"/><span class="comments">*2018-04-09,</span><br />
<span class="space"/><span class="comments">*To Now,</span><br />
<span class="space"/><span class="comments">*/</span><br />
献给我的小芳姑娘<br />
希望你能喜欢<br />
村里有个姑娘叫小芳<br />
长得好看又善良<br />
一双美丽的大眼睛<br />
辫子粗又长<br />
在回城之前的那个晚上<br />
你和我来到小河旁<br />
从没流过的泪水<br />
随着小河淌<br />
谢谢你给我的爱<br />
今生今世我不忘怀<br />
谢谢你给我的温柔<br />
伴我度过那个年代<br />
多少次我回回头看看走过的路<br />
衷心祝福你善良的姑娘<br />
多少次我回回头看看走过的路<br />
你站在小河旁<br />
村里有个姑娘叫小芳<br />
长得好看又善良<br />
一双美丽的大眼睛<br />
辫子粗又长<br />
谢谢你给我的爱<br />
今生今世我不忘怀<br />
谢谢你给我的温柔<br />
伴我度过那个年代<br />
多少次我回回头看看走过的路<br />
衷心祝福你善良的姑娘<br />
多少次我回回头看看走过的路<br />
你站在小河旁<br />
谢谢你给我的爱<br />
今生今世我不忘怀<br />
谢谢你给我的温柔<br />
伴我度过那个年代<br />
谢谢你给我的爱<br />
今生今世我不忘怀<br />
谢谢你给我的温柔<br />
伴我度过那个年代<br />
谢谢你给我的爱<br />
今生今世我不忘怀<br />
谢谢你给我的温柔<br />
伴我度过那个年代<br />
谢谢你给我的爱<br />
今生今世我不忘怀<br />
谢谢你给我的温柔<br />
伴我度过那个年代<br />
</div>
<div id="loveHeart">
<canvas id="garden" style="width:80%;height:80%"></canvas>
<div id="words">
<div id="messages" style="font-size: 24px;margin-top: -46px;color:#fff">
               缘来是你<br/>                送给阳小芳姑娘
<div id="elapseClock" style="font-size: 12px;margin: 10px 100px 10px 0; "></div>
</div>
<div id="loveu" style="margin-top: 45px; margin-right: 120px;text-align: center;">
祝天天快乐<br/>
<div class="signature">-By叶威</div>
</div>
</div>
</div>
</div>
</div>
<div>
<audio autoplay="autoplay">
<source src="//music.163.com/outchain/player?type=2&id=2639477&auto=1&height=66" type="audio/mpeg">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=5280148&auto=1&height=32"></iframe>
<script type="text/javascript">
document.getElementById('bgaudio').play();
</script>
</audio>
</div>
</div>
<div class="wrapper">
<svg viewBox="0 0 600 300">
<symbol id="s-text">
<text text-anchor="middle" x="70%" y="40%" dy=".35em"> </text>
</symbol>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
</svg>
</div>
<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2018, 03, 08);
together.setHours(24);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);
if (!document.createElement('canvas').getContext) {
var msg = document.createElement("div");
msg.id = "errorMsg";
msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
document.body.appendChild(msg);
$("#code").css("display", "none")
$("#copyright").css("position", "absolute");
$("#copyright").css("bottom", "10px");
document.execCommand("stop");
} else {
setTimeout(function () {
startHeartAnimation();
}, 5000);
timeElapse(together);
setInterval(function () {
timeElapse(together);
}, 500);
adjustCodePosition();
$("#code").typewriter();
}
</script>
</div>
</body>
</html>
.bg{
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;
width:250%;
height:210%;
position:absolute;
z-index:-1
}
html,body {
height: 100%;
font: 16px Microsoft YaHei;
}
* { margin: 0;padding: 0; }
.wrapper {
position: relative;
height: 100%;
left: -15%;
bottom:42%;
}
.container {
width: 700px;
height: 450px;
background: rgba(255,255,255,.8);
border-radius: 2px;
box-shadow: 0 0 15px #ccc;
text-align: center;
padding: 20px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.text {
fill: none;
stroke-width: 1;
font-size: 35px;
stroke-linejoin: round;
stroke-dasharray: 70 330;
stroke-dashoffset: 0;
-webkit-animation: stroke 6s infinite linear;
animation: stroke 6s infinite linear;
}
.text:nth-child(5n + 1) {
stroke: #f2385a;
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
stroke: #f5a503;
-webkit-animation-delay: -2.4s;
animation-delay: -2.4s;
}
.text:nth-child(5n + 3) {
stroke: #e9f1df;
-webkit-animation-delay: -3.6s;
animation-delay: -3.6s;
}
.text:nth-child(5n + 4) {
stroke: #56d9cd;
-webkit-animation-delay: -4.8s;
animation-delay: -4.8s;
}
.text:nth-child(5n + 5) {
stroke: #3aa1bf;
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
@-webkit-keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
@keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
svg {
width: 100%;
height: 100%;
position: absolute;
}