我們可以使用 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中文網其他相關文章!