本文共 2409 字，大约阅读时间需要 8 分钟。

的表白：七夕巧克力心由发表在

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

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

趁着七夕的月色，我们来搞定妹子的心吧！使用纯CSS来获得妹子的心其实并不难。。各位看官来看我的尝试：，如图：

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

   
    
     Love
    
   
   

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

妹子的心

妹子的心目测宽度在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]中。这样初始页面中的显示面板便只会有默认的样式。页面结构可能是这样的：

   
  
      
    
  
      
    
    
     
      
       Love
      
     
    
     
  
    
   
   
   

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

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

更多文章请访问