CSS的表白：七夕巧克力心

Posted 2022-12-03 天码营

CSS的表白：七夕巧克力心由David发表在天码营 

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

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，并不复杂！

更多文章请访问天码营网站