用HTML+css画个爱心

好的，以下是用 HTML 和 CSS 画爱心的代码：

<div class="heart"></div>

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

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  display: block;
  width: 100px;
  height: 90px;
  background: red;
  border-radius: 50px 50px 0 0;
}

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

.heart::after {
  top: 0;
  left: 45px;
}

希望这个代码能够帮到你！

相关问题

用html+css画一个爱心

好的，很高兴能够帮你实现这个小需求。以下是 HTML 和 CSS 代码：

HTML 代码：

<div class="heart-box">
  <div class="heart"></div>
</div>

CSS 代码：

.heart-box {
  display: inline-block;
  position: relative;
  width: 100px;
  height: 90px;
}

.heart {
  position: absolute;
  top: 0;
  left: 35px;
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  transform: rotate(45deg);
  box-shadow: inset -20px 0px 0px 0px #e74c3c;
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #e74c3c;
  transform: rotate(45deg);
}

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

.heart::after {
  top: 0;
  left: 25px;
}

将上述 HTML 和 CSS 代码加入到你的项目中，即可看到一个用 HTML 和 CSS 画的爱心。

html +css 画一个爱心动画

以下是使用HTML和CSS画一个爱心动画的代码：

HTML：

<div class="heart"></div>

CSS：

.heart {
  position: relative;
  width: 100px;
  height: 90px;
}

.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 50px;
  top: 0;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
  
.heart:before {
  animation: beat 1s infinite;
}

@keyframes beat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

在这个例子中，我们使用一个div元素来画一个爱心。我们使用`:before`和`:after`伪元素来分别创建左和右边的两个半心形状，并使用`transform`旋转它们来形成一个完整的爱心。我们还使用`border-radius`属性来创建圆弧边缘，使它们看起来更像是卡通爱心。

最后，我们使用CSS动画来让爱心有跳动的效果。我们使用`@keyframes`关键字创建一个名为“beat”的动画，然后将其应用于`:before`伪元素。在这个动画中，我们使用`transform`属性来缩放爱心，使它看起来像是在跳动。