jQuery+Html5实现唯美表白动画代码

以下是一个简单的jQuery和HTML5实现的表白动画代码：

HTML代码：

<div id="container">
  <canvas id="canvas"></canvas>
  <div id="text">我喜欢你</div>
</div>

CSS代码：

#container {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}
#canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#text {
  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -60px;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: all 2s ease-in-out;
}

JavaScript代码：

$(document).ready(function() {
  // 创建画布
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = 400;
  canvas.height = 400;

  // 设置渐变背景
  var gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
  gradient.addColorStop(0, '#feac5e');
  gradient.addColorStop(1, '#c779d0');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 创建心形路径
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, canvas.height / 2);
  ctx.bezierCurveTo(canvas.width / 2 + 50, canvas.height / 2 - 50, canvas.width / 2 + 90, canvas.height / 2 + 10, canvas.width / 2, canvas.height / 2 + 90);
  ctx.bezierCurveTo(canvas.width / 2 - 90, canvas.height / 2 + 10, canvas.width / 2 - 50, canvas.height / 2 - 50, canvas.width / 2, canvas.height / 2);
  ctx.closePath();

  // 填充心形路径
  ctx.fillStyle = '#fff';
  ctx.fill();

  // 显示文字
  $('#text').css('opacity', 1);
});

这段代码会在页面中创建一个带有渐变背景和心形路径的Canvas元素，并在心形路径中显示“我喜欢你”的文字。在加载页面时，文字会从透明度0到1渐变显示出来，呈现出唯美的表白动画。