用 CSS 從方形製作彩虹心動畫？-css教學-PHP中文網

首頁

web前端

css教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 09, 2023 am 09:01 AM

使用 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>

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

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