以下是一个简单的CSS和JavaScript实现的爱心动画效果：
HTML:
html
<div id="heart"></div>
CSS:
css
#heart {
  position: relative;
  width: 100px;
  height: 90px;
  background: red;
  transform: rotate(45deg);
  margin: 50px 30px;
}
#heart::before, #heart::after {
  content: "";
  position: absolute;
  top: 40px;
  width: 52px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  background: red;
}
#heart::before {
  left: 50px;
  transform: rotate(-45deg);
}
#heart::after {
  left: 0;
  transform: rotate(45deg);
}
JavaScript:
javascript
let scale = 1;
const speed = 0.1;
const heart = ElementById("heart");
function animate() {
  if (scale > 1.2 || scale < 0.8) {
    speed *= -1; // 反转速度方向，使爱心逐渐放大或缩小。
  } else {
    speed = 0; // 当爱心大小稳定时，停止动画。
  }
  scale += speed; // 更新爱心大小。
html动画效果
  ansform = `scale(${scale})`; // 应用更新后的爱心大小。
  requestAnimationFrame(animate); // 循环调用animate函数，实现动画效果。
}
animate(); // 启动动画。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。