首頁  >  文章  >  web前端  >  用 CSS 從方形製作彩虹心動畫?

用 CSS 從方形製作彩虹心動畫?

WBOY
WBOY轉載
2023-09-09 09:01:02583瀏覽

使用 CSS 从正方形制作彩虹心动画?

我們可以使用 HTML、CSS 和 JavaScript 一起製作動畫,並且可以在網頁或網站上實作這些動畫。 CSS 提供了許多我們可以用來創建動畫的屬性,這就是為什麼建議使用 CSS 進行樣式設計,因為它為前端開發提供了強大的功能。

在本文中,我們將使用 CSS 創建一個每 3 秒改變顏色的心形,並使用一些動畫分兩步驟完成。

創造彩虹心的步驟

我們將為主體建立兩個不同的部分,然後建立兩個類,其中一個是正方形,另一個是容器。我們還將建立 CSS 部分,在其中向正文添加一些屬性,然後將要顯示的所有內容居中。我們將使用以下程式碼建立容器。

範例

在下面的範例中,我們添加了一些屬性並創建了動畫將在其中播放的心形。下面的程式碼給出了 HTML 和 CSS 程式碼的輸出。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Creating the container</title>
   <style>
      .contain {
         display: grid;
         height: 99vh;
         place-items: center;
      }
      .sqr {
         height: 9rem;
         width: 9rem;
         background-color: blue;
         transform: rotate(45deg);
      }
      .sqr::before {
         content: "";
         height: 100%;
         width: 99%;
         background-color: red;
         position: absolute;
         transform: translateY(-50%);
         border-radius: 49%;
      }
      .sqr::after {
         content: "";
         background-color: lightgreen;
         position: absolute;
         width: 99%;
         height: 99%;
         transform: translateX(-49%);
         border-radius: 50%;
      }
   </style>
</head>
<body>
   <div class="contain">
      <div class="sqr"></div>
   </div>
</body>
</html>

圓圈現在有不同的顏色,我們保持這種方式以便我們可以區分圓圈。

現在,我們將為這顆心設定動畫。為此,我們將為心臟添加運動,然後使用關鍵影格屬性變更顏色。每次出現新的框架時,心形的顏色都會改變。

所創造的心的運動會改變形成一個正方形,然後再變回形成一個心。我們將透過使用變換屬性來做到這一點,以便正方形可以轉變為心形。現在我們已經討論完了該方法。

範例

在下面的程式碼中,我們首先使用與製作容器和心形形狀相同的程式碼,然後添加一些關鍵幀,在其中設定從 0% 到 100% 的顏色。每個關鍵影格的顏色都會發生變化,使得方形看起來像是變成了心形。讓我們看一下輸出,以便我們了解使用程式碼後發生了什麼。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Creating the container</title>
   <style>
      .contain {
         display: grid;
         height: 99vh;
         place-items: center;
      }
      .sqr {
         height: 9rem;
         width: 9rem;
         background-color: grey;
         transform: rotate(45deg);
         animation: beater 3s linear infinite;
      }
      .sqr::before {
         content: "";
         height: 100%;
         width: 99%;
         background-color: maroon;
         position: absolute;
         transform: translateY(-50%);
         border-radius: 49%;
         animation: beater 3s linear infinite;
      }
      .sqr::after {
         content: "";
         background-color: yellow;
         position: absolute;
         width: 99%;
         height: 99%;
         transform: translateX(-49%);
         border-radius: 50%;
         animation: beater 3s linear infinite;
      }
      @keyframes beater {
         0% {
            background: red;
         }
         15% {
            background: orange;
         }
         30% {
            transform: scale(0.5);
            background: yellow;
         }
         45% {
            background: greenyellow;
         }
         60% {
            background: blue;
         }
         75% {
            background: indigo;
         }
         100% {
            background: violet;
         }
      }
   </style>
</head>
<body>
   <div class="contain">
      <div class="sqr"></div>
   </div>
</body>
</html>

最初我們的輸出看起來像這樣,一個正方形,然後在每一幀中它都會產生一種錯覺,即正方形正在轉變成心形,然後在轉換後它會再次循環並變成一個正方形,每個畫面都會變成不同的顏色框架的改變。完整的心臟看起來像這樣。

最後,我們可以從正方形中看到一顆完整的心。

結論

如今,網站中的動畫非常常見,這些動畫決定了網站的實際外觀和感覺。這些動畫的目的通常是吸引用戶或讓用戶輕鬆理解某些內容。 CSS 是一個非常強大的工具,只需幾行程式碼就可以建立這些動畫。動畫包含它們之間的幀,我們使用 CSS 中的關鍵幀屬性來更改幀。

在本文中,我們學習如何使用每 3 秒改變一次顏色的 CSS 從正方形創建動畫彩虹心。

以上是用 CSS 從方形製作彩虹心動畫?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除