我們可以使用 HTML、CSS 和 JavaScript 一起制作動畫,并可以在網(wǎng)頁或網(wǎng)站上實現(xiàn)這些動畫。 CSS 提供了許多我們可以用來創(chuàng)建動畫的屬性,這就是為什么建議使用 CSS 進行樣式設(shè)計,因為它為前端開發(fā)提供了強大的功能。
在本文中,我們將使用 CSS 創(chuàng)建一個每 3 秒改變顏色的心形,并使用一些動畫分兩步完成。
創(chuàng)建彩虹心的步驟
我們將為主體創(chuàng)建兩個不同的部分,然后創(chuàng)建兩個類,其中一個是正方形,另一個是容器。我們還將創(chuàng)建 CSS 部分,在其中向正文添加一些屬性,然后將要顯示的所有內(nèi)容居中。我們將使用以下代碼創(chuàng)建容器。
示例
在下面的示例中,我們添加了一些屬性并創(chuàng)建了動畫將在其中播放的心形。下面的代碼給出了 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>
登錄后復(fù)制
圓圈現(xiàn)在具有不同的顏色,我們保持這種方式以便我們可以區(qū)分圓圈。
現(xiàn)在,我們將為這顆心設(shè)置動畫。為此,我們將為心臟添加運動,然后使用關(guān)鍵幀屬性更改顏色。每次出現(xiàn)新的框架時,心形的顏色都會改變。
所創(chuàng)造的心的運動會改變形成一個正方形,然后再變回形成一個心。我們將通過使用變換屬性來做到這一點,以便正方形可以轉(zhuǎn)變?yōu)樾男巍,F(xiàn)在我們已經(jīng)討論完了該方法。
示例
在下面的代碼中,我們首先使用與制作容器和心形形狀相同的代碼,然后添加一些關(guān)鍵幀,在其中設(shè)置從 0% 到 100% 的顏色。每個關(guān)鍵幀的顏色都會發(fā)生變化,使得正方形看起來像是變成了心形。讓我們看一下輸出,以便我們了解使用代碼后發(fā)生了什么。
<!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>
登錄后復(fù)制
最初我們的輸出看起來像這樣,一個正方形,然后在每一幀中它都會產(chǎn)生一種錯覺,即正方形正在轉(zhuǎn)變成心形,然后在轉(zhuǎn)換后它會再次循環(huán)并變成一個正方形,每幀都會變成不同的顏色框架的改變。完整的心臟看起來像這樣。
最后,我們可以從正方形中看到一顆完整的心。
結(jié)論
如今,網(wǎng)站中的動畫非常常見,這些動畫決定了網(wǎng)站的實際外觀和感覺。這些動畫的目的通常是吸引用戶或讓用戶輕松理解某些內(nèi)容。 CSS 是一個非常強大的工具,只需幾行代碼就可以創(chuàng)建這些動畫。動畫包含它們之間的幀,我們使用 CSS 中的關(guān)鍵幀屬性來更改幀。
在本文中,我們學(xué)習(xí)了如何使用每 3 秒改變一次顏色的 CSS 從正方形創(chuàng)建動畫彩虹心。
以上就是使用 CSS 從正方形制作彩虹心動畫?的詳細內(nèi)容,更多請關(guān)注www.92cms.cn其它相關(guān)文章!