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

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

原创最新推荐文章于 2024-01-24 16:42:20 发布 · 722 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #css

编程开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的HTML和CSS实现的爱心图标，在鼠标悬停时会产生跳动的动画效果。通过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>