Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
CSS
<!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> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: linear-gradient(to bottom, #1a2980, #26d0ce); color: white; font-family: 'Arial', sans-serif; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } .container { text-align: center; z-index: 10; padding: 20px; background: rgba(0, 0, 0, 0.3); border-radius: 15px; backdrop-filter: blur(5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); max-width: 90%; } h1 { font-size: 2.5rem; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } p { font-size: 1.1rem; margin-bottom: 20px; max-width: 600px; line-height: 1.6; } .controls { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin-top: 20px; } button { background: rgba(255, 255, 255, 0.2); border: none; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; font-size: 1rem; transition: all 0.3s ease; backdrop-filter: blur(5px); } button:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-3px); } canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .info { position: fixed; bottom: 20px; left: 20px; background: rgba(0, 0, 0, 0.3); padding: 10px 15px; border-radius: 10px; font-size: 0.9rem; z-index: 10; } @media (max-width: 768px) { h1 { font-size: 1.8rem; } p { font-size: 1rem; } .controls { flex-direction: column; align-items: center; } button { width: 200px; } } </style> </head> <body> <canvas id="snowCanvas"></canvas> <div class="container"> <h1>❄️ 雪花飘落效果 ❄️</h1> <p>这是一个使用JavaScript和Canvas创建的雪花飘落动画。雪花有不同的尺寸、速度和透明度，模拟真实的雪景效果。</p> <div class="controls"> <button id="moreSnow">更多雪花</button> <button id="lessSnow">减少雪花</button> <button id="toggleWind">切换风向</button> <button id="toggleInteraction">切换交互</button> </div> </div> <div class="info"> 雪花数量: <span id="snowCount">300</span> | 风向: <span id="windStatus">左</span> | 交互: <span id="interactionStatus">开启</span> </div> <script> // 获取Canvas元素和上下文 const canvas = document.getElementById('snowCanvas'); const ctx = canvas.getContext('2d'); // 设置Canvas尺寸为窗口大小 function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } // 初始化时设置Canvas尺寸 resizeCanvas(); window.addEventListener('resize', resizeCanvas); // 雪花数组 let snowflakes = []; let snowCount = 300; let windDirection = -1; // -1 向左, 1 向右 let interactionEnabled = true; // 雪花类 class Snowflake { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.size = Math.random() * 4 + 1; this.speed = Math.random() * 1 + 0.5; this.opacity = Math.random() * 0.8 + 0.2; this.wind = Math.random() * 1.5 - 0.75; this.swing = Math.random() * 0.5; this.swingSpeed = Math.random() * 0.02 + 0.005; this.swingOffset = Math.random() * Math.PI * 2; } update() { // 更新雪花位置 this.y += this.speed; this.x += this.wind * windDirection + Math.sin(this.swingOffset) * this.swing; this.swingOffset += this.swingSpeed; // 如果雪花超出画布底部，重新从顶部开始 if (this.y > canvas.height) { this.y = -10; this.x = Math.random() * canvas.width; } // 如果雪花超出画布左右边界，从另一侧出现 if (this.x > canvas.width) { this.x = 0; } else if (this.x < 0) { this.x = canvas.width; } } 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(); ctx.closePath(); } } // 创建初始雪花 function createSnowflakes() { snowflakes = []; for (let i = 0; i < snowCount; i++) { snowflakes.push(new Snowflake()); } } // 鼠标交互 let mouseX = 0; let mouseY = 0; let mouseRadius = 150; canvas.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; }); // 动画循环 function animate() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 更新和绘制每个雪花 snowflakes.forEach(snowflake => { // 鼠标交互效果 if (interactionEnabled) { const dx = snowflake.x - mouseX; const dy = snowflake.y - mouseY; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < mouseRadius) { const force = (mouseRadius - distance) / mouseRadius; snowflake.x += dx * force * 0.05; snowflake.y += dy * force * 0.05; } } snowflake.update(); snowflake.draw(); }); requestAnimationFrame(animate); } // 初始化 createSnowflakes(); animate(); // 控制按钮事件 document.getElementById('moreSnow').addEventListener('click', () => { snowCount = Math.min(snowCount + 50, 1000); createSnowflakes(); updateInfo(); }); document.getElementById('lessSnow').addEventListener('click', () => { snowCount = Math.max(snowCount - 50, 50); createSnowflakes(); updateInfo(); }); document.getElementById('toggleWind').addEventListener('click', () => { windDirection *= -1; updateInfo(); }); document.getElementById('toggleInteraction').addEventListener('click', () => { interactionEnabled = !interactionEnabled; updateInfo(); }); // 更新信息显示 function updateInfo() { document.getElementById('snowCount').textContent = snowCount; document.getElementById('windStatus').textContent = windDirection === -1 ? '左' : '右'; document.getElementById('interactionStatus').textContent = interactionEnabled ? '开启' : '关闭'; } // 初始信息更新 updateInfo(); </script> </body> </html>
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email
