CSS可以很方便地制作各種圖形，如下面的愛心，讓我們一起來看看如何實現吧！

.heart {
width: 80px;
height: 80px;
position: relative;
background-color: #f00;
border-radius: 50% 50% 0 0;
transform: rotate(45deg);
animation: beat 1s infinite;
}
.heart:before,
.heart:after {
content: '';
width: inherit;
height: inherit;
background-color: #f00;
position: absolute;
border-radius: 50%;
}
.heart:before {
top: -40px;
left: 0;
}
.heart:after {
top: 0;
left: 40px;
}
@keyframes beat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

以上是制作愛心的代碼，我們可以簡單解釋一下：

• .heart是代表愛心這個元素的類名，設置樣式的時候用得到；
• width和height為愛心的大小；
• position: relative;是為了讓偽元素:before和:after相對于它來定位；
• background-color: #f00;設置背景顏色為紅色，和愛情的顏色相符；
• border-radius: 50% 50% 0 0;讓元素兩側為圓形，頂部留出一個三角形的空白，構成完整的愛心形狀；
• transform: rotate(45deg);讓整個元素傾斜45度，形成現在看到的愛心形狀；
• animation: beat 1s infinite;讓元素實現一次放大縮小的動畫效果；
• .heart:before和.heart:after是愛心中兩個圓形，使用的偽元素，定位到正確的位置即可；
• @keyframes beat是動畫效果的定義，這里是1秒內讓元素放大和縮小，無限循環。

以上就是用CSS制作一個愛心的全部過程，希望大家喜歡！