下面是一个使用CSS制作心跳动画效果的示例代码:

HTML代码:
html

CSS代码:
css
@keyframes heartbeat {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.15);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}

.heartbeat {
width: 100px;
height: 100px;
border-radius: 50%;
background: #ff4081;
animation: heartbeat 1s infinite;
}

在上述代码中,我们定义了一个名为`heartbeat`的CSS动画,使用`@keyframes`规则来指定动画的关键帧。关键帧的百分比定义了动画在不同时间点的状态。在这个例子中,我们将初始状态(0%)定义为`transform: scale(1)`和`opacity: 1`,中间状态(50%)定义为`transform: scale(1.15)`和`opacity: 1`,最终状态(100%)定义为`transform: scale(1)`和`opacity: 1`。然后,我们使用`animation`属性将这个动画应用到了`.heartbeat`类上,并指定动画的持续时间为1秒,并设置为无限循环。

这样,当你在浏览器中打开这个HTML文件时,你会看到一个心跳动画效果的圆圈。