当前位置：首页 > HTML

h5如何实现蜡烛点亮

2026-01-14 22:23:24HTML

实现蜡烛点亮的H5方法

在H5中实现蜡烛点亮效果，可以通过CSS动画、Canvas绘图或结合JavaScript交互来实现。以下是几种常见的方法：

h5如何实现蜡烛点亮

使用CSS动画和JavaScript

通过CSS定义火焰动画，配合JavaScript控制点击事件来切换蜡烛状态。

h5如何实现蜡烛点亮

<div class="candle">
  <div class="wick"></div>
  <div class="flame"></div>
</div>

.candle {
  position: relative;
  width: 60px;
  height: 120px;
  background: #f5a623;
  border-radius: 5px;
}

.wick {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 15px;
  background: #333;
}

.flame {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 40px;
  background: #ffde7d;
  border-radius: 50% 50% 20% 20%;
  opacity: 0;
  animation: flicker 1s infinite alternate;
}

@keyframes flicker {
  0% { transform: translateX(-50%) scale(1); opacity: 1; }
  100% { transform: translateX(-50%) scale(1.1); opacity: 0.8; }
}

document.querySelector('.candle').addEventListener('click', function() {
  const flame = document.querySelector('.flame');
  flame.style.opacity = flame.style.opacity === '1' ? '0' : '1';
});

使用Canvas绘制动态火焰

通过Canvas绘制更真实的火焰效果，利用粒子系统模拟火焰动态。

<canvas id="candleCanvas" width="200" height="300"></canvas>

const canvas = document.getElementById('candleCanvas');
const ctx = canvas.getContext('2d');
let isLit = false;

function drawFlame() {
  if (!isLit) return;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制蜡烛
  ctx.fillStyle = '#f5a623';
  ctx.fillRect(80, 100, 40, 150);

  // 绘制火焰
  const gradient = ctx.createRadialGradient(100, 80, 5, 100, 80, 20);
  gradient.addColorStop(0, 'white');
  gradient.addColorStop(0.5, 'yellow');
  gradient.addColorStop(1, 'orange');

  ctx.beginPath();
  ctx.moveTo(100, 60);
  ctx.bezierCurveTo(105, 40, 95, 40, 100, 60);
  ctx.fillStyle = gradient;
  ctx.fill();

  requestAnimationFrame(drawFlame);
}

canvas.addEventListener('click', () => {
  isLit = !isLit;
  drawFlame();
});

使用第三方动画库

利用GSAP或Anime.js等动画库实现更复杂的火焰效果。

<div id="candle" class="candle">
  <div class="flame"></div>
</div>

import { gsap } from 'gsap';

const candle = document.getElementById('candle');
const flame = document.querySelector('.flame');
let lit = false;

candle.addEventListener('click', () => {
  lit = !lit;

  if (lit) {
    gsap.to(flame, {
      opacity: 1,
      scale: 1.2,
      duration: 0.5,
      yoyo: true,
      repeat: -1
    });
  } else {
    gsap.to(flame, {
      opacity: 0,
      duration: 0.5
    });
  }
});