前言
在之前的一篇文章《》中，我們講解了如何通過CSS實現心形圖案。
今天這篇文章我們換一個思路去實現這個心形，並且讓這個心形可以跳動，正如你看到女神那怦然心動的心跳一般。
文章的代碼已經放到github上了，感興趣的可以自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/border/heartBeat.html
CSS3
實現效果
首先我們來看看需要實現的效果圖。
實現效果
接下來我們一步步分析，這個效果是如何得到的。
心形圖案
我們將整個圖案拆開來看，主要是兩個圓+正方形。為了更好的展示拆分的效果，我們對不同區域設置不同的顏色和透明度。
拆分圖案
從上面的圖案可以看出，主要由以下三個圖形組成。
旋轉過的正方形。
左上方的圓形。
右上方的圓形。
正方形
正方形的CSS屬性很簡單，設置好寬度和高度，然後旋轉45度即可，為了讓心跳的效果更加明顯，我們通過filter屬性來設置圖案四周的陰影效果。
正方形CSS屬性
這裡給animation設置了heartbeat動畫，放在後面細講。
圓形CSS屬性
因為左上方和右上方兩個圓形是相同大小，它們有很多相似之處，這裡可以把它們公共的CSS屬性抽出來。最重要的就是設置border-radius。
公共CSS屬性
左右兩個CSS屬性只是在定位上有所差異，由於旋轉帶來的不同，左側的圓形需要使用left屬性來調整位置，而右側的圓形需要通過top屬性來調整位置。最終確定的定位信息如下。
位置CSS屬性
當我們將以上信息都寫完後，就可以得到以下的圖案了。
心形圖案
動畫效果
為了讓整個圖案有心跳的效果，不可避免的需要使用動畫。
通過@keyframes定義一個動畫，動畫需要有以下幾點：
主要是對圖案有放大和縮小的效果，這個可以通過scale屬性實現。
因為主圖案的旋轉，動畫中也必須填寫rotate屬性，保持和主圖案旋轉角度一樣。
因為心跳不是平穩進行，動畫效果在前面會進行的快一點，在後面會進行的慢一點，因此不是將動畫效果在50%時進行劃分，而是往前推移，我選擇的是25%
在不同時間段設置不同的透明度，讓心跳感更加真實。
通過以上的分析，得到的代碼如下。
動畫CSS屬性
至此所有部分的代碼都講解完畢，順利運行後就可以得到文章一開始的心跳效果了。
結束語
今天這篇文章換了一個思路去實現心形圖案，並且完成了心跳的效果，大家也可以動手嘗試下。
閱讀更多 coder分享 的文章
