绝美！HTML+CSS+JS实现飘雪彼岸花动画效果代码

# 飘雪彼岸花动画效果代码以下是一个使用HTML, CSS和JavaScript创建的飘雪彼岸花动画效果代码： ```html <!DOCTYPE html> <html lang="zh"> <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: linear-gradient(to bottom, #0f0c29, #302b63, #24243e); height: 100vh; } .flower { position: absolute; width: 30px; height: 30px; background: radial-gradient(circle, #ff3366, #cc0066); border-radius: 50% 50% 0 50%; transform: rotate(45deg); filter: drop-shadow(0 0 10px #ff0066); opacity: 0.8; animation: float 10s infinite ease-in-out; } .snowflake { position: absolute; color: white; font-size: 1em; user-select: none; pointer-events: none; animation: fall linear infinite; } @keyframes float { 0%, 100% { transform: rotate(45deg) translateY(0); } 50% { transform: rotate(45deg) translateY(-20px); } } @keyframes fall { to { transform: translateY(100vh); } } </style> </head> <body> <script> // 创建彼岸花 function createFlowers() { const numFlowers = 15; for (let i = 0; i < numFlowers; i++) { const flower = document.createElement('div'); flower.className = 'flower'; // 随机位置 const x = Math.random() * window.innerWidth; const y = Math.random() * window.innerHeight * 0.8; // 随机大小 const size = 10 + Math.random() * 20; // 随机旋转角度 const rotation = Math.random() * 360; // 随机动画延迟 const delay = Math.random() * 5; flower.style.left = `${x}px`; flower.style.top = `${y}px`; flower.style.width = `${size}px`; flower.style.height = `${size}px`; flower.style.transform = `rotate(${rotation}deg)`; flower.style.animationDelay = `${delay}s`; document.body.appendChild(flower); } } // 创建雪花 function createSnowflakes() { const snowflakes = ['❄', '❅', '❆', '✻', '✼']; const numSnowflakes = 100; for (let i = 0; i < numSnowflakes; i++) { const snowflake = document.createElement('div'); snowflake.className = 'snowflake'; // 随机雪花符号 const randomFlake = snowflakes[Math.floor(Math.random() * snowflakes.length)]; snowflake.textContent = randomFlake; // 随机位置 const startX = Math.random() * window.innerWidth; const startY = Math.random() * -100; // 随机大小 const size = 0.5 + Math.random() * 1.5; // 随机透明度 const opacity = 0.5 + Math.random() * 0.5; // 随机下落速度 const duration = 5 + Math.random() * 15; // 随机动画延迟 const delay = Math.random() * 5; snowflake.style.left = `${startX}px`; snowflake.style.top = `${startY}px`; snowflake.style.fontSize = `${size}em`; snowflake.style.opacity = opacity; snowflake.style.animationDuration = `${duration}s`; snowflake.style.animationDelay = `${delay}s`; document.body.appendChild(snowflake); } } // 窗口加载时创建元素 window.onload = function() { createFlowers(); createSnowflakes(); }; // 窗口大小改变时重新创建元素 window.onresize = function() { document.querySelectorAll('.flower, .snowflake').forEach(el => el.remove()); createFlowers(); createSnowflakes(); }; </script> </body> </html> ``` ## 代码说明 1. HTML结构：创建了一个基本的HTML文档结构，包含CSS样式和JavaScript脚本。 2. CSS样式： - 设置了渐变色模拟夜空 - 定义了彼岸花的样式（红色渐变、旋转45度的圆形） - 创建了雪花飘落的动画效果 3. JavaScript功能： - `createFlowers()`函数随机生成15朵彼岸花，每朵花有随机的位置、大小、旋转角度和动画延迟 - `createSnowflakes()`函数生成100片雪花，使用不同的雪花符号，每片雪花有随机的属性 - 添加了窗口大小改变时的响应式处理 ## 使用说明 1. 将代码复制到一个HTML文件中 2. 在浏览器中打开该文件即可看到效果 3. 可以调整代码中的参数（如花朵数量、雪花数量等）来改变效果 ## 注意事项 1. 彼岸花使用了CSS的`transform`属性实现旋转和浮动动画，确保浏览器支持这些CSS特性 2. 雪花使用了Unicode符号，某些旧浏览器可能显示不正常 3. 动画效果可能对性能有一定影响，特别是在移动设备上 4. 可以根据需要调整颜色、大小和动画参数以获得不同视觉效果 ######[AI写代码神器 | 1299点数解答 | 2025-05-15 10:01:40]

服务商

更多选项

快捷项

自定义