css制作心跳效果

使用CSS动画制作心跳效果

通过CSS的@keyframes和transform属性可以轻松实现心跳动画效果。以下是两种常见实现方式：

基础缩放动画

.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}

结合阴影增强效果

.pulse {
  width: 100px;
  height: 100px;
  background: #ff4757;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 71, 87, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
  }
}

实现心脏形状的跳动效果

若要创建真实心脏形状的跳动，可结合SVG和CSS动画：

SVG路径动画

<svg class="heart" viewBox="0 0 32 29.6">
  <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
  c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>

.heart {
  width: 100px;
  animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

优化动画性能的技巧

使用will-change属性提前告知浏览器元素会发生变化：

.heart {
  will-change: transform;
}

考虑使用prefers-reduced-motion媒体查询为运动敏感用户提供替代方案：

@media (prefers-reduced-motion: reduce) {
  .heartbeat {
    animation: none;
  }
}

这些方法均可通过调整关键帧百分比和缩放值来改变心跳的节奏和强度，实现从微妙到强烈的各种心跳效果。