临沂建站程序,山东网络建站推广,网站视频下载脚本,名字设计签名免费1. 花瓣设计四种花瓣类型#xff1a;创建了四种不同形状和颜色的花瓣#xff08;粉红、淡紫、浅粉和蓝绿色#xff09;自然形态#xff1a;使用CSS渐变和复杂边框半径模拟真实花瓣的不规则形状柔和阴影#xff1a;为花瓣添加微妙的阴影增强立体感2. 动画效果物理模拟…1. 花瓣设计 四种花瓣类型创建了四种不同形状和颜色的花瓣粉红、淡紫、浅粉和蓝绿色 自然形态使用CSS渐变和复杂边框半径模拟真实花瓣的不规则形状 柔和阴影为花瓣添加微妙的阴影增强立体感2. 动画效果 物理模拟每个花瓣有独立的下落速度、旋转速度和摆动轨迹 随机变化花瓣大小、位置、运动参数都是随机的 平滑过渡使用CSS transform实现高性能动画3. 交互设计 悬停效果鼠标悬停时花瓣会轻微放大 控制面板用户可以调整花瓣数量、速度和大小 重置功能一键恢复默认设置4. 视觉设计 柔和渐变背景使用淡蓝到浅紫的渐变营造梦幻氛围 半透明卡片毛玻璃效果增强现代感 优雅排版精心选择的字体、间距和颜色5. 响应式设计 适配各种屏幕尺寸 移动设备上卡片布局自动调整为垂直排列6.截图展示7.代码重现
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title梦幻花瓣雨 | 唯美视觉体验/titlelink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.cssstyle* {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 classpetals-container idpetals-container/div!-- 内容区域 --div classcontenth1 classtitlei classfas fa-cloud stylemargin-right: 15px;/i梦幻花瓣雨/h1p classsubtitle沉浸在这浪漫的花瓣雨中感受自然之美。每一片花瓣都带着春天的气息轻轻飘落如梦如幻。/p!-- 控制面板 --div classcontrolsh2 classcontrol-titlei classfas fa-sliders-h stylemargin-right: 10px;/i动画控制面板/h2div classslider-containerlabel classslider-label花瓣数量: span idcount-value120/span/labelinput typerange min50 max250 value120 classslider idcount-slider/divdiv classslider-containerlabel classslider-label下落速度: span idspeed-value5/span/labelinput typerange min1 max10 value5 classslider idspeed-slider/divdiv classslider-containerlabel classslider-label花瓣大小: span idsize-value100%/span/labelinput typerange min60 max150 value100 classslider idsize-slider/divbutton classbtn idreset-btni classfas fa-sync-alt stylemargin-right: 8px;/i重置设置/button/div!-- 卡片区域 --div classcards-containerdiv classcarddiv classcard-iconi classfas fa-paint-brush/i/divh3 classcard-title柔美色彩/h3p classcard-content采用粉紫渐变色调搭配柔和的蓝绿色营造出梦幻般的视觉效果让每一片花瓣都充满春天的气息。/p/divdiv classcarddiv classcard-iconi classfas fa-wind/i/divh3 classcard-title自然飘落/h3p classcard-content花瓣以随机的速度和轨迹飘落模拟真实的花瓣雨效果。每一片花瓣都有独特的旋转和摆动轨迹。/p/divdiv classcarddiv classcard-iconi classfas fa-magic/i/divh3 classcard-title交互体验/h3p classcard-content鼠标悬停时花瓣会放大并增强透明度同时您可以调整花瓣数量、大小和速度创造专属的花瓣雨。/p/div/div!-- 页脚 --div classfooterp梦幻花瓣雨动画 | 使用纯HTML、CSS和JavaScript实现 | 灵感源于自然之美/p/div/divscript// 获取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
