資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 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>
現在，圓圈的顏色各不相同，我們保持這種方式以便區分它們。
現在，我們將為這個心形新增動畫。為此，我們將為心形新增運動，然後使用 `keyframes` 屬性更改顏色。每次出現新幀時，心形顏色都會發生變化。
建立的心形將發生變化，形成一個正方形，然後再次變回心形。我們將透過使用 `transform` 屬性來實現，以便正方形可以轉換為心形。現在我們已經討論了方法。
示例
在以下程式碼中，我們首先使用了與建立容器和心形相同的程式碼，然後添加了一些 `keyframes`，在其中我們從 0% 到 100% 設定顏色。每個 `keyframes` 中的顏色都會發生變化，這使得它看起來像正方形正在轉換為心形。讓我們看看輸出結果，以便我們瞭解使用程式碼後發生了什麼。
<!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 中的 `keyframes` 屬性來修改幀。
在本文中，我們學習瞭如何使用 CSS 建立一個動畫的彩虹心形，它每 3 秒改變一次顏色。
329 次瀏覽
