【全网首发】CSS+Canvas 3D粒子动画+爱心爆破！女神节必学特效（附完整源码）

本文链接：https://blog.youkuaiyun.com/misschengispink/article/details/146062398

每年三八节都是红色渐变+花朵飘落？2025年了，是时候用Canvas整点硬核活了！保证学完后，你的作品能在朋友圈杀出重围！快附上献给你心爱的女神吧~
ps：小白创建文件名为name.html再把代码复制进文件里，再去浏览器运行就可以运行啦~

一、【焰舞金砂】三维粒子流体+七彩烟花

📺 效果暴击

请添加图片描述

💻 代码结构

<!DOCTYPE html>
<html>

<head>
  <title>七彩祥云女神节特效</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: #000;
    }

    #canvas {
      position: fixed;
      top: 0;
      left: 0;
    }

    .banner {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #ff69b4;
      font: bold 5em '微软雅黑';
      text-shadow: 0 0 20px #ff1493;
      z-index: 100;
      mix-blend-mode: screen;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <div class="banner">女神节快乐</div>

  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    let width = canvas.width = window.innerWidth;
    let height = canvas.height = window.innerHeight;

    // 星尘粒子系统
    class StarParticle {
      constructor() {
        this.reset();
      }

      reset() {
        // 极坐标分散算法
        const angle = Math.random() * Math.PI * 2;
        const radius = Math.random() * Math.min(width, height) / 1;
        this.x = width / 1 + Math.cos(angle) * radius;
        this.y = height / 2 + Math.sin(angle) * radius;
        this.vx = Math.random() * 2 - 6;
        this.vy = Math.random() * 2 - 1;
        this.alpha = 0.5 + Math.random() * 0.5;
        this.size = 1 + Math.random() * 3;
        this.freq = 0.01 + Math.random() * 0.02;
      }

      update() {
        this.x += this.vx;
        this.y += this.vy;
        this.alpha = 0.3 + Math.abs(Math.sin(Date.now() * this.freq)) * 0.5;

        if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
          this.reset();
        }
      }

      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = `hsla(60, 100%, 70%, ${this.alpha})`;
        ctx.fill();
      }
    }

    // 七彩烟花系统
    class Firework {
      constructor() {
        this.reset();
        this.particles = [];
      }

      reset() {
        this.x = Math.random() * width;
        this.y = height + 100;
        this.phase = 0; // 0上升 1爆炸
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
        this.speed = 3 + Math.random() * 3;
        this.exploded = false;
      }

      explode() {
        // 祥云粒子算法
        for (let i = 0; i < 200; i++) {
          const angle = Math.random() * Math.PI * 2;
          const speed = Math.random() * 5 + 2;
          this.particles.push({
            x: this.x,
            y: this.y,
            vx: Math.cos(angle) * speed,
            vy: Math.sin(angle) * speed,
            life: 1,
            size: 2 + Math.random() * 3
          });
        }
      }

      update() {
        if (this.phase === 0) {
          this.y -= this.speed;
          if (this.y < height / 2 + Math.random() * 100) {
            this.phase = 1;
            this.explode();
          }
        } else {
          this.particles.forEach(p => {
            p.x += p.vx;
            p.y += p.vy;
            p.vy += 0.01;
            p.vx *= 1.0;
            p.vy *= 1.0;
            p.life -= 0.01;
          });
          this.particles = this.particles.filter(p => p.life > 0);
        }
      }

      draw() {
        if (this.phase === 0) {
          ctx.beginPath();
          ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.fill();
        } else {
          this.particles.forEach(p => {
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2);
            ctx.fillStyle = `hsla(${Math.random() * 360}, 100%, 70%, ${p.life})`;
            ctx.fill();
          });
        }
      }
    }

    // 初始化系统
    const stars = Array.from({ length: 500 }, () => new StarParticle());
    const fireworks = [];

    // 自动烟花发射器
    setInterval(() => {
      if (fireworks.length < 5) {
        fireworks.push(new Firework());
      }
    }, 2000);

    // 动画循环
    function animate() {
      ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
      ctx.fillRect(0, 0, width, height);

      // 绘制星尘粒子
      stars.forEach(star => {
        star.update();
        star.draw();
      });

      // 绘制烟花
      fireworks.forEach((firework, index) => {
        firework.update();
        firework.draw();
        if (firework.phase === 1 && firework.particles.length === 0) {
          fireworks.splice(index, 1);
        }
      });

      requestAnimationFrame(animate);
    }

    // 窗口适配
    window.addEventListener('resize', () => {
      width = canvas.width = window.innerWidth;
      height = canvas.height = window.innerHeight;
      stars.forEach(star => star.reset());
    });

    animate();
  </script>
</body>

</html>

二、【天赐金霖】十字星闪烁+渐变背景+文字发光+enjoy掉落

📺 效果暴击

请添加图片描述

💻 代码结构

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>女神节豪华特效</title>
  <style>
    :root {
      --gold: #FFD700;
      --diamond: #4EE2EC;
      --ruby: #FF3860;
    }

    body,
    html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: linear-gradient(45deg, #ff6b6b, #ffc371, #ffeb3b, #8bc34a);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
      font-family: 'Arial', sans-serif;
    }

    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }

    .container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    /* 文字容器确保在最顶层 */
    .text-container {
      position: relative;
      z-index: 3;
    }

    /* 下落元素通用样式 */
    .falling-item {
      position: absolute;
      pointer-events: none;
      user-select: none;
      animation-timing-function: linear;
      z-index: 2;
      top: -50px;
    }

    /* 不同元素样式 */
    .gold {
      color: var(--gold);
      animation: fall 8s linear infinite;
    }

    .diamond {
      color: var(--diamond);
      animation: fall 10s linear infinite;
    }

    .ruby {
      color: var(--ruby);
      animation: fall 12s linear infinite;
    }

    .coin {
      color: #FFD700;
      animation: fall 6s linear infinite;
    }

    /* 十字星样式 */
    .star {
      position: absolute;
      color: white;
      z-index: 1;
      animation: twinkle 1.5s infinite;
      opacity: 0;
      font-size: 20px;
    }

    /* 关键帧动画 */
    @keyframes fall {
      0% {
        transform: translateY(-50px) rotate(0deg);
      }

      100% {
        transform: translateY(100vh) rotate(360deg);
      }
    }

    @keyframes twinkle {
      0% {
        opacity: 0;
        transform: scale(0);
      }

      50% {
        opacity: 1;
        transform: scale(1);
      }

      100% {
        opacity: 0;
        transform: scale(0);
      }
    }

    /* 文字效果 */
    h1.glow {
      font-size: 4rem;
      color: #fff;
      text-shadow: 0 0 10px #fff,
        0 0 20px #ff6b6b,
        0 0 30px #ff3860;
      animation: glow 1.5s ease-in-out infinite alternate;
      position: relative;
      margin: 0;
    }

    @keyframes glow {
      to {
        text-shadow: 0 0 20px #fff,
          0 0 30px #ff6b6b,
          0 0 40px #ff3860,
          0 0 50px #ff3860;
      }
    }

    .subtitle {
      font-size: 1.5rem;
      color: #fff;
      margin-top: 1rem;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="text-container">
      <h1 class="glow">🎉 女神节快乐 🎉</h1>
      <p class="subtitle">愿您如钻石般璀璨，如黄金般珍贵</p>
    </div>
  </div>

  <script>
    // 创建下落元素（修正版）
    function createFallingItem(className, symbol, size, duration) {
      const item = document.createElement('div');
      item.className = `falling-item ${className}`;
      item.textContent = symbol;
      item.style.left = `${Math.random() * 100}%`;
      item.style.fontSize = `${size}px`;
      item.style.animationDuration = `${duration}s`;
      document.body.appendChild(item);

      // 自动移除元素
      setTimeout(() => item.remove(), duration * 1000);
    }

    // 创建十字星（修正版）
    function createStar() {
      const star = document.createElement('div');
      star.className = 'star';
      star.textContent = '󠀪󠀪✧';
      star.style.left = `${Math.random() * 100}%`;
      star.style.top = `${Math.random() * 100}%`;
      star.style.fontSize = `${Math.random() * 20 + 10}px`;
      document.body.appendChild(star);

      setTimeout(() => star.remove(), 1500);
    }

    // 生成不同元素（调整频率）
    setInterval(() => createFallingItem('gold', '💰', 40, 8), 300);
    setInterval(() => createFallingItem('diamond', '💎', 35, 10), 500);
    setInterval(() => createFallingItem('ruby', '🫧', 30, 12), 700);
    setInterval(() => createFallingItem('coin', '🪙', 28, 6), 200);
    setInterval(() => createFallingItem('coin', '🍃', 28, 6), 600);
    setInterval(() => createFallingItem('coin', '🍂', 28, 6), 100);

    // 生成十字星（调整频率）
    setInterval(createStar, 100);

    // 移除冲突的canvas代码
  </script>
</body>

</html>

三、【绮罗流萤】彩带+萤火虫+花朵摇曳+爱心

📺 效果暴击

女神节3D粒子特效演示

💻 代码结构

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      height: 100vh;
      background: linear-gradient(to bottom, #00151c, #003a4d);
      overflow: hidden;
      touch-action: none;
    }
    .ground {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 150px;
      background: linear-gradient(to top, #2c5f2d, transparent);
    }
    .flower {
      position: absolute;
      bottom: 0;
      font-size: 30px;
      animation: sway 4s ease-in-out infinite;
      transform-origin: bottom center;
    }
    /* 新增文字容器样式 */
    .text-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 4;
      padding: 40px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 0 30px rgba(255, 105, 180, 0.3);
    }
    .message {
      position: relative;
      margin: 0;
      font: bold 4em '微软雅黑';
      color: #fff;
      text-shadow: 0 0 20px #ff69b4;
      animation: textScale 2s ease-in-out infinite;
    }
    /* 新增爱心环绕效果 */
    .heart-ring {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    .heart {
      position: absolute;
      animation: heartBeat 1.5s infinite;
      opacity: 0;
      font-size: 0;
    }
    .heart::before {
      content: '❤';
      position: absolute;
      font-size: 30px;
      color: #ff3366;
      filter: drop-shadow(0 0 10px #ff69b4);
    }
    @keyframes textScale {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }
    }

    @keyframes heartBeat {
      0% {
        opacity: 0;
        transform: scale(0) translate(0, 0);
      }

      30% {
        opacity: 1;
        transform: scale(1.2) translate(0, -10px);
      }

      60% {
        transform: scale(0.9) translate(0, 5px);
      }

      100% {
        opacity: 0;
        transform: scale(0) translate(0, 20px);
      }
    }

    @keyframes sway {

      0%,
      100% {
        transform: rotate(-3deg) translateY(0);
      }

      50% {
        transform: rotate(3deg) translateY(-5px);
      }
    }
  </style>
</head>

<body>
  <canvas id="mainCanvas"></canvas>
  <div class="text-container">
    <div class="message">女神节快乐</div>
    <div class="heart-ring" id="heartRing"></div>
  </div>
  <div class="ground"></div>

  <script>
    const canvas = document.getElementById('mainCanvas');
    const ctx = canvas.getContext('2d');
    let width = canvas.width = window.innerWidth;
    let height = canvas.height = window.innerHeight;

    // 初始化花朵
    const flowers = ['🌹', '🌷', '🌸', '💐'];
    for (let i = 0; i < 20; i++) {
      const flower = document.createElement('div');
      flower.className = 'flower';
      flower.style.left = `${Math.random() * 100}%`;
      flower.style.fontSize = `${Math.random() * 30 + 20}px`;
      flower.innerHTML = flowers[Math.floor(Math.random() * flowers.length)];
      document.body.appendChild(flower);
    }

    // 增强版流星粒子系统
    class StarParticle {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.angle = Math.random() * Math.PI / 4 + Math.PI / 8;
        this.speed = Math.random() * 8 + 4;
        this.size = Math.random() * 3 + 2;
        this.alpha = 1;
        this.trail = [];
      }

      update() {
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed;
        this.alpha -= 0.02;

        this.trail.push({ x: this.x, y: this.y, alpha: this.alpha });
        if (this.trail.length > 10) this.trail.shift();
      }

      draw() {
        this.trail.forEach((p, i) => {
          ctx.beginPath();
          ctx.arc(p.x, p.y, this.size * (1 - i / 10), 0, Math.PI * 2);
          ctx.fillStyle = `hsla(55, 100%, 70%, ${p.alpha * (1 - i / 10)})`;
          ctx.fill();
        });
      }
    }

    // 增强版彩带粒子系统（带轨迹残留）
    class Ribbon {
      constructor() {
        this.reset();
        this.trail = [];
      }

      reset() {
        this.x = Math.random() * width;
        this.y = -50;
        this.angle = Math.random() * Math.PI / 4 - Math.PI / 8;
        this.speed = Math.random() * 2 + 1; // 降低速度
        this.length = Math.random() * 80 + 30; // 缩短长度
        this.curve = Math.random() * 0.08 - 0.04;
        this.color = `hsl(${Math.random() * 60 + 300}, 60%, 50%)`;
        this.trail = [];
      }

      update() {
        // 记录轨迹点
        this.trail.push({ x: this.x, y: this.y, alpha: 1 });
        if (this.trail.length > 30) this.trail.shift();

        this.x += Math.sin(this.angle) * 2;
        this.y += this.speed;
        this.angle += this.curve;

        if (this.y > height + 100) this.reset();
      }

      draw() {
        // 绘制轨迹残留
        this.trail.forEach((p, i) => {
          ctx.beginPath();
          ctx.moveTo(p.x, p.y);
          ctx.lineTo(p.x + Math.sin(this.angle + i * 0.1) * 20, p.y - i);
          ctx.strokeStyle = `hsla(${this.color.split('hsl(')[1].split(')')[0]}, ${p.alpha * 0.3})`;
          ctx.lineWidth = 2 * (1 - i / 30);
          ctx.stroke();
          p.alpha -= 0.02;
        });

        // 绘制当前彩带
        ctx.beginPath();
        ctx.moveTo(this.x, this.y);
        for (let i = 0; i < this.length; i++) {
          ctx.lineTo(
            this.x + Math.sin(this.angle + i * 0.1) * 20,
            this.y - i
          );
        }
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 2;
        ctx.stroke();
      }
    }

    // 新增萤火虫粒子系统
    class Firefly {
      constructor() {
        this.reset();
      }

      reset() {
        this.x = Math.random() * width;
        this.y = Math.random() * height;
        this.size = Math.random() * 3 + 2;
        this.angle = Math.random() * Math.PI * 2;
        this.speed = Math.random() * 0.5 + 0.2;
        this.alpha = Math.random() * 0.5 + 0.5;
        this.freq = Math.random() * 0.1 + 0.05;
      }

      update() {
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed;
        this.alpha = 0.5 + Math.sin(Date.now() * this.freq) * 0.5;

        if (this.x < -20 || this.x > width + 20 || this.y < -20 || this.y > height + 20) this.reset();
      }
      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fillStyle = `hsla(60, 100%, 70%, ${this.alpha * 0.8})`;
        ctx.fill();
      }
    }
    // 自动流星雨系统
    class MeteorShower {
      constructor() {
        this.timer = 0;
        this.interval = 2000;
      }
      update() {
        this.timer += 16;
        if (this.timer > this.interval) {
          this.timer = 0;
          const x = Math.random() * width;
          const y = -50;
          for (let i = 0; i < 3; i++) {
            meteors.push(new StarParticle(x, y));
          }
        }
      }
    }
    // 初始化系统
    let meteors = [];
    let ribbons = Array.from({ length: 15 }, () => new Ribbon());
    let fireflies = Array.from({ length: 50 }, () => new Firefly());
    const meteorShower = new MeteorShower();
    // 点击生成流星
    canvas.addEventListener('click', (e) => {
      for (let i = 0; i < 3; i++) {
        meteors.push(new StarParticle(e.clientX, e.clientY));
      }
    });
    // 动画循环
    function animate() {
      ctx.fillStyle = 'rgba(0, 21, 28, 0.08)'; // 调低透明度让轨迹更持久
      ctx.fillRect(0, 0, width, height);
      // 绘制萤火虫
      fireflies.forEach(f => {
        f.update();
        f.draw();
      });
      // 绘制彩带
      ribbons.forEach(r => {
        r.update();
        r.draw();
      });
      // 绘制流星
      meteors = meteors.filter(m => {
        m.update();
        m.draw();
        return m.alpha > 0;
      });
      // 自动生成流星雨
      meteorShower.update();
      requestAnimationFrame(animate);
    }
    // 窗口调整
    window.addEventListener('resize', () => {
      width = canvas.width = window.innerWidth;
      height = canvas.height = window.innerHeight;
    });
    // 动态生成环绕爱心
    function createHeartRing() {
      const container = document.getElementById('heartRing');
      const radius = 150; // 环绕半径
      const angles = [-30, 0, 30, 150, 180, 210]; // 特殊角度布局
      angles.forEach((deg, index) => {
        const heart = document.createElement('div');
        heart.className = 'heart';
        // 位置计算
        const radian = deg * Math.PI / 180;
        const x = Math.cos(radian) * radius;
        const y = Math.sin(radian) * radius;
        // 动画参数
        const delay = index * 0.2;
        const duration = 1.5 + Math.random() * 0.5;
        heart.style.cssText = `
          left: ${x}px;
          top: ${y}px;
          animation-delay: ${delay}s;
          animation-duration: ${duration}s;
        `;
        container.appendChild(heart);
      });
    }
    // 初始化爱心环绕
    createHeartRing();
    // 添加持续爱心生成
    setInterval(() => {
      const hearts = document.querySelectorAll('.heart');
      if (hearts.length < 12) {
        createHeartRing();
      }
    }, 3000);
    animate();
  </script>
</body>

</html>