在CSS中,我們可以使用@keyframes
規(guī)則來創(chuàng)建動畫,從而實現(xiàn)跳動的心的樣式,以下是一個簡單的示例,展示了如何在CSS中實現(xiàn)跳動的心:
@keyframes heartbeat { 0% { transform: scale(1); } 20% { transform: scale(1.1); } 40% { transform: scale(1); } 60% { transform: scale(0.9); } 80% { transform: scale(1); } 100% { transform: scale(1); } } .heartbeat { position: relative; width: 100px; height: 80px; background-color: red; border-radius: 50%; transform: scale(1); animation: heartbeat 2s infinite; }
在這個示例中,我們定義了一個名為heartbeat
的動畫,它會在2秒內(nèi)無限循環(huán),在動畫的0%、20%、40%、60%、80%和100%關(guān)鍵幀中,我們通過transform
屬性來改變元素的縮放比例,從而實現(xiàn)跳動的效果。
我們創(chuàng)建一個名為.heartbeat
的類,并將它應用到一個元素上,這個元素會獲得動畫效果,并且它的寬度、高度、背景顏色和邊框半徑也會按照我們的要求來設置。
這只是一個簡單的示例,你可以根據(jù)自己的需求來調(diào)整動畫的效果和元素的樣式,你也可以參考其他***的CSS教程和文章來學習更多關(guān)于CSS動畫的知識。