iT邦幫忙

2025 iThome 鐵人賽

DAY 10
2
Modern Web

關於那些有趣的 CSS 效果系列 第 10

( Day 10 ) 純 CSS 彈跳的正方形動畫

  • 分享至 

  • xImage
  •  

高雄人應該都知道,文化中心旁的一新書局,有許多驚喜的捏捏樂舒壓小玩具,某天我正當擠壓得不亦樂乎,手中的正方體掉到了地上,看著這個 Q 彈的正方體,心想不如用純 CSS 來實現它掉下去的樣子??? 所以就寫了這篇文章 ( 並沒有 )

正文開始

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

CSS 教學 - CSS 彈跳的正方形動畫

製作正方形和陰影

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

<!-- 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 教學 - CSS 彈跳的正方形動畫 - 製作正方形和陰影

製作彈跳的動畫

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

<!-- 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 教學 - CSS 彈跳的正方形動畫 - 製作正方形彈跳的動畫

製作彈跳和旋轉的動畫

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

<!-- 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 教學 - CSS 彈跳的正方形動畫 - 製作正方形彈跳和旋轉的動畫

小結

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


上一篇
( Day 9 ) 純 CSS 漸層色的轉場與動畫
下一篇
( Day 11 ) 純 CSS 製作不規則形狀動畫
系列文
關於那些有趣的 CSS 效果35
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言