CSS3實現心跳效果

.heart {
width: 50px;
height: 50px;
position: relative;
transform: rotate(45deg);
color: #e74c3c;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
background-color: inherit;
}
.heart:before {
top: -25px;
}
.heart:after {
left: -25px;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.animation {
animation: heartbeat 1.5s infinite ease-in-out both;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
10% {
transform: scale(0.91);
}
17% {
transform: scale(0.98);
}
30% {
transform: scale(0.87);
}
45% {
transform: scale(0.98);
}
60% {
transform: scale(0.95);
}
75% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}

在CSS3中實現心跳效果并不復雜，只需要一些簡單的屬性和動畫即可。首先，以一個正方形為基礎，設置寬度和高度，同時旋轉45度使其成為菱形。接著，在這個元素的before和after偽元素中，分別創建一個圓形的邊框，同時讓它們絕對定位，位于正方形的兩個端點位置上。這樣，一個簡單的心形就完成了。

為了讓心形動起來，我們需要創建一個keyframes動畫，將逐步縮放它的大小，并讓它的形狀變得更像一個真正的心臟，這需要我們精確地計算每一步的縮放值。最后，將動畫應用于這個元素即可。

在HTML中，只需將這個元素放在一個容器內并為它添加一個class，然后將容器的高度設置為視口的高度并居中即可。這樣，就可以在網頁中展示一個可愛的心形跳動效果！