原文地址：I Heart CSS
我傾向于認(rèn)為CSS是愛的語言。如果寫得好豪筝，它可以像詩歌一樣可愛。它有規(guī)則，有語義续崖，還像愛情一樣敲街，可以用多種形式表達(dá)。比如下面幾種我們在CSS中描述黑色的方式：
#0000#000rgb(0, 0, 0)hsla(360, 100%, 0%, 1)black
受情人節(jié)到來的啟發(fā)严望，我想多艇，通過展示多種用HTML和CSS制作愛心的方法來將這個(gè)想法延伸一下應(yīng)該會挺有趣。
普通背景圖像
我們可以請求一張心形圖片并把它設(shè)為某個(gè)元素的背景像吻。
.heart { background-image: url("heart.png"); background-size: 100%; background-repeat: no-repeat; }
用CodePen嘗試一下吧峻黍！
HTML和ASCII符號
對了，我們還可以使用HTML支持的符號實(shí)體結(jié)合CSS來制作愛心萧豆。
.heart { content: '♥'; }
用CodePen嘗試一下吧奸披！
CSS作圖
現(xiàn)實(shí)世界里的心臟是復(fù)雜的，但在CSS中涮雷，心臟無非就是兩個(gè)圓和一個(gè)旋轉(zhuǎn)過后的正方形。
多虧了
::before和::after偽元素轻局，這樣我們就能用一個(gè)元素畫出心形洪鸭。.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嘗試一下吧！
圖標(biāo)字體（Icon Font）
有人把圖標(biāo)字體拿去和行內(nèi)SVG進(jìn)行了全面的比較仑扑，在這兒它也能達(dá)到預(yù)期的效果览爵。我們需要多種字體格式的心形圖標(biāo)并通過@font-face應(yīng)用它，不過在這里我們將使用We Love Icon Fonts site生成它镇饮。
@import url(http://weloveiconfonts.com/api/?family=entypo); [class*="entypo-"]:before { font-family: 'entypo', sans-serif; color: red;}
用CodePen嘗試一下吧蜓竹！
行內(nèi)SVG
好吧，我承認(rèn)储藐，確切地說俱济，這不是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嘗試一下吧！
分享你的愛心
毋庸置疑克饶，還有許多制作愛心的方法酝蜒，不如將他們分享到原文的評論區(qū)，作者會將這些方法都加到CodePen的作品集嗒矾湃！
最后亡脑，當(dāng)然，一個(gè)些微遲到的情人節(jié)快樂送給大家！
本文由白馬根據(jù)Geoff Graham的《I Heart CSS》翻譯远豺，譯文中有個(gè)人的思考和理解奈偏，若有不當(dāng)或不好之處請同行朋友多多指點(diǎn)。如需轉(zhuǎn)載此譯文躯护，請注明原文出處：https://css-tricks.com/hearts-in-html-and-css/惊来。
作者：Geoff Graham
譯者：白馬
