七夕到啦！然而我是程序員，就來給程序員解決一些煩惱吧！程序員最不理解的兩件事：

別人的代碼

妹子的心

趁著七夕的月色，我們來搞定妹子的心吧！使用純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，并不復雜！

版權聲明本文由 Harttle創作，轉載需署名作者且注明文章出處參考代碼

要獲取本文的參考代碼，請訪問：?https://www.tianmaying.com/tutorial/css-heart/repo

from:?https://www.tianmaying.com/tutorial/css-heart

總結

以上是生活随笔為你收集整理的CSS的表白：七夕巧克力心的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。