我們可以使用 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 從正方形制作彩虹心動畫？的詳細內容，更多請關注www.92cms.cn其它相關文章！
