HTML飘落的花瓣

news2024/11/22 19:51:33

目录

写在前面

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.coloradmin.cn/o/1672605.html

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

相关文章

【Linux】文件描述符和重定向

【Linux】文件描述符和重定向

目录 一、回顾C文件 二、系统文件I/O 2.1 系统调用 open 2.2 标志位传参 2.3 系统调用 write 2.4 文件描述符fd 2.5 struct file 2.6 fd的分配规则 2.7 重定向 2.7.1 基本原理&#xff1a; 2.7.2 系统调用 dup2 2.8 标准错误 一、回顾C文件 文件 内容 属性 对…
阅读更多...
阿里云OSS配置跨域及域名访问

阿里云OSS配置跨域及域名访问

1、配置跨域 进入对象存储OSS–>OSS存储桶–>数据安全–>跨域设置–>创建规则 2、配置跨域 Etag x-oss-request-id3、配置结果如下 4、数据源配置 切换到数据管理–>静态页面 配置根页面 保存结果如下 5、配置域名访问 绑定域名 添加txt记录 验证绑定 …
阅读更多...
【CSP CCF记录】202109-2 非零段划分

【CSP CCF记录】202109-2 非零段划分

题目 过程 思路 参考&#xff1a;http://t.csdnimg.cn/XRKTm STL库用法 unique用法 unique是STL中很实用的函数之一&#xff0c;需要#include&#xff08;感谢各位提醒&#xff09;&#xff0c;下面来简单介绍一下它的作用。 unique的作用是“去掉”容器中相邻元素的重复…
阅读更多...
手机配置在线检测工具微信小程序源码

手机配置在线检测工具微信小程序源码

手机配置在线检测工具微信小程序源码&#xff0c;这是一款升级版检测工具&#xff0c;自动检测手机真伪,序列号等。另外还可以给手机检测各项功能是否正常。 由于能检测的项目太多,所以大家到时候自行研究吧。另外支持多做流量主模式,还有外卖CPS,和友情小程序推荐等&#xff…
阅读更多...
Unity自定义动画-Animation动画数据-How is “fileIDToRecycleName“ generated

Unity自定义动画-Animation动画数据-How is “fileIDToRecycleName“ generated

一般美术和程序分工明确的项目 fbx确实是和动画一一对应的&#xff1b; 但一些独立&#xff0c;或者小工作室的项目&#xff0c;就没法保证了&#xff0c;关键还是在于 Unity的 .meta 目录 查找和对比了一下 .fbx 和 .meta&#xff1a; 缓存和不缓存Animation 具体的Animat…
阅读更多...
天诚AIoT无线联网智能门锁即将亮相成都安博会、永康门博会

天诚AIoT无线联网智能门锁即将亮相成都安博会、永康门博会

5月上旬&#xff0c;对于江苏新巢天诚智能技术有限公司&#xff08;以下简称“天诚”&#xff09;而言&#xff0c;依旧忙得如火如荼。随着各地人才公寓、公租房、智慧校园类智慧通行与租住新项目的实施、落地与服务&#xff0c;天诚也不忘初心&#xff0c;携全新升级的AIoT全场…
阅读更多...
DEV--C++小游戏(吃星星(0.5))

DEV--C++小游戏(吃星星(0.5))

目录 吃星星&#xff08;0.5&#xff09; 该版本简介 DEV--C小游戏(吃星星(0.1)) DEV--C小游戏(吃星星(0.2)) 分部代码 头文件 命名空间变量&#xff08;增&#xff09; 副函数&#xff08;新&#xff0c;增&#xff09; 清屏函数 打印地图函数&#xff08;增&…
阅读更多...
d18(169-174)-勇敢开始Java，咖啡拯救人生

d18(169-174)-勇敢开始Java，咖啡拯救人生

目录 特殊文件 .properties 属性文件 读取属性文件 写出属性文件 .xml XML文件 读取XML文件 ​编辑 写出XML文件 约束XML文件 日志技术 Logback 日志级别 特殊文件 .properties 属性文件 每行都是一个键值对 键不能重复 文件后缀一般是.properties 读取属性文件 …
阅读更多...
记录一下 log4j的漏洞

记录一下 log4j的漏洞

目录 背景 bug的产生 bug复现 JNDI 网络安全学习路线 &#xff08;2024最新整理&#xff09; 学习资料的推荐 1.视频教程 2.SRC技术文档&PDF书籍 3.大厂面试题 特别声明&#xff1a; 背景 log4j这次的bug&#xff0c;我相信大家都已经知道了&#xff0c;仅以…
阅读更多...
OpenSSL自签证书并基于Express搭建Web服务进行SSL/TLS协议分析

OpenSSL自签证书并基于Express搭建Web服务进行SSL/TLS协议分析

OpenSSL自签证书并基于Express搭建Web服务进行SSL/TLS协议分析 起因 最近在学习安全协议&#xff0c;大多数实验都是基于Windows下IIS&#xff0c;或者Linux下nginx搭建的Web服务&#xff0c;搭建环境和编写配置文件比较麻烦。而且我有多个不同环境的设备&#xff0c;折腾起来…
阅读更多...
使用Dockerfile配置Springboot应用服务发布Docker镜像-16

使用Dockerfile配置Springboot应用服务发布Docker镜像-16

创建Docker镜像 springboot-docker模块 这个应用可以随便找一个即可&#xff0c;这里不做详细描述了。 pom.xml 依赖版本可参考 springbootSeries 模块中pom.xml文件中的版本定义 <dependencies><dependency><groupId>com.alibaba.cloud</groupId>…
阅读更多...
EasyExcel导出Excel文件——合并单元格多层级数据导出

EasyExcel导出Excel文件——合并单元格多层级数据导出

合并单元格多层数据导出 思维脑图 代码实现 /*** 导出所有信息** param request 请求体*/ Override public void getWilliamExportList(WilliamReqVo request, HttpServletResponse response) throws Exception {List<SysDictData> dataByType dictDataService.getDic…
阅读更多...
添砖Java之路(其五)——封装，String，StringBuilder类。

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

封装&#xff1a; 封装意义&#xff1a;更好的维护数据&#xff0c;让使用者无需关心如何使用&#xff0c;只需要知道怎么使用。 Java Bean&#xff1a; 然后我们要知道Java Bean(实体类)标准。 1.对于这个类的成员都需要设为私有&#xff0c;而且要对外提供相应Get,Set的接…
阅读更多...
WWW服务器搭建（1）——HTTP协议原理篇

WWW服务器搭建（1）——HTTP协议原理篇

目录 一、WWW的相关概念 1.1 WWW的定义 1.2 超文本标记语言HTML 1.3 统一资源定位符URL 1.4 超文本传输协议HTTP 二、HTTP协议工作过程 2.1 DNS解析 2.2 TCP连接过程 2.3 HTTP 请求与响应 2.4 TCP连接断开 三、HTTP请求报文格式 3.1 请求行 3.2 请求头 3.3 空行 …
阅读更多...
大语言模型的数据预处理

大语言模型的数据预处理

文章目录 质量过滤敏感内容过滤数据去重 当收集了丰富的文本数据之后&#xff0c;为了确保数据的质量和效用&#xff0c;还需要对数据进行预处理&#xff0c;从而消除低质量、冗余、无关甚可能有害的数据。一般来说&#xff0c;需要构建并使用系统化的数据处理框架&#xff08;…
阅读更多...
第十五节：贪心算法（下）

第十五节：贪心算法（下）

一 、 贪心算法的解题套路实战一&#xff08;最多的会议宣讲场次&#xff09; 1.1 描述 一些项目要占用一个会议室宣讲&#xff0c;会议室不能同时容纳两个项目的宣讲。 给你每一个项目开始的时间和结束的时间 你来安排宣讲的日程&#xff0c;要求会议室进行的宣讲的场次最多。…
阅读更多...
校园志愿者管理系统带万字文档

校园志愿者管理系统带万字文档

文章目录 校园志愿者管理系统一、项目演示二、项目介绍三、10000字论文参考四、部分功能页面五、部分代码展示六、底部获取项目源码和万字论文参考&#xff08;9.9&#xffe5;带走&#xff09; 校园志愿者管理系统 一、项目演示 校园志愿者管理系统 二、项目介绍 基于Spring…
阅读更多...
快速对比 找出2个名单不同之处

快速对比 找出2个名单不同之处

import pandas as pd# 读取两个Excel文件 df1 pd.read_excel(1.xlsx) df2 pd.read_excel(2.xlsx)# 检查两个DataFrame的列是否相同 if list(df1.columns) ! list(df2.columns):print("两个Excel文件的列不一致。")print("文件1的列&#xff1a;", df1.co…
阅读更多...
免费思维13招之九：时间型思维

免费思维13招之九：时间型思维

免费思维13招之九：时间型思维 免费思维的另一大战略思维——时间型思维。 什么是时间型思维呢？就是在某一个规定的时间内对消费者进行免费，比如一个月中的某一天，或一周中的某一天或一天中的某一个时间段对消费者进行免费。 就在去年，有一个电影院老板弟子，他的电影院营…
阅读更多...
基于SSM的“基于协同过滤的在线通用旅游平台网站”的设计与实现（源码+数据库+文档)

基于SSM的“基于协同过滤的在线通用旅游平台网站”的设计与实现（源码+数据库+文档)

基于SSM的“基于协同过滤的在线通用旅游平台网站”的设计与实现&#xff08;源码数据库文档) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SSM 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统主界面 景点信息界面 后台界面 部分源码…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023