在網頁設計中，CSS動畫一直是設計師熱衷于探索的技術之一。今天，我們將教大家如何使用CSS動畫來制作一個可愛的心形圖案。

// 創建一個div元素并添加樣式
div {
width: 120px;
height: 120px;
position: relative;
}
// 創建一個偽元素
div:before {
content: "";
width: 60px;
height: 100px;
position: absolute;
top: -30px;
left: 30px;
border-radius: 50px 50px 0 0;
background-color: #f44336;
transform: rotate(-45deg);
animation: rotate-heart 2s ease-in-out infinite;
}
// 創建第二個偽元素
div:after {
content: "";
width: 60px;
height: 100px;
position: absolute;
top: -30px;
left: 30px;
border-radius: 50px 50px 0 0;
background-color: #f44336;
transform: rotate(45deg);
animation: rotate-heart 2s ease-in-out infinite;
}
// 動畫細節
@keyframes rotate-heart {
0% {
transform: rotate(-45deg) scale(1);
}
50% {
transform: rotate(-45deg) scale(0.6);
}
100% {
transform: rotate(-45deg) scale(1);
}
}

上述代碼便可制作出一個美麗的心形圖案，二者旋轉且不停的變換大小，形態獨特、優美，給人以視覺上的美感享受。

總的來說，CSS動畫不僅僅能夠美化網頁，還可以為用戶帶來更好的體驗感，讓網站變得更加炫酷有趣。我們鼓勵設計師們嘗試使用CSS動畫技術，做出更多神奇的效果。