七夕到啦！然而我是程序员，就来给程序员解决一些烦恼吧！程序员最不理解的两件事：

1. 别人的代码
2. 妹子的心

趁着七夕的月色，我们来搞定妹子的心吧！使用纯CSS来获得妹子的心其实并不难。。各位看官来看我的尝试：http://tianmaying.com/app/css-heart/，如图：

既然是CSS的表白，我们便只写两行HTML：

<div class="heart"><div class="message">Love</div></div>
<div class="popover"></div>

上面是妹子的心，下面是程序员的表白。

妹子的心

妹子的心目测宽度在300px左右，稍微扁一点。.heart的左右两部分需要相对于.heart绝对布局，因而.heart的position需要设置为非static。

.heart{position: relative;width: 300px;height: 280px;
}

接着before表示左心房，after表示右心房~ 它们要相对于.heart绝对布局，设置为absolute！

.heart:before, .heart:after {content: "";position: absolute;top: 0;
}

左边的left靠左一点，右边的left靠右一点。但是妹子右心房比左心房稍微黑一点background-color:#640d0d。box-shadow是用来设置阴影的，其中inset表示设置的是内部阴影。因此妹子的心内部是有阴影的~然后使用transform将左右心房分别逆时针和顺时针旋转45°，让它们拼接在一起~

下面代码中使用6位16进制数表示CSS颜色（24位色），数越大越白（白色为#ffffff），越小则越黑（黑色为#000000）。

.heart:before {left: 0;background-color: #cf9797;box-shadow: -10px 1px 15px 0 rgba(0,0,0,0.2),inset 20px -195px 65px 0 #640d0d;transform: rotate(-45deg);
}
.heart:after{left: 64px;background-color: #640d0d;transform: rotate(45deg);box-shadow: 15px 3px 25px rgba(0,0,0,0.35),inset -25px 10px 35px rgba(0,0,0,.35);
}

我们猜想妹子的心中一定充满了爱，而text-shadow可以让心中的爱发出光芒。最后用transform来让她心中的爱有所倾斜。

.heart .message {text-shadow: -1px -1px 1px #ae6363, 1px 1px 1px #450000;padding: 45px 0 0 30px;transform: rotate(-15deg);color: #640d0d;
}

程序员的表白

接着我们来创建一个有一点苍白但却充满了浪漫的表白：

.popover {position: absolute;padding: 15px 30px;background: #F9787C;border-radius: 10px;
}

上面的padding给这个表白框设置了一定的内补，使得文字不必贴着边框，背景background则设置为一个浪漫的颜色：#F9787C。

哦！差点忘了说点什么！给表白框加一个表白内容："I love you, forever and ever!"。

.popover:before{content: 'I love you, forever and ever!';color: #fff;font-size: 26px;
}

表白框可以再来一个小小的角，这样我们的表白才有呼之欲出的效果。CSS中一般通过设置相邻的两个border来显示一个三角形。这里我们将border-right设为浪漫的颜色，而border-bottom则设置为透明，生成的三角形正好是.popover:after对应CSS Box的右上部分。

.popover:after{position: absolute;right: 0;content: "";display: block;width: 0;height: 0;border-bottom: 28px solid transparent;border-right: 58px solid #F9787C;
}

渐出的代码

可能你注意到了，在我们的示例中CSS代码是逐渐输出的，而且右侧的样式也是逐渐应用的。这是通过操作<style>标签做到的~

页面初始化时，.heart和.popover的样式代码不直接放在style或者link[rel=stylesheet]中，而是把它放在一个script[type=text/css]中。这样初始页面中的显示面板便只会有默认的样式。页面结构可能是这样的：

<div class="main-layout"><!--代码面板--><div class="left" id="code"></div><!--显示面板--><div class="right"><div class="heart"><div class="message">Love</div></div><div class="popover"></div></div></div><!--已应用的CSS代码-->
<style id="current-style"></style><!--初始的CSS代码-->
<script id="style" type="text/css">
.heart{...}
</script>

然后每隔200ms我们从中取出一部分代码并添加到一个<style>标签中；同时输出到左侧的代码面板上。可能你注意到左侧的代码面板中，代码是高亮的，可以用一个前端高亮工具来实现：力荐highlight.js（本站都是用它来高亮的）。

完整的实现请点击本页右上角的“参考代码”，只有不足40行JS，并不复杂！