愛心作為愛的象征，在網頁設計中也經常被使用。下面介紹一種用CSS畫出愛心的動圖代碼。

/*定義一個愛心的偽元素*/
.heart::before {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #FF3B58; /*設置愛心的顏色*/
border-radius: 50% 50% 0 0;
transform: rotate(45deg);
top: -25px;
left: 0;
}
.heart::after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #FF3B58;
border-radius: 50% 50% 0 0;
transform: rotate(45deg);
top: 0;
left: -25px;
}
/*將兩個偽元素疊在一起形成一個愛心*/
.heart {
position: relative;
width: 50px;
height: 50px;
animation: heartbeat 1s ease-in-out infinite; /*添加動畫效果*/
}
/*定義動畫*/
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}

通過將兩個旋轉45度的偽元素疊在一起，就可以形成一個完整的愛心形狀。通過添加動畫效果，可以使愛心動態跳動，增強視覺效果。