css animation heartbeat

CSS动画心跳效果（Heartbeat Animation），通常是指一种动态的效果，模拟心脏跳动的样子。通过CSS关键帧动画（@keyframes）结合元素的`animation`属性，可以创建出有规律、上下波动的线条，看起来就像心脏在屏幕上跳动。这种效果一般用于网页设计中的交互元素，增强用户体验。

下面是一个简单的CSS代码示例来创建这个效果：

.heartbeat {
  width: 4px;
  height: 50px;
  background-color: red;
  position: relative;
  animation: heartbeat 1s ease-in-out infinite;
}

@keyframes heartbeat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

在这个例子中，`.heartbeat`元素会在1秒内上移20px，然后返回原位，循环无限次，给人一种心脏跳动的感觉。