CSS 心跳是一種常見(jiàn)的動(dòng)畫效果，適用于很多場(chǎng)景，比如按鈕的懸浮效果、圖標(biāo)的提示效果等等。它通過(guò) CSS 的 transition 和 transform 屬性實(shí)現(xiàn)，代碼如下：

.heart-beat {
display: inline-block;
transition: transform 0.2s ease-in-out;
transform: scale(1);
}
.heart-beat:hover {
transform: scale(1.2);
}

以上代碼中，我們先設(shè)置了一個(gè) .heart-beat 類，它是一個(gè) inline-block 元素，并設(shè)置了 transition 屬性。transition 屬性指定了 CSS 屬性過(guò)渡時(shí)的動(dòng)畫效果，其中 0.2s 是變換時(shí)間，ease-in-out 是動(dòng)畫效果（即變慢再變快）。

接著，在:hover 偽類下，我們?cè)O(shè)置了 .heart-beat 的 transform 屬性，將其變換比例從 1 改變到 1.2，即圖標(biāo)變大一些，達(dá)到心跳的效果。

我們也可以使用 @keyframe 關(guān)鍵幀來(lái)實(shí)現(xiàn)更復(fù)雜的心跳效果，代碼如下：

.heart-pulse {
position: relative;
display: inline-block;
animation: heart-pulse 1s infinite alternate;
}
@keyframes heart-pulse {
from {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
}
to {
transform: scale(1.1);
box-shadow: 0 0 0 20px rgba(255, 0, 0, 0);
}
}

以上代碼中，我們創(chuàng)建了一個(gè) .heart-pulse 類，并設(shè)置了 position: relative 屬性，以便后面設(shè)置 ::before 偽元素的絕對(duì)位置。animation 屬性指定了關(guān)鍵幀的名稱和動(dòng)畫效果，它可以持續(xù)一秒，并且無(wú)限循環(huán)，且每次從前或后交替開(kāi)始。

接著，我們通過(guò) @keyframe 定義 heart-pulse 關(guān)鍵幀，設(shè)置其開(kāi)始狀態(tài)和結(jié)束狀態(tài)。其中，開(kāi)始狀態(tài)為初始大小和紅色陰影，結(jié)束狀態(tài)為稍大的大小和透明陰影。

總的來(lái)說(shuō)，CSS 心跳是一種簡(jiǎn)單但強(qiáng)大的動(dòng)畫效果，讓你的頁(yè)面更加生動(dòng)。無(wú)論是基礎(chǔ)的 transition/transform 還是復(fù)雜的關(guān)鍵幀動(dòng)畫，都可以讓你的網(wǎng)站更加出色。