想让你的网站动起来吗？试试纯css打造的跳动爱心动画！无需javascript，无需库，只需css代码就能实现。
步骤一：创建爱心形状
首先，我们用CSS的::before和::after伪元素创建一个爱心：
.heart {
position: relative;
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-45deg);
margin: 50px auto;
}
.heart::before,
.heart::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.heart::before {
top: -50px;
left: 0;
}
.heart::after {
left: 50px;
top: 0;
}
大功告成！一个爱心形状出现了！接下来，让它跳动起来！
步骤二：添加跳动动画
立即学习“前端免费学习笔记（深入）”；
我们使用@keyframes规则来实现爱心的缩放动画：
@keyframes heartbeat {
0%, 100% { transform: scale(1) rotate(-45deg); }
50% { transform: scale(1.2) rotate(-45deg); }
}
.heart {
animation: heartbeat 1s infinite;
}
现在爱心开始有节奏地跳动了！
步骤三：微调动画效果
为了使动画更自然，我们调整一下动画的节奏：
@keyframes heartbeat {
0%, 100% { transform: scale(1) rotate(-45deg); }
30% { transform: scale(1.2) rotate(-45deg); }
60% { transform: scale(1) rotate(-45deg); }
80% { transform: scale(1.1) rotate(-45deg); }
}
.heart {
animation: heartbeat 1.2s infinite ease-in-out;
}
现在动画更加流畅，更像真实的心跳了。
完整代码:
Heartbeat Animation
动画效果展示：
总结:
CSS的强大之处在于，即使是简单的动画，也能轻松实现，无需依赖JavaScript。你可以根据自己的喜好调整颜色、大小和动画速度，创造出独一无二的爱心动画，应用于你的网站加载页面、情人节主题页面等。 快来试试吧！ ❤️
