第一次寫博客，來記錄自己在前端上的成長，並且希望能夠借鑒到其他大神的經驗來提高自己的水平。這次打算用css來畫一個愛心並實現“愛心跳動”的功能，下面如果有表述不正確的敘述，歡迎各位大神前來指導~
css畫愛心並實現“愛心跳動”用到了以下相關知識點：背景圖片、定位、CSS3的animation、CSS3的border-radius、偽元素::before和::after
這個愛心可以由一個正方形和兩個圓形構成，先簡單用div畫出一個正方形，以藍色背景為例，在此，為了方便展示，我給正方形加上了一個margin，方便后面的展示。正方形如下圖所示：
然后我們需要給正方形左側和上側添加偽元素，就是給左側和上側添加兩個正方形，然后通過border-radius=50%將兩個正方形變成兩個圓形，然后定位移動兩個圓形的位置來調成愛心形狀。未調節兩圓形的圖形如下圖所示：
可能會疑惑為什么只有一個圓形？這是因為這兩個圓形重疊在一起了，所以我們需要靠定位來實現愛心的形狀，通過調試，我們調節后的愛心如下圖所示：
現在看是不是有點像愛心的形狀了，只要把藍色部分變成紅色就行，如下圖所示：
這樣一個愛心就出來啦！我們可以通過使用transform：rorate()來旋轉愛心，下面為旋轉后的愛心，如下圖所示：
通過這個方法，我們就可以隨意旋轉愛心的方向了，然后現在就是讓愛心跳動起來，就是讓愛心放大縮小這樣持續，我們可以用animation來操作，這個就不做圖片展示了，小伙伴們一會可以參考下面代碼自己操作一下。最后就是添加一張你喜歡的背景圖片，用background來添加，通過background-size：cover；來使背景圖片鋪滿整個頁面。這樣一顆紅色愛心跳動的效果就成功啦！所有的代碼如下所示，可供小伙伴們參考。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>css畫愛心</title> 9 <style> 10 body { 11 background: url("images/1.jpg") no-repeat; 12 background-size: cover; 13 14 } 15 16 .heart { 17 width: 200px; 18 height: 200px; 19 background-color: red; 20 position: relative; 21 margin: 100px auto; 22 animation: size 1s infinite; 23 animation-direction: alternate; 24 } 25 26 .heart::before, 27 .heart::after { 28 content: ""; 29 width: 200px; 30 height: 200px; 31 background-color: red; 32 position: absolute; 33 border-radius: 50%; 34 } 35 36 .heart::before { 37 left: -90px; 38 } 39 40 .heart::after { 41 top: -90px; 42 } 43 44 @keyframes size { 45 0% { 46 transform: scale(0.6) rotate(45deg); 47 } 48 49 100% { 50 transform: scale(1) rotate(45deg); 51 } 52 } 53 </style> 54 </head> 55 56 <body> 57 <div class="heart"></div> 58 59 </body> 60 61 </html>
以上就是css畫愛心及“愛心跳動”的源代碼了，有發現問題的小伙伴們可以留言~希望和大家一起在這里成長！