一个心脏跳动效果的按钮

关注

原创最新推荐文章于 2026-05-21 05:27:08 发布 323 阅读 AI 写同款· GEO 优化 ›

Unity Shader实现跳动的心脏通过shader控制定点，实现心跳效果。阅读详情

<button class="heartbeat-button">点击我</button>

.heartbeat-button {
  display: inline-block;
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #f44336;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  animation: heartbeat 1.5s infinite;
}

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

.heartbeat-button:before,
.heartbeat-button:after {
  content: '';
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  border-radius: 50%;
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: -1;
  animation: heartbeat-before 1.5s infinite;
}

@keyframes heartbeat-before {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.heartbeat-button:hover:before,
.heartbeat-button:hover:after {
  animation-play-state: paused;
}