HTML 愛心動畫是一種展示愛心圖案在網頁中動態滾動的設計方法，可以使網頁更具吸引力。以下是一個簡單的 HTML 愛心動畫代碼。
<html>
<head>
<style>
.heart {
background-color: #e91e63;
width: 50px;
height: 50px;
position: relative;
animation: pulse 1s ease-out infinite;
}
.heart:before,
.heart:after {
content: "";
background-color: #e91e63;
border-radius: 25px 25px 0 0;
height: 50px;
position: absolute;
width: 25px;
}
.heart:before {
left: 0;
top: -25px;
transform: rotate(-45deg);
}
.heart:after {
left: 25px;
top: -25px;
transform: rotate(45deg);
}
@keyframes pulse {
0% {
transform: scale(1);
}
25% {
transform: scale(1.1);
}
50% {
transform: scale(0.9);
}
75% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>在這個代碼中，我們使用了關鍵幀動畫將心形圖案進行了縮放，使其呈現出滾動的效果。同時，我們使用 position 屬性對圖案進行位置定位，以便我們能夠將它掛載在網頁的指定位置。
嘗試更改一些 CSS 屬性來優化您的 HTML 愛心動畫代碼。例如，更改顏色，尺寸和動畫速度。