今天要介紹如何使用 CSS 創建一個心跳動畫

HTML

創建一個 div 元素，類別名為 heart，用於顯示愛心形狀

<div class="heart"></div>

CSS

1. 基本樣式設置

使用 Flexbox 將內容居中顯示，背景色設為淺灰色，並移除默認的邊距

body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background-color: #f0f0f0;
   margin: 0;
}

2. 愛心元素樣式

.heart {
   position: relative;
   width: 100px;
   height: 150px;
   animation: heart 1s infinite;
 }

• position : 偽元素可以根據 .heart 元素進行定位
• animation :
  • heart : 應用到 .heart 元素
  • infinite : 動畫周期為 1 秒，並且無限循環

3. 愛心的偽元素

a. 創建愛心的右側圓弧部分

使用 ::after 偽元素來創建愛心的右側圓弧部分

 .heart::after {
   content: '';
   position: absolute;
   left: 18px;
   width: 100px;
   height: 150px;
   background-color: red;
   border-radius: 50px 50px 0 0;
   transform: rotate(45deg);
 }

b. 創建愛心的左側圓弧部分

使用 ::before 偽元素創建愛心的左側圓弧部分，與 ::after 偽元素相互對應

 .heart::before {
   content: '';
   position: absolute;
   right: 18px;
   width: 100px;
   height: 150px;
   background-color: red;
   border-radius: 50px 50px 0 0;
   transform: rotate(-45deg);
 }

• position : 偽元素通過絕對定位，將 .heart 元素的相對定位精確放置
• border-radius : 將元素的兩個頂部角設置為圓角，形成愛心的弧形部分
• transform : 使兩部分對稱並組合成完整的愛心
  • 右側 : rotate(45deg)
  • 左側 : rotate(-45deg)

4. 心跳動畫

使用 @keyframes 定義動畫

@keyframes heart {
   0% {
      transform: scale(1) ;
   }
   25% {
      transform: scale(1.2) ;
   }
   50% {
      transform: scale(1) ;
   }
   75% {
      transform: scale(1.2) ;
   }
   100% {
      transform: scale(1) ;
   }
}

• 在動畫過程中，愛心會在 1 秒內從正常大小 (scale(1)) 擴展到 1.2 倍的大小，然後再縮回來，模擬心跳的效果
• 動畫的不同階段 (0%、25%、50%、75%、100%) 定義了愛心的縮放變化，形成了一個平滑的脈動效果

結果呈現