情人节专属HTML+CSS+JS代码表白秘籍：让爱心跳动起来

2024-01-31 11:50:06

HTML - 爱的框架

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <div id="heart"></div>

  <script src="script.js"></script>
</body>
</html>

CSS - 爱的装饰

#heart {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 50%;
  background: #ff0000;
  animation: heartbeat 1s infinite alternate;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

JavaScript - 爱的律动

// 获取元素
const heart = document.getElementById("heart");

// 创建动画
const heartbeat = () => {
  heart.classList.add("heartbeat");

  setTimeout(() => {
    heart.classList.remove("heartbeat");
  }, 1000);
};

// 启动动画
setInterval(heartbeat, 1000);

动静结合，爱意升级！

为了让你的表白更加特别，我们还准备了动态爱心代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="heart"></canvas>

  <script src="script.js"></script>
</body>
</html>

#heart {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.heart-path {
  stroke: #ff0000;
  stroke-width: 10;
  fill: transparent;
  animation: heartbeat 1s infinite alternate;
}

@keyframes heartbeat {
  0% {
    d: path("M100,100 C160,0 240,0 280,100 S400,200 300,250 L200,350 L100,250 S0,200 80,100 Z");
  }
  50% {
    d: path("M100,100 C160,50 240,50 280,100 S400,150 300,200 L200,275 L100,200 S0,150 80,100 Z");
  }
  100% {
    d: path("M100,100 C160,0 240,0 280,100 S400,200 300,250 L200,350 L100,250 S0,200 80,100 Z");
  }
}

// 获取元素
const canvas = document.getElementById("heart");
const context = canvas.getContext("2d");

// 创建路径
const heartPath = new Path2D("M100,100 C160,0 240,0 280,100 S400,200 300,250 L200,350 L100,250 S0,200 80,100 Z");

// 绘制路径
context.stroke(heartPath);

// 创建动画
const heartbeat = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);

  context.strokeStyle = "#ff0000";
  context.lineWidth = 10;

  context.beginPath();
  context.moveTo(100, 100);

  context.bezierCurveTo(160, 0, 240, 0, 280, 100);
  context.bezierCurveTo(400, 200, 300, 250, 200, 350);
  context.bezierCurveTo(100, 250, 0, 200, 80, 100);

  context.closePath();

  context.stroke();

  setTimeout(() => {
    context.strokeStyle = "#ffffff";

    context.beginPath();
    context.moveTo(100, 100);

    context.bezierCurveTo(160, 50, 240, 50, 280, 100);
    context.bezierCurveTo(400, 150, 300, 200, 200, 275);
    context.bezierCurveTo(100, 200, 0, 150, 80, 100);

    context.closePath();

    context.stroke();
  }, 500);
};

// 启动动画
setInterval(heartbeat, 1000);