js实现浪漫

使用Canvas绘制动态星空

在HTML中创建Canvas元素，通过JavaScript绘制随机生成的星星和流星动画效果。星星可以设置闪烁效果，流星带有拖尾，模拟夜空的浪漫场景。

const canvas = document.getElementById('starCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Star {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.size = Math.random() * 3;
    this.blinkSpeed = Math.random() * 0.05;
    this.opacity = Math.random();
    this.direction = Math.random() > 0.5 ? 1 : -1;
  }

  update() {
    this.opacity += this.blinkSpeed * this.direction;
    if(this.opacity > 1 || this.opacity < 0) this.direction *= -1;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
    ctx.fill();
  }
}

const stars = Array(200).fill().map(() => new Star());

function animate() {
  ctx.fillStyle = 'rgba(10, 10, 30, 0.2)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  stars.forEach(star => {
    star.update();
    star.draw();
  });

  requestAnimationFrame(animate);
}

animate();

创建爱心粒子动画

实现鼠标交互的爱心粒子效果，当鼠标移动时会产生爱心形状的粒子，并带有缓动动画和渐隐效果。

class HeartParticle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = Math.random() * 15 + 5;
    this.speedX = Math.random() * 3 - 1.5;
    this.speedY = Math.random() * 3 - 1.5;
    this.color = `hsl(${Math.random() * 60 + 330}, 100%, 50%)`;
    this.life = 100;
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    this.life--;
  }

  draw() {
    ctx.save();
    ctx.globalAlpha = this.life / 100;
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    ctx.bezierCurveTo(this.x, this.y - this.size/2, this.x + this.size, this.y - this.size/2, this.x, this.y + this.size);
    ctx.bezierCurveTo(this.x - this.size, this.y - this.size/2, this.x, this.y - this.size/2, this.x, this.y);
    ctx.fill();
    ctx.restore();
  }
}

const hearts = [];
canvas.addEventListener('mousemove', (e) => {
  for(let i = 0; i < 5; i++) {
    hearts.push(new HeartParticle(e.clientX, e.clientY));
  }
});

function animateHearts() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for(let i = 0; i < hearts.length; i++) {
    hearts[i].update();
    hearts[i].draw();

    if(hearts[i].life <= 0) {
      hearts.splice(i, 1);
      i--;
    }
  }

  requestAnimationFrame(animateHearts);
}

animateHearts();

文字浪漫特效

实现文字逐字打印效果，配合打字音效和光标闪烁，适合用于表白或浪漫信息的展示。

const romanticText = "Every moment with you feels like a beautiful dream...";
const textElement = document.getElementById('romanticText');
let i = 0;

function typeWriter() {
  if (i < romanticText.length) {
    textElement.innerHTML += romanticText.charAt(i);
    i++;
    setTimeout(typeWriter, Math.random() * 100 + 50);

    // 添加光标效果
    const cursor = document.createElement('span');
    cursor.className = 'blinking-cursor';
    cursor.textContent = '|';
    textElement.appendChild(cursor);

    // 移除上一个光标
    const prevCursor = textElement.querySelector('.blinking-cursor:not(:last-child)');
    if(prevCursor) prevCursor.remove();
  }
}

// CSS样式
.blinking-cursor {
  animation: blink 1s infinite;
  color: #ff3366;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

背景音乐控制

添加浪漫背景音乐，并提供播放控制按钮，增强整体氛围。

const bgMusic = new Audio('romantic_music.mp3');
bgMusic.loop = true;

document.getElementById('playBtn').addEventListener('click', () => {
  bgMusic.play();
  document.getElementById('musicControls').style.display = 'none';
});

// 音量控制
document.getElementById('volume').addEventListener('input', (e) => {
  bgMusic.volume = e.target.value;
});

3D爱心渲染

使用Three.js创建3D旋转爱心，可添加纹理和光影效果。

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建爱心几何体
const heartShape = new THREE.Shape();
heartShape.moveTo(0, 0);
heartShape.bezierCurveTo(0, 0, -2, 2, -3, 0);
heartShape.bezierCurveTo(-5, -3, 0, -5, 0, -2);
heartShape.bezierCurveTo(0, -5, 5, -3, 3, 0);
heartShape.bezierCurveTo(2, 2, 0, 0, 0, 0);

const extrudeSettings = {
  depth: 0.5,
  bevelEnabled: true,
  bevelSegments: 2,
  steps: 2,
  bevelSize: 0.3,
  bevelThickness: 0.2
};

const geometry = new THREE.ExtrudeGeometry(heartShape, extrudeSettings);
const material = new THREE.MeshPhongMaterial({ 
  color: 0xff3366,
  specular: 0x111111,
  shininess: 30
});
const heart = new THREE.Mesh(geometry, material);
scene.add(heart);

// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1);
scene.add(light);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  heart.rotation.x += 0.01;
  heart.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();