夢幻花瓣雨

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>