梦幻花瓣雨

1. 花瓣设计

四种花瓣类型：创建了四种不同形状和颜色的花瓣（粉红、淡紫、浅粉和蓝绿色）

自然形态：使用CSS渐变和复杂边框半径模拟真实花瓣的不规则形状

柔和阴影：为花瓣添加微妙的阴影增强立体感

2. 动画效果

物理模拟：每个花瓣有独立的下落速度、旋转速度和摆动轨迹

随机变化：花瓣大小、位置、运动参数都是随机的

平滑过渡：使用CSS transform实现高性能动画

3. 交互设计

悬停效果：鼠标悬停时花瓣会轻微放大

控制面板：用户可以调整花瓣数量、速度和大小

重置功能：一键恢复默认设置

4. 视觉设计

柔和渐变背景：使用淡蓝到浅紫的渐变，营造梦幻氛围

半透明卡片：毛玻璃效果增强现代感

优雅排版：精心选择的字体、间距和颜色

5. 响应式设计

适配各种屏幕尺寸

移动设备上卡片布局自动调整为垂直排列

6.截图展示

7.代码重现

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>梦幻花瓣雨 | 唯美视觉体验</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);min-height: 100vh;overflow-x: hidden;position: relative;color: #5a4a6f;}/* 花瓣容器 */.petals-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 1;}/* 花瓣样式 */.petal {position: absolute;top: -50px;pointer-events: none;opacity: 0.85;transition: transform 0.5s ease;z-index: 2;}.petal:hover {transform: scale(1.2);opacity: 1;}/* 花瓣形状 */.petal-1 {background: linear-gradient(45deg, #ffb7d5, #ff9ec4);width: 25px;height: 25px;border-radius: 70% 30% 70% 30% / 30% 70% 30% 70%;box-shadow: 0 0 10px rgba(255, 182, 193, 0.4);}.petal-2 {background: linear-gradient(45deg, #e2b0ff, #c77dff);width: 20px;height: 20px;border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;box-shadow: 0 0 10px rgba(195, 125, 255, 0.4);}.petal-3 {background: linear-gradient(45deg, #ffd6e7, #ffc2d6);width: 18px;height: 18px;border-radius: 50% 50% 40% 60% / 60% 40% 60% 40%;box-shadow: 0 0 8px rgba(255, 182, 193, 0.3);}.petal-4 {background: linear-gradient(45deg, #a0e7e5, #7adbd8);width: 22px;height: 22px;border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;box-shadow: 0 0 8px rgba(122, 219, 216, 0.3);}/* 内容容器 */.content {position: relative;z-index: 10;max-width: 900px;margin: 0 auto;padding: 40px 20px;text-align: center;}/* 标题样式 */.title {font-size: 3.5rem;font-weight: 300;margin-bottom: 20px;color: #6d5b8a;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);position: relative;display: inline-block;}.title::after {content: "";position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 80px;height: 4px;background: linear-gradient(to right, #ffb7d5, #e2b0ff, #a0e7e5);border-radius: 2px;}/* 副标题 */.subtitle {font-size: 1.2rem;font-weight: 300;margin-bottom: 40px;color: #8a7a9f;max-width: 600px;margin-left: auto;margin-right: auto;line-height: 1.6;}/* 卡片容器 */.cards-container {display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;margin-top: 50px;}/* 卡片样式 */.card {background: rgba(255, 255, 255, 0.85);backdrop-filter: blur(10px);border-radius: 20px;padding: 30px;width: 250px;box-shadow: 0 10px 30px rgba(149, 117, 205, 0.15);transition: transform 0.3s ease, box-shadow 0.3s ease;position: relative;overflow: hidden;}.card::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 5px;background: linear-gradient(to right, #ffb7d5, #e2b0ff, #a0e7e5);}.card:hover {transform: translateY(-10px);box-shadow: 0 15px 35px rgba(149, 117, 205, 0.25);}.card-icon {font-size: 2.5rem;margin-bottom: 20px;color: #8a7a9f;}.card-title {font-size: 1.4rem;margin-bottom: 15px;color: #6d5b8a;}.card-content {font-size: 0.95rem;color: #7a6a8f;line-height: 1.6;}/* 控制面板 */.controls {background: rgba(255, 255, 255, 0.85);backdrop-filter: blur(10px);border-radius: 20px;padding: 25px;margin: 50px auto;max-width: 500px;box-shadow: 0 10px 30px rgba(149, 117, 205, 0.15);}.control-title {font-size: 1.3rem;margin-bottom: 20px;color: #6d5b8a;text-align: center;}.slider-container {margin-bottom: 20px;}.slider-label {display: block;margin-bottom: 8px;color: #7a6a8f;}.slider {width: 100%;height: 8px;border-radius: 4px;background: linear-gradient(to right, #ffb7d5, #e2b0ff, #a0e7e5);outline: none;opacity: 0.7;transition: opacity 0.2s;}.slider:hover {opacity: 1;}/* 按钮样式 */.btn {background: linear-gradient(to right, #ffb7d5, #e2b0ff);color: white;border: none;padding: 12px 25px;border-radius: 30px;font-size: 1rem;cursor: pointer;transition: transform 0.3s ease, box-shadow 0.3s ease;display: block;margin: 20px auto 0;box-shadow: 0 5px 15px rgba(149, 117, 205, 0.3);}.btn:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(149, 117, 205, 0.4);}/* 页脚 */.footer {text-align: center;margin-top: 60px;padding: 20px;color: #8a7a9f;font-size: 0.9rem;position: relative;z-index: 10;}/* 响应式设计 */@media (max-width: 768px) {.title {font-size: 2.5rem;}.cards-container {flex-direction: column;align-items: center;}.card {width: 100%;max-width: 350px;}}</style>
</head>
<body><!-- 花瓣容器 --><div class="petals-container" id="petals-container"></div><!-- 内容区域 --><div class="content"><h1 class="title"><i class="fas fa-cloud" style="margin-right: 15px;"></i>梦幻花瓣雨</h1><p class="subtitle">沉浸在这浪漫的花瓣雨中，感受自然之美。每一片花瓣都带着春天的气息，轻轻飘落，如梦如幻。</p><!-- 控制面板 --><div class="controls"><h2 class="control-title"><i class="fas fa-sliders-h" style="margin-right: 10px;"></i>动画控制面板</h2><div class="slider-container"><label class="slider-label">花瓣数量: <span id="count-value">120</span></label><input type="range" min="50" max="250" value="120" class="slider" id="count-slider"></div><div class="slider-container"><label class="slider-label">下落速度: <span id="speed-value">5</span></label><input type="range" min="1" max="10" value="5" class="slider" id="speed-slider"></div><div class="slider-container"><label class="slider-label">花瓣大小: <span id="size-value">100%</span></label><input type="range" min="60" max="150" value="100" class="slider" id="size-slider"></div><button class="btn" id="reset-btn"><i class="fas fa-sync-alt" style="margin-right: 8px;"></i>重置设置</button></div><!-- 卡片区域 --><div class="cards-container"><div class="card"><div class="card-icon"><i class="fas fa-paint-brush"></i></div><h3 class="card-title">柔美色彩</h3><p class="card-content">采用粉紫渐变色调，搭配柔和的蓝绿色，营造出梦幻般的视觉效果，让每一片花瓣都充满春天的气息。</p></div><div class="card"><div class="card-icon"><i class="fas fa-wind"></i></div><h3 class="card-title">自然飘落</h3><p class="card-content">花瓣以随机的速度和轨迹飘落，模拟真实的花瓣雨效果。每一片花瓣都有独特的旋转和摆动轨迹。</p></div><div class="card"><div class="card-icon"><i class="fas fa-magic"></i></div><h3 class="card-title">交互体验</h3><p class="card-content">鼠标悬停时花瓣会放大并增强透明度，同时您可以调整花瓣数量、大小和速度，创造专属的花瓣雨。</p></div></div><!-- 页脚 --><div class="footer"><p>梦幻花瓣雨动画 | 使用纯HTML、CSS和JavaScript实现 | 灵感源于自然之美</p></div></div><script>// 获取DOM元素const petalsContainer = document.getElementById('petals-container');const countSlider = document.getElementById('count-slider');const speedSlider = document.getElementById('speed-slider');const sizeSlider = document.getElementById('size-slider');const countValue = document.getElementById('count-value');const speedValue = document.getElementById('speed-value');const sizeValue = document.getElementById('size-value');const resetBtn = document.getElementById('reset-btn');// 配置参数let config = {petalCount: 120,speedFactor: 5,sizeFactor: 1.0};// 花瓣类class Petal {constructor() {this.element = document.createElement('div');this.element.classList.add('petal');// 随机选择花瓣类型const petalType = Math.floor(Math.random() * 4) + 1;this.element.classList.add(`petal-${petalType}`);// 随机大小变化const sizeVariation = 0.7 + Math.random() * 0.6;this.size = sizeVariation * config.sizeFactor;// 设置初始位置this.reset();petalsContainer.appendChild(this.element);}reset() {// 随机位置this.x = Math.random() * window.innerWidth;this.y = -50 - Math.random() * 100;// 随机旋转this.rotation = Math.random() * 360;// 随机速度this.fallSpeed = 1 + Math.random() * config.speedFactor;this.rotateSpeed = (Math.random() - 0.5) * 4;// 随机摆动幅度this.swingAmplitude = Math.random() * 50;this.swingSpeed = Math.random() * 0.02;this.swingPhase = Math.random() * Math.PI * 2;// 设置初始状态this.update();}update() {// 更新位置this.y += this.fallSpeed * 0.3;this.rotation += this.rotateSpeed;// 摆动效果const swing = Math.sin(Date.now() * this.swingSpeed + this.swingPhase) * this.swingAmplitude;// 应用变换this.element.style.transform = `translate(${this.x + swing}px, ${this.y}px)rotate(${this.rotation}deg)scale(${this.size})`;// 如果花瓣飘出屏幕，重置位置if (this.y > window.innerHeight) {this.reset();}}}// 花瓣数组let petals = [];// 创建花瓣function createPetals() {// 移除现有的花瓣petalsContainer.innerHTML = '';petals = [];// 创建新的花瓣for (let i = 0; i < config.petalCount; i++) {petals.push(new Petal());}}// 动画循环function animate() {for (const petal of petals) {petal.update();}requestAnimationFrame(animate);}// 初始化function init() {createPetals();animate();// 设置滑块事件监听器countSlider.addEventListener('input', () => {config.petalCount = parseInt(countSlider.value);countValue.textContent = config.petalCount;createPetals();});speedSlider.addEventListener('input', () => {config.speedFactor = parseInt(speedSlider.value);speedValue.textContent = config.speedFactor;});sizeSlider.addEventListener('input', () => {config.sizeFactor = parseInt(sizeSlider.value) / 100;sizeValue.textContent = `${parseInt(sizeSlider.value)}%`;createPetals();});// 重置按钮resetBtn.addEventListener('click', () => {config.petalCount = 120;config.speedFactor = 5;config.sizeFactor = 1.0;countSlider.value = config.petalCount;speedSlider.value = config.speedFactor;sizeSlider.value = 100;countValue.textContent = config.petalCount;speedValue.textContent = config.speedFactor;sizeValue.textContent = "100%";createPetals();});// 窗口大小变化时重新创建花瓣window.addEventListener('resize', createPetals);}// 启动window.onload = init;</script>
</body>
</html>