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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/news/917339.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/917339.shtml
英文地址，请注明出处：http://en.pswp.cn/news/917339.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

React 闭包陷阱及解决方案与 React 16/17/18 版本区别

React 闭包陷阱及解决方案与 React 16/17/18 版本区别

一、React 闭包陷阱详解1. 什么是闭包陷阱React 闭包陷阱是指在函数组件中使用 Hook&#xff08;特别是 useEffect 和 useCallback&#xff09;时&#xff0c;由于闭包特性导致访问到旧的 state 或 props 值&#xff0c;而非最新值的现象。2. 典型场景示例function Counter() {…
阅读更多...
[BJDCTF2020]EasySearch

[BJDCTF2020]EasySearch

首先尝试了一下sql注入&#xff0c;但是没有找到不同回显。直接用sqlmap扫描一下&#xff0c;因为这边用的是POST请求&#xff0c;所以需要抓包将请求复制到txt文件中然后使用命令sqlmap -p bp.txt。也没有发现注入漏洞。 再进行目录扫描试试&#xff1a; [02:33:43] 403 - …
阅读更多...
【Linux】基本指令的使用 and 面试常问

【Linux】基本指令的使用 and 面试常问

1、man 指令使用方法&#xff1a;man Linux指令。功能&#xff1a;相当于字典&#xff0c;查找指令的用法。常用选项&#xff1a;-k&#xff1a;根据关键字搜索联机帮助。num&#xff1a;只在第num章节查找。-a&#xff1a;将所有章节的都显示出来&#xff0c;比如man printf它…
阅读更多...
零基础 “入坑” Java--- 十六、字符串String 异常

零基础 “入坑” Java--- 十六、字符串String 异常

文章目录一、String1.字符串的不可变性2.字符串的修改3.StringBuilder和StringBuffer4.【字符串练习】4.1 字符串中的第一个唯一字符4.2 字符串最后一个单词的长度4.3 验证回文串二、异常1.初识异常2.异常的分类3.异常的处理4.异常处理流程总结5.自定义异常在上一章节中&#x…
阅读更多...
梯度下降在大模型训练中的作用与实现

梯度下降在大模型训练中的作用与实现

梯度下降&#xff08;Gradient Descent&#xff09;是深度学习中最核心的优化算法之一。大模型&#xff08;如GPT、BERT&#xff09;在训练时需要优化数十亿甚至上千亿的参数&#xff0c;而梯度下降及其变体&#xff08;如SGD、Adam&#xff09;正是实现这一优化的关键工具。它…
阅读更多...
【JVS更新日志】开源框架、APS排产、企业计划、物联网、逻辑引擎7.30更新说明！

【JVS更新日志】开源框架、APS排产、企业计划、物联网、逻辑引擎7.30更新说明！

项目介绍 JVS是企业级数字化服务构建的基础脚手架&#xff0c;主要解决企业信息化项目交付难、实施效率低、开发成本高的问题&#xff0c;采用微服务配置化的方式&#xff0c;提供了低代码数据分析物联网的核心能力产品&#xff0c;并构建了协同办公、企业常用的管理工具等&…
阅读更多...
Eclipse中导入新项目，右键项目没有Run on Server，Tomcat的add and remove找不到项目

Eclipse中导入新项目，右键项目没有Run on Server，Tomcat的add and remove找不到项目

原因分析没有勾选Dynamic Web Module、Java、JavaScriptDynamic Web Module版本问题解决方法Eclipse中右键项目选择Properties左侧点击project facets勾选Dynamic Web Module、Java、JavaScript&#xff0c;注意Dynamic Web Module版本问题,要和tomcat版本对应。- Dynamic Web …
阅读更多...
IntelliJ IDEA 2025系列通用软件安装教程（Windows版）

IntelliJ IDEA 2025系列通用软件安装教程（Windows版）

前言 JetBrains系列开发工具&#xff08;如IntelliJ IDEA、PyCharm、WebStorm等&#xff09;是程序员们非常喜爱的集成开发环境。2025年最新版本带来了更多强大的功能和改进。本教程将详细介绍如何在Windows系统上安装JetBrains 2025系列软件。 最近挖到一个宝藏级人工智能学习…
阅读更多...
乌鸫科技前端二面

乌鸫科技前端二面

1. 你能给我介绍一下你参与的重要项目&#xff0c;并重点介绍一下做的内容?通俗解释&#xff1a; 挑一个你觉得最拿得出手、技术含量最高的项目&#xff0c;说说这个项目是干什么的&#xff08;比如一个电商网站、一个后台管理系统&#xff09;&#xff0c;你在里面具体负责了…
阅读更多...
《c++面向对象入门与实战》笔记

《c++面向对象入门与实战》笔记

前年的书&#xff0c;翻出来整理一下7章.指针指针 sizeof为4*指针 sizeof为 所指类型的sizeof注意free后置空&#xff0c;避免野指针11章.类
阅读更多...
easyExcel生成多个sheet的动态表头的实现

easyExcel生成多个sheet的动态表头的实现

在使用 EasyExcel 实现“多个 Sheet 且每个 Sheet 表头是动态的”需求时&#xff0c;思路如下&#xff1a;✅ 实现思路概述 EasyExcel 的 ExcelWriter 支持多个 Sheet 写入。每个 Sheet&#xff1a; 使用 WriteSheet 创建&#xff1b;可以绑定一个动态生成的表头 List<List&…
阅读更多...
SQL 连接类型示例：内连接与外连接

SQL 连接类型示例：内连接与外连接

SQL 连接类型示例&#xff1a;内连接与外连接 示例数据表 假设我们有两个表&#xff1a; employees 表:emp_idemp_namedept_id1张三1012李四1023王五1034赵六NULLdepartments 表:dept_iddept_name101销售部102技术部104财务部1. 内连接 (INNER JOIN) 内连接只返回两个表中匹配的…
阅读更多...
Ubuntu安装gpu驱动,cuda

Ubuntu安装gpu驱动,cuda

系统初始化 1、安装基础软件 apt-get update apt-get -y install openssh-server openssh-client apt-utils freeipmi ipmitool sshpass ethtool zip unzip nano less git netplan.io iputils-ping mtr ipvsadm smartmontools python3-pip socat conntrack libvirt-clients li…
阅读更多...
ctfshow_源码压缩包泄露

ctfshow_源码压缩包泄露

根据题目信息直接dirsearch解压下来一个.txt文件&#xff0c;一个index.phpflag{flag_here}不对那么就去看index.php也没有东西&#xff0c;于是查看wp发现是访问/fl000g.txt这才是对的还有很多源码泄露需要去了解• git源码泄露• svn源码泄露• DS_Store 文件泄露• 网站备份…
阅读更多...
Python 程序设计讲义（54）：Python 的函数——函数概述

Python 程序设计讲义（54）：Python 的函数——函数概述

Python 程序设计讲义&#xff08;54&#xff09;&#xff1a;Python 的函数——函数概述 目录Python 程序设计讲义&#xff08;54&#xff09;&#xff1a;Python 的函数——函数概述一、函数的类型1、内置函数2、自定义函数二、调用函数Python 提供了函数机制&#xff0c;把实…
阅读更多...
学习Python中Selenium模块的基本用法（3：下载浏览器驱动续）

学习Python中Selenium模块的基本用法（3：下载浏览器驱动续）

前一篇文章主要介绍下载针对火狐浏览器的WebDriver&#xff0c;写那篇文章时才找到能够下最新版本Chrome的WebDriver地址&#xff08;参考文献6&#xff09;&#xff0c;本文继续学习并验证针对Chrome浏览器的WebDriver下载和使用方法。Chrome的WebDriver版本与操作系统相关&am…
阅读更多...
AIDL当Parcelable序列化的数据类通信时报“Class not found when unmarshalling“找不到该类时的解决方案

AIDL当Parcelable序列化的数据类通信时报“Class not found when unmarshalling“找不到该类时的解决方案

1. 报错栈 &#xff1a;cusText这个类找不到 2 16:01:29.796 1044 5718 E Parcel : Class not found when unmarshalling: com.cus.sdk.cusText 08-02 16:01:29.796 1044 5718 E Parcel : java.lang.ClassNotFoundException: com.cus.sdk.cusText 08-02 16:01:29.796 1…
阅读更多...
Django模型查询与性能调优：告别N+1问题

Django模型查询与性能调优：告别N+1问题

文章目录一、查询基础QuerySet 详解一对多关联查询多对多关联查询二、N1查询问题问题分析检测方法解决方案三、高级查询优化values()values_list()values()和values_list()对比Q() 对象复杂查询查看生成的 SQL四、项目实战场景实战一、查询基础 QuerySet 详解 Django 中通过模…
阅读更多...
PyTorch 中 Tensor 统计学函数及相关概念

PyTorch 中 Tensor 统计学函数及相关概念

文章目录PyTorch 中 Tensor 统计学函数及相关概念一、引言二、基础统计学函数&#xff08;一&#xff09;torch.mean()——均值计算&#xff08;二&#xff09;torch.sum()——总和计算&#xff08;三&#xff09;torch.prod()——元素积计算&#xff08;四&#xff09;torch.m…
阅读更多...
浅拷贝与深拷贝的区别

浅拷贝与深拷贝的区别

浅拷贝和深拷贝是两种不同的对象复制方式&#xff0c;主要区别在于它们如何处理对象内部的引用类型字段。浅拷贝 (Shallow Copy)特点&#xff1a;只复制对象本身&#xff08;基本类型字段&#xff09;和对象中的引用&#xff08;地址&#xff09;不复制引用指向的实际对象原始对…
阅读更多...
最新文章

Copyright @ 2022~2023