CSS3動畫愛心

.heart {
position: absolute;
width: 200px;
height: 200px;
transform: rotate(-45deg);
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 100px 100px 0 0;
}
.heart::before {
left: 0;
top: -100px;
background-color: #ff5b5f;
animation: heartAnim 2.5s ease-in-out infinite;
}
.heart::after {
left: 100px;
top: 0;
background-color: #1ea084;
animation: heartAnim 2.5s ease-in-out 0.5s infinite;
}
@keyframes heartAnim {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(0.8);
}
}

心形圖案一直是表達愛和感情的最經(jīng)典的符號之一，而在現(xiàn)代web設(shè)計中，使用CSS3動畫技術(shù)來制作愛心圖案也是非常流行的。本文將為您呈現(xiàn)一種用CSS3動畫制作愛心圖案的方法。

我們使用偽元素和旋轉(zhuǎn)轉(zhuǎn)換來創(chuàng)建紅色的心形元素，使用CSS3動畫效果使之平滑旋轉(zhuǎn)和縮放，從而形成一個非常真實的愛心圖案。

需要注意的是，這段CSS代碼應(yīng)該與一個HTML元素綁定，如div或span。在此僅供參考。