纯html+css实现的show花式爱心代码

最新推荐文章于 2024-01-24 16:42:20 发布

似梦初觉

最新推荐文章于 2024-01-24 16:42:20 发布

阅读量629

点赞数 1

分类专栏：编程开发文章标签： html javascript css

本文链接：https://blog.csdn.net/cdooow/article/details/128285429

版权

编程开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

纯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>