HTML、CSS、JS 演绎生动活泼的卡通湖面日出动画

2024-01-05 18:31:01

如今的网页设计中，动画效果无处不在，它为用户带来了更加丰富的交互体验。HTML、CSS 和 JavaScript 作为网页开发的三剑客，也能轻松实现生动活泼的动画效果。本文将向你展示如何使用这三者来实现一个卡通湖面日出的动画特效。

实现步骤

1. 搭建 HTML 骨架

首先，创建一个 HTML 文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <style>
    body {
      background: #000;
    }
  </style>
</head>
<body>
  <div id="lake"></div>
</body>
</html>

2. 绘制湖面

接下来，在 <div> 中绘制湖面。这里我们使用一个 <canvas> 标签，并通过 JavaScript 来绘制。在 <head> 中添加以下 JavaScript 代码：

const canvas = document.getElementById('lake');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.fillStyle = '#426399';
ctx.fillRect(0, 0, canvas.width, canvas.height);

3. 绘制太阳

然后，绘制太阳。同样使用 <canvas> 标签，并在 JavaScript 中绘制：

// 太阳半径
const radius = 100;

// 太阳中心点坐标
const centerX = canvas.width / 2;
const centerY = canvas.height / 4;

// 绘制太阳
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.fillStyle = '#FFD300';
ctx.fill();

4. 动画效果

最后，实现动画效果。这里我们使用 requestAnimationFrame 来实现。在 JavaScript 中添加以下代码：

let angle = 0;

function animate() {
  requestAnimationFrame(animate);

  // 更新太阳位置
  angle += 0.01;
  const x = centerX + radius * Math.cos(angle);
  const y = centerY + radius * Math.sin(angle);

  // 绘制太阳
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fillStyle = '#FFD300';
  ctx.fill();
}

animate();