CSS 彈跳的正方形動畫

這篇教學會使用 CSS 的旋轉、邊框圓角和虛擬元素，搭配 CSS 動畫的時間控制與方向，製作有趣的彈跳正方形動畫效果。

快速導覽：

• 製作正方形和陰影
• 製作彈跳的動畫
• 製作彈跳和旋轉的動畫

製作正方形和陰影

在畫面中放入一個 div，運用 CSS 的虛擬元素製作紅色大正方形與陰影，透過旋轉和絕對定位的方式將其排列如下圖，可按照個人喜好修飾，例如漸層色、邊框圓角等。

• 參考：rotate 旋轉、定位 position、邊框圓角 border-radius
• 線上展示：https://codepen.io/oxxo/pen/dPyMzaR

<!-- HTML 程式碼 -->
<div class="box"></div>

<!-- CSS 程式碼 -->
<style>
  .box {
    position: relative;  /* 讓虛擬元素定位有參考依據 */
    width: 150px;
    margin: 50px;
  }
  .box::before, .box::after {
    content: "";
    position: absolute;  /* 虛擬元素使用絕對定位 */
  }
  /* 大正方形 */
  .box::before {
    z-index: 2;
    top: 0;
    left: 25px;
    width: 100px;
    height: 100px;
    background: #f55;
    transform: rotate(45deg);  /* 順時鐘旋轉 45deg */
    border-radius: 5px;        /* 四個角落圓角半徑 5px */
  }
  /* 陰影 */
  .box::after {
    z-index: 1;
    width: 20px;
    height: 10px;
    top: 140px;
    left: 65px;
    background: #ccc;
    border-radius: 50%;        /* 四個角落圓角半徑 50% */
  }
</style>

製作彈跳的動畫

延伸上方範例，分別替正方形和陰影加入 CSS 動畫，為了讓正方形有「Q 度」，在動畫進度中調整碰到地面時，該圓角的半徑會變大，就能產生具有彈性效果的正方形 ( 根據不同的正方型大小，可能需要自行調整剛好碰到地面的位置 )，陰影的動畫較為簡單，只需要控制陰影位置和大小，當正方形往上時陰影變小，往下時陰影變大。

• 參考：CSS 動畫 animation
• 線上展示：https://codepen.io/oxxo/pen/bNGprzQ

<!-- HTML 程式碼 -->
<div class="box"></div>

<!-- CSS 程式碼 -->
<style>
  .box {
    position: relative;
    width: 150px;
    margin: 50px;
  }
  .box::before, .box::after {
    content: "";
    position: absolute;
  }
  .box::before {
    z-index: 2;
    top: 0;
    left: 25px;
    width: 100px;
    height: 100px;
    background: #f55;
    transform: rotate(45deg);
    border-radius: 5px;
    /* 動畫效果，反覆無限播放、加速度啟動 */
    animation: oxxo alternate infinite ease-in 0.4s;
  }
  .box::after {
    z-index: 1;
    width: 20px;
    height: 10px;
    top: 140px;
    left: 65px;
    background: #ccc;
    border-radius: 50%;
    /* 動畫效果，反覆無限播放、加速度啟動 */
    animation: shadow alternate infinite ease-in 0.4s;
  }
  @keyframes oxxo {
    0% {top: 0;}
    60% {border-radius: 5px;}  /* 圓角半徑 5px 持續到 60% */
    100% {
      top:45px;
      border-bottom-right-radius: 50px;  /* 碰到地面時圓角半徑變成 50% */
    }
  }

  @keyframes shadow {
    0% {
      left: 65px;
      width: 20px;
    }
    100% {
      left: 35px;
      width: 80px;
    }
  }
</style>

製作彈跳和旋轉的動畫

延伸上述範例，加入「旋轉」的轉換樣式，搭配「多重動畫」的做法，就能實現同時旋轉和彈跳的動畫效果。

• 參考：CSS 多重動畫的權重與順序
• 線上展示：https://codepen.io/oxxo/pen/zxYqdbq

<!-- HTML 程式碼 -->
<div class="box"></div>

<!-- CSS 程式碼 -->
<style>
  .box {
    display: inline-block;
    position: relative;
    width: 150px;
    margin: 50px;
  }
  .box::before, .box::after {
    content: "";
    position: absolute;
  }
  .box::before {
    z-index: 2;
    top: 0;
    left: 25px;
    width: 100px;
    height: 100px;
    background: #f55;
    transform: rotate(0);
    border-radius: 5px;
    /* 多重動畫，旋轉的效果不要前後反覆播放，並且設定為線性移動，時間 0.8 秒 為碰撞的兩倍 */
    animation: oxxo alternate infinite ease-in 0.4s,
    rotateBox infinite linear 0.8s;
  }
  .box::after {
    z-index: 1;
    width: 20px;
    height: 10px;
    top: 140px;
    left: 65px;
    background: #ccc;
    border-radius: 50%;
    animation: shadow alternate infinite ease-in 0.4s;
  }
  /*  旋轉動畫 */
  @keyframes rotateBox {
    0% {transform: rotate(0);}
    100% {transform: rotate(90deg);}
  }
  @keyframes oxxo {
    0% {top: 0;}
    60% {border-radius: 5px;}
    100% {
      top:45px;
      border-bottom-right-radius: 50px;
    }
  }

  @keyframes shadow {
    0% {
      left: 65px;
      width: 20px;
    }
    100% {
      left: 35px;
      width: 80px;
    }
  }
</style>

小結

這是只用 CSS 搭配一個 div 就能完成的小動畫，可以運用在各種載入效果或頁面小驚喜當中，如果有興趣還可以將其改良成多個正方形、圓形或三角形的彈跳效果。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～