HTML飘落的花瓣

目录

写在前面

HTML​​​​​​​简介

完整代码

代码分析

系列推荐

写在最后

写在前面

本期小编给大家推荐HTML实现的飘落的花瓣，无需安装软件，直接下载即可打开~

HTML​​​​​​​简介

HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。它由一系列标签组成，这些标签描述了网页上的内容和结构。HTML中的标签以尖括号包围，通常成对出现，包括起始标签和结束标签，它们之间包含内容。HTML文档通常以<html>标签开始，以</html>标签结束。常见的标签包括<head>用于定义文档的头部信息，<title>用于指定标题，<body>用于定义文档的主体内容等。通过使用不同的标签和属性，开发人员可以创建出多样化且丰富的网页内容，包括文本、图像、链接、表格等。HTML的语法相对简单，易于学习和使用，是构建网页的基础。随着技术的发展，HTML也在不断更新，最新版本为HTML5，提供了更多功能和语义化标签，使得网页开发更加灵活和可靠。

完整代码

<!DOCTYPE HTML>
<HTML><TITLE>飘落的花瓣</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>html,body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.container {width: 100%;height: 100%;margin: 0;padding: 0;background-color: #000000;}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</HEAD><BODY><div id="jsi-cherry-container" class="container"></div><script>var RENDERER = {INIT_CHERRY_BLOSSOM_COUNT: 30,MAX_ADDING_INTERVAL: 10,init: function () {this.setParameters();this.reconstructMethods();this.createCherries();this.render();},setParameters: function () {this.$container = $('#jsi-cherry-container');this.width = this.$container.width();this.height = this.$container.height();this.context = $('<canvas />').attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext('2d');this.cherries = [];this.maxAddingInterval = Math.round(this.MAX_ADDING_INTERVAL * 1000 / this.width);this.addingInterval = this.maxAddingInterval;},reconstructMethods: function () {this.render = this.render.bind(this);},createCherries: function () {for (var i = 0, length = Math.round(this.INIT_CHERRY_BLOSSOM_COUNT * this.width / 1000); i < length; i++) {this.cherries.push(new CHERRY_BLOSSOM(this, true));}},render: function () {requestAnimationFrame(this.render);this.context.clearRect(0, 0, this.width, this.height);this.cherries.sort(function (cherry1, cherry2) {return cherry1.z - cherry2.z;});for (var i = this.cherries.length - 1; i >= 0; i--) {if (!this.cherries[i].render(this.context)) {this.cherries.splice(i, 1);}}if (--this.addingInterval == 0) {this.addingInterval = this.maxAddingInterval;this.cherries.push(new CHERRY_BLOSSOM(this, false));}}};var CHERRY_BLOSSOM = function (renderer, isRandom) {this.renderer = renderer;this.init(isRandom);};CHERRY_BLOSSOM.prototype = {FOCUS_POSITION: 300,FAR_LIMIT: 600,MAX_RIPPLE_COUNT: 100,RIPPLE_RADIUS: 100,SURFACE_RATE: 0.5,SINK_OFFSET: 20,init: function (isRandom) {this.x = this.getRandomValue(-this.renderer.width, this.renderer.width);this.y = isRandom ? this.getRandomValue(0, this.renderer.height) : this.renderer.height * 1.5;this.z = this.getRandomValue(0, this.FAR_LIMIT);this.vx = this.getRandomValue(-2, 2);this.vy = -2;this.theta = this.getRandomValue(0, Math.PI * 2);this.phi = this.getRandomValue(0, Math.PI * 2);this.psi = 0;this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300);this.opacity = 0;this.endTheta = false;this.endPhi = false;this.rippleCount = 0;var axis = this.getAxis(),theta = this.theta + Math.ceil(-(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy) * Math.PI / 500;theta %= Math.PI * 2;this.offsetY = 40 * ((theta <= Math.PI / 2 || theta >= Math.PI * 3 / 2) ? -1 : 1);this.thresholdY = this.renderer.height / 2 + this.renderer.height * this.SURFACE_RATE * axis.rate;this.entityColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);this.entityColor.addColorStop(0, 'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)');this.entityColor.addColorStop(0.05, 'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)');this.entityColor.addColorStop(1, 'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)');this.shadowColor = this.renderer.context.createRadialGradient(0, 40, 0, 0, 40, 80);this.shadowColor.addColorStop(0, 'hsl(330, 40%, ' + 30 * (0.3 + axis.rate) + '%)');this.shadowColor.addColorStop(0.05, 'hsl(330, 40%,' + 30 * (0.3 + axis.rate) + '%)');this.shadowColor.addColorStop(1, 'hsl(330, 20%, ' + 40 * (0.3 + axis.rate) + '%)');},getRandomValue: function (min, max) {return min + (max - min) * Math.random();},getAxis: function () {var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),x = this.renderer.width / 2 + this.x * rate,y = this.renderer.height / 2 - this.y * rate;return { rate: rate, x: x, y: y };},renderCherry: function (context, axis) {context.beginPath();context.moveTo(0, 40);context.bezierCurveTo(-60, 20, -10, -60, 0, -20);context.bezierCurveTo(10, -60, 60, 20, 0, 40);context.fill();for (var i = -4; i < 4; i++) {context.beginPath();context.moveTo(0, 40);context.quadraticCurveTo(i * 12, 10, i * 4, -24 + Math.abs(i) * 2);context.stroke();}},render: function (context) {var axis = this.getAxis();if (axis.y == this.thresholdY && this.rippleCount < this.MAX_RIPPLE_COUNT) {context.save();context.lineWidth = 2;context.strokeStyle = 'hsla(0, 0%, 100%, ' + (this.MAX_RIPPLE_COUNT - this.rippleCount) / this.MAX_RIPPLE_COUNT + ')';context.translate(axis.x + this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1), axis.y);context.scale(1, 0.3);context.beginPath();context.arc(0, 0, this.rippleCount / this.MAX_RIPPLE_COUNT * this.RIPPLE_RADIUS * axis.rate, 0, Math.PI * 2, false);context.stroke();context.restore();this.rippleCount++;}if (axis.y < this.thresholdY || (!this.endTheta || !this.endPhi)) {if (this.y <= 0) {this.opacity = Math.min(this.opacity + 0.01, 1);}context.save();context.globalAlpha = this.opacity;context.fillStyle = this.shadowColor;context.strokeStyle = 'hsl(330, 30%,' + 40 * (0.3 + axis.rate) + '%)';context.translate(axis.x, Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y));context.rotate(Math.PI - this.theta);context.scale(axis.rate * -Math.sin(this.phi), axis.rate);context.translate(0, this.offsetY);this.renderCherry(context, axis);context.restore();}context.save();context.fillStyle = this.entityColor;context.strokeStyle = 'hsl(330, 40%,' + 70 * (0.3 + axis.rate) + '%)';context.translate(axis.x, axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate));context.rotate(this.theta);context.scale(axis.rate * Math.sin(this.phi), axis.rate);context.translate(0, this.offsetY);this.renderCherry(context, axis);context.restore();if (this.y <= -this.renderer.height / 4) {if (!this.endTheta) {for (var theta = Math.PI / 2, end = Math.PI * 3 / 2; theta <= end; theta += Math.PI) {if (this.theta < theta && this.theta + Math.PI / 200 > theta) {this.theta = theta;this.endTheta = true;break;}}}if (!this.endPhi) {for (var phi = Math.PI / 8, end = Math.PI * 7 / 8; phi <= end; phi += Math.PI * 3 / 4) {if (this.phi < phi && this.phi + Math.PI / 200 > phi) {this.phi = Math.PI / 8;this.endPhi = true;break;}}}}if (!this.endTheta) {if (axis.y == this.thresholdY) {this.theta += Math.PI / 200 * ((this.theta < Math.PI / 2 || (this.theta >= Math.PI && this.theta < Math.PI * 3 / 2)) ? 1 : -1);} else {this.theta += Math.PI / 500;}this.theta %= Math.PI * 2;}if (this.endPhi) {if (this.rippleCount == this.MAX_RIPPLE_COUNT) {this.psi += this.dpsi;this.psi %= Math.PI * 2;}} else {this.phi += Math.PI / ((axis.y == this.thresholdY) ? 200 : 500);this.phi %= Math.PI;}if (this.y <= -this.renderer.height * this.SURFACE_RATE) {this.x += 2;this.y = -this.renderer.height * this.SURFACE_RATE;} else {this.x += this.vx;this.y += this.vy;}return this.z > -this.FOCUS_POSITION && this.z < this.FAR_LIMIT && this.x < this.renderer.width * 1.5;}};$(function () {RENDERER.init();});</script>
</BODY></HTML>

代码分析

这段代码是一个HTML页面，其中包含一个canvas元素和相关的JavaScript代码。这个页面创建了一个飘落花瓣的动画效果。具体分析如下：

1. 首先定义了HTML结构，`<div id="jsi-cherry-container"></div>` 是一个用于承载花瓣动画的容器。

2. CSS样式部分设置了整个页面和容器的宽高为100%，且隐藏了滚动条。

3. JavaScript部分首先引入了jQuery库（虽然在这个示例中没有直接使用）。

4. RENDERER对象是动画的核心逻辑，它包含了初始化、设置参数、重构方法、创建花瓣以及渲染循环等方法。在init方法中，通过setParameters设定画布大小、获取容器元素、创建2D渲染上下文并初始化花瓣数组。createCherries方法用于生成初始数量的花瓣对象。render方法是动画渲染循环，每一帧会清除画布内容，重新排序花瓣，然后逐一渲染每个花瓣，并按照一定间隔添加新的花瓣。

5. CHERRY_BLOSSOM类代表单个花瓣，其构造函数接受一个RENDERER对象作为参数，并初始化花瓣的各种属性，包括位置、速度、颜色渐变等。该类中的init方法用于随机或指定方式初始化花瓣状态，render方法则负责绘制花瓣及涟漪效果。

6. 整个动画模拟了花瓣从画面顶部飘落并在接触到水面时产生涟漪的效果，通过不断更新花瓣的位置和角度，在canvas上绘制出动态变化的花瓣图像。

系列推荐

序号目录直达链接
1HTML实现3D相册https://want595.blog.csdn.net/article/details/138652869
2HTML元素周期表https://want595.blog.csdn.net/article/details/138653653
3HTML黑客帝国字母雨https://want595.blog.csdn.net/article/details/138654054
4HTML五彩缤纷的爱心https://want595.blog.csdn.net/article/details/138654581
5HTML飘落的花瓣https://want595.blog.csdn.net/article/details/138785324
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

写在最后

我是一只有趣的兔子，感谢你的喜欢！

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

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

相关文章

探索Playwright：Python下的Web自动化测试革命

探索Playwright：Python下的Web自动化测试革命

在如今这个互联网技术迅速发展的时代&#xff0c;web应用的质量直接关系着企业的声誉和用户的体验。因此&#xff0c;自动化测试成为了保障软件质量的重要手段之一。今天&#xff0c;我将带大家详细了解一款在测试领域大放异彩的神器——Playwright&#xff0c;并通过Python语言…
阅读更多...
一觉醒来 AI科技圈发生的大小事儿 05月13日

一觉醒来 AI科技圈发生的大小事儿 05月13日

&#x1f4f3;博弈论让 AI 更加正确、高效&#xff0c;LLM 与自己竞争 研究团队设计了共识博弈&#xff0c;通过让语言模型的生成器和判别器相互博弈来提高模型的准确性和内部一致性。这种方法不需要对基础模型进行训练或修改&#xff0c;可以在笔记本电脑上快速执行。研究结果…
阅读更多...
基于微信小程序+JAVA Springboot 实现的【停车场小程序】app+后台管理系统 （内附设计LW + PPT+ 源码+ 演示视频 下载）

基于微信小程序+JAVA Springboot 实现的【停车场小程序】app+后台管理系统 （内附设计LW + PPT+ 源码+ 演示视频 下载）

项目名称 项目名称&#xff1a; 停车场微信小程序的设计与实现 在当前信息技术飞速发展的背景下&#xff0c;停车场微信小程序的开发成为了一个创新的解决方案&#xff0c;旨在提高停车场管理的效率和用户的停车体验。本项目通过深入分析现有停车场管理系统的不足&#xff0c…
阅读更多...
内存屏障 - LINUX KERNEL MEMORY BARRIERS 上 与 下

内存屏障 - LINUX KERNEL MEMORY BARRIERS 上 与 下

内存屏障&#xff08;Memory Barrier&#xff09;是在计算机体系结构中使用的一种同步机制&#xff0c;用于确保在多线程或多核处理器环境中&#xff0c;对共享内存的操作按照预期顺序进行。它们通过强制在特定点执行一些指令来规定内存访问的顺序&#xff0c;并防止内存乱序执…
阅读更多...
使用PageHelper分页插件，发现获取到的total总记录数量不对，无法获取到正确的total数量

使用PageHelper分页插件，发现获取到的total总记录数量不对，无法获取到正确的total数量

目录 1.1、错误描述 1.2、解决方案 1.1、错误描述 周一在工作中&#xff0c;写了一个列表分页的接口&#xff0c;其中使用的是PageHelper分页依赖&#xff0c;原本想着挺简单的&#xff0c;也就是使用PageHelper.startPage(pageNum, pageSize);方法就可以了&#xff0c;代码…
阅读更多...
Linux下COOLFluiD源码编译安装及使用

Linux下COOLFluiD源码编译安装及使用

目录 软件介绍 基本依赖 其它可选依赖 一、源码下载 二、解压缩&#xff08;通过Github下载zip压缩包格式&#xff09; 三、编译安装 3.1 依赖项-BOOST 3.2 依赖项-Parmetis 3.3 依赖项-PETSc 3.4 安装COOLFluiD 四、算例运行 软件介绍 COOLFluiD&#xff08;面向对象…
阅读更多...
学术共振 美妙发声 | 2024美沃斯大会完美收官，米兰柏羽倾力承办

学术共振 美妙发声 | 2024美沃斯大会完美收官，米兰柏羽倾力承办

5月10日-5月12日&#xff0c;为期3天的第十七届美沃斯医疗美容大会在杭州国际博览中心盛大举办&#xff0c;作为行业顶级学术交流平台&#xff0c;本届美沃斯大会不仅是医美行业的一次学术交流盛会&#xff0c;更是一次深度探讨行业未来的远眺之窗。 5月9日&#xff0c;即美沃…
阅读更多...
vue-router路由，带参数的动态路由匹配（2024-05-14）

vue-router路由，带参数的动态路由匹配（2024-05-14）

需求 需要将给定匹配模式的路由映射到同一个组件。例如&#xff0c;我们可能有一个 User 组件&#xff0c;它应该对所有用户进行渲染&#xff0c;但用户 ID 不同。在 Vue Router 中&#xff0c;我们可以在路径中使用一个动态字段来实现&#xff0c;我们称之为 路径参数 &#…
阅读更多...
添砖Java之路(其五)——封装，String，StringBuilder类。

添砖Java之路(其五)——封装，String，StringBuilder类。

封装&#xff1a; 封装意义&#xff1a;更好的维护数据&#xff0c;让使用者无需关心如何使用&#xff0c;只需要知道怎么使用。 Java Bean&#xff1a; 然后我们要知道Java Bean(实体类)标准。 1.对于这个类的成员都需要设为私有&#xff0c;而且要对外提供相应Get,Set的接…
阅读更多...
组合商标申请如何风控提高通过率！

组合商标申请如何风控提高通过率！

最近一个老客户找到普推知产老杨&#xff0c;说要申请注册一个新的商标&#xff0c;是一个组合商标&#xff0c;有图形&#xff0c;两行文字&#xff0c;一行文字的拼音&#xff0c;还有三个字母的简称&#xff0c;组合商标在申请时会进行拆分审查&#xff0c;图形、文字、拼音…
阅读更多...
【C++初阶】第十一站：list的介绍及使用

【C++初阶】第十一站：list的介绍及使用

目录 list的介绍及使用 1.list的含义 2.list的介绍 3.list的使用 1.list的构造 2.list iterator的使用 3.list capacity 4.list element access 5 list modifiers 尾插尾删 和 头插头删 insert 和 erase resize swap clear 6.list sort and reverse 7.list copy vector copy li…
阅读更多...
11.php-fpm模板(监控页面取值)

11.php-fpm模板(监控页面取值)

php-fpm模板(监控页面取值) 开启监控页面配置 #修改php配置文件 vim /etc/php-fpm.d/www.conf pm.status_path /php_status#修改nginx配置文件,添加到nginx配置文件中 vim /etc/nginx/conf.d/default.conflocation /php_status {root html;fastcgi_pass 127.0.…
阅读更多...
肥猫“也能变“型男“？揭秘福派斯牛肉高脂猫粮的神奇效果！

肥猫“也能变“型男“？揭秘福派斯牛肉高脂猫粮的神奇效果！

福猫养成指南&#xff1a;福派斯牛肉高脂猫粮的优点与考虑因素 福派斯牛肉高脂猫粮&#xff0c;这款富含蛋白质与脂肪的猫粮&#xff0c;仿佛是猫咪世界中的美味佳肴&#xff0c;让无数猫咪为之倾倒。然而&#xff0c;这款猫粮的利与弊&#xff0c;你是否都了解呢&#xff1f;接…
阅读更多...
AI模型部署实战：利用OpenCV的CUDA模块加速视觉模型部署流程

AI模型部署实战：利用OpenCV的CUDA模块加速视觉模型部署流程

本文首发于公众号【DeepDriving】&#xff0c;欢迎关注。 一. 前言 我在之前的文章《AI模型部署实战&#xff1a;利用CV-CUDA加速视觉模型部署流程》中介绍了如何使用CV-CUDA库来加速视觉模型部署的流程&#xff0c;但是CV-CUDA对系统版本和CUDA版本的要求比较高&#xff0c;在…
阅读更多...
Linux实验 Shell编程

Linux实验 Shell编程

实验目的&#xff1a; 熟练掌握Shell程序的建立与执行&#xff1b;掌握Shell变量的两种类型&#xff08;Shell环境变量和用户自定义变量&#xff09;及其用法&#xff1b;掌握Shell中的特殊字符、算术与逻辑运算&#xff1b;掌握Shell中输入输出命令&#xff1b;掌握Shell程序…
阅读更多...
在Windows环境下安装CPU版的PyTorch

在Windows环境下安装CPU版的PyTorch

PytTorch是基于Python开发的&#xff0c;首先需要安装Python&#xff0c;Python的安装很简单&#xff0c;这里不再赘述。而 Windows用户能直接通过conda、pip和源码编译三种方式来安装PyTorch。 打开PyTorch官网&#xff08;PyTorch&#xff09;&#xff0c;在主页中根据自己的…
阅读更多...
python数据分析——时间序列

python数据分析——时间序列

时间序列 前言一、Datetime 模块常用函数和数据结构的详细解释datetime模块示例一示例二 二、时间运算示例一示例二示例三 三、时间序列分析自回归(Autoregressive model/AR)模型示例 滑动平均(moving average model/MA)模型示例 自回归滑动平均(Autoregressive moving average…
阅读更多...
企业微信hook接口协议,ipad协议http,发送链接的方式邀请成员进群

企业微信hook接口协议,ipad协议http,发送链接的方式邀请成员进群

发送链接的方式邀请成员进群 参数名必选类型说明uuid是String每个实例的唯一标识&#xff0c;根据uuid操作具体企业微信 请求示例 {"uuid":"3240fde0-45e2-48c0-90e8-cb098d0ebe43","roomid":10696052955013729, "vids":[788130334…
阅读更多...
Qt---文件系统

Qt---文件系统

一、基本文件操作 1. QFile对文件进行读和写 QFile file( path 文件路径) 读&#xff1a; file.open(打开方式) QlODevice::readOnly 全部读取->file.readAll()&#xff0c;按行读->file.readLine()&#xff0c;atend()->判断是否读到文件尾 …
阅读更多...
STM32存储左右互搏 USB接口FATS文件读写U盘

STM32存储左右互搏 USB接口FATS文件读写U盘

STM32存储左右互搏 USB接口FATS文件读写U盘 STM32的USB接口可以例化为Host主机从而对U盘进行操作。SD卡/MicroSD/TF卡也可以通过读卡器转换成U盘使用。这里介绍STM32CUBEIDE开发平台HAL库实现U盘FATS文件访问的例程。 USB接口介绍 常见的USB接口电路部分相似而有不同的连接器…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023