CSS愛心動畫是一種非常流行的網頁設計元素，它可以為網頁增加浪漫感和溫馨感。下面我們來看一下如何通過CSS實現愛心動畫。

/* 愛心樣式 */
.heart {
position: relative;
width: 25px;
height: 25px;
transform: rotate(45deg);
background: #fe6161;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 25px;
height: 25px;
background: #fe6161;
}
.heart::before {
top: -17px;
left: 0;
border-radius: 25px 25px 0 0;
}
.heart::after {
top: 0;
left: -17px;
border-radius: 0 25px 25px 0;
}
/* 動畫效果 */
.heart:hover {
animation: beat 0.7s infinite alternate;
}
@keyframes beat {
0% { transform: scale(1) }
100% { transform: scale(1.2) }
}

首先，我們定義了一個類名為“heart”的樣式，用來描述愛心的形狀和顏色。接著，我們在愛心的前面和后面分別創建了偽元素，并使用絕對定位將它們放在愛心左上方和右下方。這些偽元素也具有與愛心相同的樣式，因此它們與愛心一起形成了一個據難的整體。

我們為愛心添加了一個:hover偽類，當鼠標懸停在愛心上時，將啟用一個名為“beat”的動畫效果。這個動畫通過CSS的@keyframes定義，實現了一個類似心跳的縮放效果。當愛心在縮放過程中，偽元素與愛心整體協調工作，使其看起來像是一個動態的整體。

總之，CSS愛心動畫簡單易用，可以輕松為你的網頁增添更多的情感元素。只要善于運用，它將成為你網頁設計的好幫手。