纯html+css实现的show花式爱心代码_用httml+css打爱心的代码

纯html+css实现的，鼠标移动到爱心上会跳动。

<style>
.heart {
  position: relative;
  width: 100px;
  height: 90px;
  margin: 30px auto;
}
.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:hover {
  animation: beat 0.5s infinite alternate;
}
@keyframes beat {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}
</style>
 
<div class="heart"></div>