HTML做成一个粒子漩涡特效页面

大家好,今天制作制作一个粒子漩涡特效的页面!

先看具体效果:

要在一个单一的 index.html 页面中实现粒子漩涡特效,我们可以使用HTML、CSS和JavaScript(不需要外部库)。下面是一个简单的例子,展示了如何使用纯HTML和JavaScript来创建一个基本的粒子漩涡效果:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粒子漩涡特效</title>
<style>
  body {
    margin: 0;
    overflow: hidden;
    background-color: #000;
  }
  canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
</head>
<body>
<canvas id="particles"></canvas>

<script>
  const canvas = document.getElementById('particles');
  const ctx = canvas.getContext('2d');
  const particles = [];
  const particleCount = 200;
  const speed = 2;
  let centerX, centerY;

  // 初始化画布大小
  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    centerX = canvas.width / 2;
    centerY = canvas.height / 2;
  }

  // 初始化粒子
  function initParticles() {
    for (let i = 0; i < particleCount; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        size: Math.random() * 2 + 1,
        speedX: (Math.random() - 0.5) * 2,
        speedY: (Math.random() - 0.5) * 2,
        targetX: centerX,
        targetY: centerY,
      });
    }
  }

  // 更新粒子位置
  function updateParticles() {
    for (let i = 0; i < particles.length; i++) {
      const particle = particles[i];

      // 靠近漩涡中心
      particle.targetX = centerX + (Math.sin(i / 5 + Date.now() * 0.001) * 100);
      particle.targetY = centerY + (Math.cos(i / 7 - Date.now() * 0.001) * 100);

      // 吸引粒子到漩涡中心
      const angle = Math.atan2(particle.y - centerY, particle.x - centerX);
      const distance = Math.sqrt(Math.pow(particle.x - centerX, 2) + Math.pow(particle.y - centerY, 2));

      particle.speedX += (Math.cos(angle) / distance * 0.01) * (speed - particle.size);
      particle.speedY += (Math.sin(angle) / distance * 0.01) * (speed - particle.size);

      // 更新位置
      particle.x += particle.speedX;
      particle.y += particle.speedY;

      // 边界检测
      if (particle.x < 0) particle.x = canvas.width;
      if (particle.y < 0) particle.y = canvas.height;
      if (particle.x > canvas.width) particle.x = 0;
      if (particle.y > canvas.height) particle.y = 0;
    }
  }

  // 绘制粒子
  function drawParticles() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
    for (let i = 0; i < particles.length; i++) {
      const particle = particles[i];
      ctx.beginPath();
      ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
      ctx.fill();
    }
  }

  // 动画循环
  function animate() {
    requestAnimationFrame(animate);
    updateParticles();
    drawParticles();
  }

  // 初始化
  resizeCanvas();
  initParticles();
  animate();

  // 监听窗口大小变化
  window.addEventListener('resize', resizeCanvas);
</script>
</body>
</html>

这段代码定义了一个粒子系统,每个粒子都有位置、大小、速度和目标位置。在updateParticles函数中,我们根据粒子与漩涡中心的角度和距离来计算吸引力,并更新粒子的速度和位置。drawParticles函数负责在画布上绘制粒子。animate函数是动画循环,它会在每个帧中更新和绘制粒子。

注意:这个简单的例子没有实现复杂的漩涡效果和高级图形渲染,但它提供了一个基础的粒子系统,可以根据需要进行扩展和优化。

相关推荐
web行路人2 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂24 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石32 分钟前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程33 分钟前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫1 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.1 小时前
CSS3新增边框属性(五)
前端·css·css3
fruge2 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫2 小时前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js