CSS使愛心下落的教程

.heart {
width: 50px;
height: 50px;
position: absolute;
top: -50px;
background-image: url("heart.png");
background-size: cover;
animation: down 2s linear infinite;
}
@keyframes down {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 500px);
}
}

在上述代碼中，我們通過給愛心圖片創建一個 CSS 類名 "heart" ，來設置愛心的樣式和動畫。

首先我們設置了圖片的寬、高和位置。然后我們添加了一個背景圖片，并使用 "background-size" 屬性將圖片拉伸以適合愛心的大小。

接下來，我們使用 "animation" 屬性來設置我們的動畫。我們使用 "down" 來命名它，并設置它的持續時間為 2 秒，速度為線性，并使其無限循環。

最后，我們通過使用 "@keyframes" 規則來定義它的動畫行為。我們在 0% 和 100% 的關鍵幀中設置了 "transform" 屬性，它在動畫的開始和結束時將愛心從上面移到下面。

現在我們就完成了實現使愛心下落的操作，是不是很簡單呢？