如何使用HTML和CSS創建黏性球動畫？-html教學-PHP中文網

如何使用HTML和CSS創建黏性球動畫？

PHPz

發布： 2023-08-28 10:21:06

轉載

1121 人瀏覽過

如何使用HTML和CSS創建黏性球動畫？

黏球動畫是一種使用HTML和CSS建立的動畫。此動畫樣式是透過使用關鍵影格指定動畫中不同點的CSS屬性值，然後將動畫套用到HTML元素來建立的。

Gooey balls是一種使用HTML和CSS創建的流行且視覺上吸引人的動畫風格。在這個動畫中，我們為一個圓形物件創建了一個平滑、流動和彈性的效果，使它看起來像一個由黏液製成的球。這種類型的動畫是為網站增添趣味和吸引力的好方法。透過以下步驟，我們可以輕鬆地在HTML和CSS中建立gooey balls動畫。

第1步-為黏球動畫建立HTML程式碼

首先，我們建立用於建立黏性球動畫的HTML結構。

第二步 - 新增CSS樣式

在這一步驟中，我們為球添加css樣式，使其看起來像一個圓圈。為了創建球，我們設定了球的寬度和高度，並將邊框半徑設為50%以使其成為圓形。

第3步：建立關鍵影格

在這裡，我們將為動畫創建關鍵影格。關鍵影格用於在動畫的不同點指定CSS屬性的值。

第四步：應用動畫

最後，我們將動畫應用在球上。

透過這些簡單的步驟，我們可以使用HTML和CSS輕鬆創建基本的黏球動畫。我們可以透過更改CSS屬性、關鍵影格和動畫計時的值來自訂動畫。

範例1

具有背景顏色變化的黏性球動畫。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .gooey-ball {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 50vh;
      }
      .ball {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         background-color: #40e0d0;
      }
      @keyframes gooey {
         0% { transform: scale(1); background-color: #40e0d0; }
         50% { transform: scale(1.5); background-color: #ff00ff; }
         100% { transform: scale(1); background-color: #40e0d0; }
      }
      .ball {
         animation: gooey 2s infinite ease-in-out;
      }
   </style>
</head>
   <body>
      <h3>Gooey Ball Animation with Background Color Change</h3>
      <div class="gooey-ball">
         <div class="ball"></div>
      </div>
   </body>
</html>

登入後複製

在上面的例子中，我們創造了一個不斷重複的球。

範例2

這裡是一個使用HTML和CSS創建帶有跳球的黏球動畫的範例。

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center; }
      .gooey-ball {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 70vh;
      }
      .ball {
         width: 100px;
         height: 100px;
         border-radius: 50%;
         background:radial-gradient(yellow, green, red);
      }
      @keyframes jump {
         0% {transform: translateY(0);}
         50% {transform: translateY(-50px);}
         100% {transform: translateY(0);}
      }
      .ball {
         animation: gooey 2s infinite ease-in-out, jump 2s infinite
         ease-in-out;
      }
   </style>
</head>
   <body>
      <h3>Gooey Ball Animation with a Jumping ball</h3>
      <div class="gooey-ball">
         <div class="ball"></div>
      </div>
   </body>
</html>

登入後複製

在上面的例子中，我們定義了gooey並跳轉了兩個關鍵影格。黏糊糊的關鍵影格將球的比例從其原始大小動畫化為原始大小的1.5倍並返回。跳躍關鍵影格對球的垂直位置進行動畫處理，使其上下跳躍。這兩個動畫都應用於球元素，持續時間為2秒，並具有緩慢緩出效果。