css3实现心跳效果 |css写静态进度条

.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，然后将容器的高度设置为视口的高度并居中即可。这样，就可以在网页中展示一个可爱的心形跳动效果！