当前位置：首页 > CSS

css制作跳动爱心

2026-03-12 07:25:58CSS

使用CSS制作跳动爱心

通过CSS的animation和transform属性可以实现一个跳动的爱心效果。以下是具体实现方法：

创建爱心形状

利用CSS的::before和::after伪元素组合成一个爱心形状：

.heart {
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(45deg);
  background-color: red;
}

.heart::before, .heart::after {
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}

.heart::before {
  top: -50px;
  left: 0;
}

.heart::after {
  top: 0;
  left: -50px;
}

添加跳动动画

使用@keyframes定义缩放动画，并通过animation属性应用：

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

.heart {
  animation: heartbeat 1s infinite;
}

完整HTML示例

将CSS与HTML结合，创建完整的跳动爱心：

<!DOCTYPE html>
<html>
<head>
<style>
.heart {
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(45deg);
  background-color: red;
  margin: 100px auto;
  animation: heartbeat 1s infinite;
}

.heart::before, .heart::after {
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}

.heart::before {
  top: -50px;
  left: 0;
}

.heart::after {
  top: 0;
  left: -50px;
}

@keyframes heartbeat {
  0% { transform: rotate(45deg) scale(1); }
  25% { transform: rotate(45deg) scale(1.1); }
  50% { transform: rotate(45deg) scale(1); }
  75% { transform: rotate(45deg) scale(1.1); }
  100% { transform: rotate(45deg) scale(1); }
}
</style>
</head>
<body>
<div class="heart"></div>
</body>
</html>