心跳效果可以給頁面增加一點活力，也可以用來表示一些狀態(tài)變化。下面是使用CSS制作心跳效果的方法。
/* 設置動畫的關鍵幀 */
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2, 0.8);
}
100% {
transform: scale(1);
}
}
/* 設置對象的樣式和動畫 */
.heartbeat {
animation: heartbeat 1s ease-in-out infinite;
display: inline-block;
}
/* 在HTML中使用 */
<p>這是一個心跳效果：<span class="heartbeat"></span></p>上述代碼中，我們使用了CSS的關鍵幀（@keyframes）和動畫（animation）特性。首先定義一個名為"heartbeat"的關鍵幀，這個關鍵幀在0%、50%、100%時分別改變了縮放比例。再將這個關鍵幀應用于類名為"heartbeat"的元素，設置動畫時長為1秒，使用ease-in-out來實現緩動效果，同時設置重復次數為無限。
最后，在HTML中使用一個span元素來承載類名為"heartbeat"的CSS樣式，即可實現一個簡單的心跳效果。
上一篇css制作城市選擇
下一篇css制作彈出驗證窗口