原文地址：I Heart CSS

我倾向于认为CSS是爱的语言。如果写得好，它可以像诗歌一样可爱。它有规则，有语义，还像爱情一样，可以用多种形式表达。比如下面几种我们在CSS中描述黑色的方式：

• #0000
• #000
• rgb(0, 0, 0)
• hsla(360, 100%, 0%, 1)
• black

受情人节到来的启发，我想，通过展示多种用HTML和CSS制作爱心的方法来将这个想法延伸一下应该会挺有趣。

普通背景图像

我们可以请求一张心形图片并把它设为某个元素的背景。
.heart { background-image: url("heart.png"); background-size: 100%; background-repeat: no-repeat; }
用CodePen尝试一下吧！

HTML和ASCII符号

对了，我们还可以使用HTML支持的符号实体结合CSS来制作爱心。
.heart { content: '&#9829'; }
用CodePen尝试一下吧！

CSS作图

现实世界里的心脏是复杂的，但在CSS中，心脏无非就是两个圆和一个旋转过后的正方形。

CSS Heart
多亏了::before和::after伪元素，这样我们就能用一个元素画出心形。
.heart { background-color: red; display: inline-block; height: 30px; margin: 0 10px; position: relative; top: 0; transform: rotate(-45deg); width: 30px; } .heart:before, .heart:after { content: ""; background-color: red; border-radius: 50%; height: 30px; position: absolute; width: 30px; } .heart:before { top: -15px; left: 0; } .heart:after { left: 15px; top: 0; }
用CodePen尝试一下吧！

图标字体（Icon Font）

有人把图标字体拿去和行内SVG进行了全面的比较，在这儿它也能达到预期的效果。我们需要多种字体格式的心形图标并通过@font-face应用它，不过在这里我们将使用We Love Icon Fonts site生成它。
@import url(http://weloveiconfonts.com/api/?family=entypo); [class*="entypo-"]:before { font-family: 'entypo', sans-serif; color: red;}
用CodePen尝试一下吧！

行内SVG

好吧，我承认，确切地说，这不是CSS。不过，在CSS-Tricks，我们都爱SVG。HTML代码如下：
I <svg class="heart" viewBox="0 0 32 29.6"> <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2 c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/></svg> You
接着让我们加上心跳动画，就像是在一些CSS中洒下歉意。
.heart { fill: red; position: relative; top: 5px; width: 50px; animation: pulse 1s ease infinite, } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
用CodePen尝试一下吧！

分享你的爱心

毋庸置疑，还有许多制作爱心的方法，不如将他们分享到原文的评论区，作者会将这些方法都加到CodePen的作品集嗒！
最后，当然，一个些微迟到的情人节快乐送给大家！

本文由白马根据Geoff Graham的《I Heart CSS》翻译，译文中有个人的思考和理解，若有不当或不好之处请同行朋友多多指点。如需转载此译文，请注明原文出处：https://css-tricks.com/hearts-in-html-and-css/。
作者：Geoff Graham
译者：白马