CSS3中有一個(gè)非常棒的特性——animation，它可以實(shí)現(xiàn)很多有趣的動畫效果，比如心臟跳動效果。

/* 心臟跳動動畫 */
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* 構(gòu)造心形 */
.heart {
position: relative;
width: 100px;
height: 90px;
transform: rotate(-45deg);
top: -20px;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background-color: red;
border-radius: 50px 50px 0 0;
}
.heart:before {
top: 0;
left: 50px;
width: 50px;
height: 50px;
}
.heart:after {
top: -50px;
left: 0;
width: 50px;
height: 50px;
}
.heart:hover:before,
.heart:hover:after {
animation: heartbeat 0.8s ease-in-out infinite;
}

實(shí)現(xiàn)心臟跳動的關(guān)鍵在于使用了CSS3的關(guān)鍵幀特性（@keyframes）和動畫屬性（animation）。

首先，我們需要定義一個(gè)名為“heartbeat”的關(guān)鍵幀，它包含三個(gè)狀態(tài)（0%，50%，100%），用于控制心形縮放的大小。

然后，構(gòu)造一個(gè)心形圖案，通過:before和:after偽類分別繪制兩個(gè)圓形，并利用border-radius屬性畫出心形效果。最后，在:hover狀態(tài)下開啟動畫效果。

通過以上代碼，我們就能夠很容易地實(shí)現(xiàn)一個(gè)非常有趣的心臟跳動效果。使用animation屬性可以為網(wǎng)頁增添更多的生動性和趣味性，讓用戶感受到更加豐富的網(wǎng)頁體驗(yàn)。