把你的心我的心串一串：用 CSS 创建跳动爱心

2023-09-29 11:12:57

用 CSS 绘制爱心：让你的爱意跃然屏幕

嗨，大家好！今天，我们踏上一个有趣的旅程，在这个旅程中，我们将用 CSS 来绘制一颗爱心，让它在屏幕上栩栩如生。准备好了吗？让我们开始吧！

构造爱心的基本形状

绘制爱心的第一步是创建两个圆形，它们将构成爱心的主体。我们可以使用 border-radius 属性来实现这一点，它可以给盒子赋予圆角。接下来，我们需要创建两个尖尖的耳朵。我们将使用 transform: skew() 变换来实现这一点。

.heart {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  position: relative;
}

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

.heart::before {
  transform: skew(-20deg) translate(-50%, -50%);
  left: 50%;
  top: 0;
}

.heart::after {
  transform: skew(20deg) translate(-50%, -50%);
  right: 50%;
  top: 0;
}

看看！我们现在有了两个圆形和两个尖尖的耳朵。

串联两颗爱心

现在，让我们将两颗爱心串联起来。我们将使用 position: absolute 和 transform: translate() 来实现这一点。

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.heart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.heart:first-child {
  margin-right: 20px;
}

太棒了！现在我们有了两颗相连的爱心。

让爱心动起来

为了让爱心更生动，我们可以给它加上跳动效果。我们将使用 animation 来实现这一点。

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

.heart {
  animation: heartbeat 1s infinite alternate;
}