CSS3 愛心跳動是一個相對比較簡單而又十分驚艷的效果，它讓我們的頁面看起來更加生動有趣。下面將帶您一起實現這個效果。

.heart {
position: relative;
width: 100px;
height: 90px;
transform: rotate(45deg);
transform-origin: center;
background: red;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background: red;
}
.heart:before {
top: -45px;
left: 0;
width: 45px;
height: 45px;
border-radius: 30px 0 0 0;
}
.heart:after {
top: 0;
left: 45px;
width: 45px;
height: 45px;
border-radius: 0 30px 0 0;
}
.heart:before {
transform: rotate(-45deg);
}
.heart:after {
transform: rotate(45deg);
}

上面代碼的核心是在一個 div 元素中繪制一個心形，并通過 :before 和 :after 腳本分別增加了半個心形的區域。這里利用了 CSS 的 transform 屬性實現了對單獨的心形進行旋轉。實現之后，只需要添加一個動畫效果，讓心形跳動即可：

@keyframes heartbeat {
0% { transform: scale(1); }
20% { transform: scale(1.1); }
40%, 100% { transform: scale(1); }
}
.heart {
animation: heartbeat 1s infinite ease-in-out;
}

上面的代碼使用 CSS3 的動畫效果讓心形跳動起來。動畫的細節可以根據自己的需求調節。至此，你已經實現了 CSS3 愛心跳動的效果，可以嘗試在你的頁面中進行應用了。