当前位置： 首页 > news >正文

❤️创意网页：创意视觉效果粒子循环的网页动画

news 文章来源：https://blog.csdn.net/VLOKL/article/details/132001429 2025/2/12 9:36:02

✨博主：命运之光 

🌸专栏：Python星辰秘典

🐳专栏：web开发（简单好用又好看）

❤️专栏：Java经典程序设计

☀️博主的其他文章：点击进入博主的主页

前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！

🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。

🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。

🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！

目录

介绍

动态图展示

准备工作

HTML 结构

JavaScript 代码

运行效果

完整代码

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本 

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

总结

介绍

在这篇技术博客中，我们将学习如何使用HTML5 Canvas和JavaScript创建一个视觉效果震撼的网页动画。我们将绘制一组随机颜色和运动的粒子，通过鼠标的移动产生交互效果，营造出一个令人惊叹的视觉效果。本项目将为您展示如何利用Canvas绘制动态粒子效果，并实现鼠标交互效果的加持。

动态图展示

准备工作

在开始之前，请确保您已经具备以下条件：

  • 基本的HTML、CSS和JavaScript知识。
  • 一个支持HTML5的现代web浏览器（推荐使用最新版本的Chrome、Firefox、Safari等）。

HTML 结构

首先，让我们创建一个HTML文件，并添加必要的结构。

<!DOCTYPE html>
<html>
<head><title>视觉效果震撼的网页</title><style>body {margin: 0;overflow: hidden;}canvas {display: block;}</style>
</head>
<body><canvas id="canvas"></canvas><script>// JavaScript代码将在下面添加</script>
</body>
</html>

在这个HTML结构中，我们定义了一个Canvas元素，用于绘制我们的视觉效果震撼的网页动画。

JavaScript 代码

现在，让我们添加JavaScript代码来实现这个视觉效果震撼的网页动画。

<!-- ... 上面的HTML代码 ... --><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");let mouseX = 0;let mouseY = 0;// 设置画布大小canvas.width = window.innerWidth;canvas.height = window.innerHeight;window.addEventListener("mousemove", (e) => {mouseX = e.clientX;mouseY = e.clientY;});class Particle {constructor(x, y, color) {this.x = x;this.y = y;this.color = color;this.radius = Math.random() * 2 + 1;this.angleX = Math.random() * 6;this.angleY = Math.random() * 6;}update() {this.x += Math.sin(this.angleX) * 2;this.y += Math.sin(this.angleY) * 2;this.angleX += 0.01;this.angleY += 0.01;}draw() {ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);ctx.fill();}}const particles = [];function createParticles() {for (let i = 0; i < 100; i++) {const color = `hsl(${Math.random() * 360}, 100%, 50%)`;const particle = new Particle(canvas.width / 2, canvas.height / 2, color);particles.push(particle);}}function animate() {requestAnimationFrame(animate);ctx.fillStyle = "rgba(0, 0, 0, 0.1)";ctx.fillRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < particles.length; i++) {particles[i].update();particles[i].draw();}}createParticles();animate();
</script>
</body>
</html>

以上代码中，我们创建了一个Particle类来表示每个粒子。每个粒子都有其位置、颜色、大小和运动角度。我们监听鼠标移动事件，获取鼠标的坐标，然后通过粒子的位置和角度更新实现交互效果。最后，我们使用Canvas绘制了动态的粒子效果。

运行效果

将上述HTML代码保存为一个HTML文件，并在支持HTML5的现代web浏览器中打开它。您将会看到一个视觉效果震撼的网页动画，许多随机颜色和运动的粒子在画布上自由运动，并随着鼠标的移动而产生交互效果。

完整代码

<!DOCTYPE html>
<html>
<head><title>❤️创意网页：创意视觉效果粒子循环的网页动画</title><style>body {margin: 0;overflow: hidden;}canvas {display: block;}</style>
</head>
<body><canvas id="canvas"></canvas><script>const canvas = document.getElementById("canvas");const ctx = canvas.getContext("2d");let mouseX = 0;let mouseY = 0;// 设置画布大小canvas.width = window.innerWidth;canvas.height = window.innerHeight;window.addEventListener("mousemove", (e) => {mouseX = e.clientX;mouseY = e.clientY;});class Particle {constructor(x, y, color) {this.x = x;this.y = y;this.color = color;this.radius = Math.random() * 2 + 1;this.angleX = Math.random() * 6;this.angleY = Math.random() * 6;}update() {this.x += Math.sin(this.angleX) * 2;this.y += Math.sin(this.angleY) * 2;this.angleX += 0.01;this.angleY += 0.01;}draw() {ctx.fillStyle = this.color;ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);ctx.fill();}}const particles = [];function createParticles() {for (let i = 0; i < 100; i++) {const color = `hsl(${Math.random() * 360}, 100%, 50%)`;const particle = new Particle(canvas.width / 2, canvas.height / 2, color);particles.push(particle);}}function animate() {requestAnimationFrame(animate);ctx.fillStyle = "rgba(0, 0, 0, 0.1)";ctx.fillRect(0, 0, canvas.width, canvas.height);for (let i = 0; i < particles.length; i++) {particles[i].update();particles[i].draw();}}createParticles();animate();</script>
</body>
</html>

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本 

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

总结

在本篇博客中，我们学习了如何使用HTML5 Canvas和JavaScript创建一个视觉效果震撼的网页动画。通过绘制动态粒子效果，并添加鼠标交互效果，我们成功地打造了一个令人惊叹的视觉效果。

 本章的内容就到这里了，觉得对你有帮助的话就支持一下博主把~

🌌点击下方个人名片，交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

 

 

 

相关文章：

❤️创意网页：创意视觉效果粒子循环的网页动画

✨博主&#xff1a;命运之光 &#x1f338;专栏&#xff1a;Python星辰秘典 &#x1f433;专栏&#xff1a;web开发&#xff08;简单好用又好看&#xff09; ❤️专栏&#xff1a;Java经典程序设计 ☀️博主的其他文章&#xff1a;点击进入博主的主页 前言&#xff1a;欢迎踏入…...

编程日记 2023/7/30 13:43:01

【MTI 6.S081 Lab】thread

【MTI 6.S081 Lab】thread 前言调度Uthread: switching between threads (moderate)实验任务Hints解决方案thread_switchthread_create()thread_schedule() Using threads (moderate)实验任务解决方案 Barrier (moderate)实验任务解决方案 本实验前去看《操作系统导论》第29章基…...

编程日记 2023/7/30 13:42:00

AWS / VPC 云流量监控

由于安全性、数据现代化、增长、灵活性和成本等原因促使更多企业迁移到云&#xff0c;将数据存储在本地的组织正在使用云来存储其重要数据。亚马逊网络服务&#xff08;AWS&#xff09;仍然是最受追捧和需求的服务之一&#xff0c;而亚马逊虚拟私有云&#xff08;VPC&#xff0…...

编程日记 2023/7/30 13:40:59

【C++学习笔记】extern “c“以及如何查看符号表

如何查看符号表 要查看.a文件的内容&#xff0c;可以使用ar命令。下面是一些常见的用法&#xff1a; 列出.a文件中包含的所有文件&#xff1a; ar t <filename.a>提取.a文件中的单个文件&#xff1a; ar x <filename.a> <filename.o>将.a文件中的所有文件提…...

编程日记 2023/7/30 13:39:58

24考研数据结构-数组和特殊矩阵

目录 数据结构&#xff1a;数组与特殊矩阵数组数组的特点数组的用途 特殊矩阵对角矩阵上三角矩阵和下三角矩阵稀疏矩阵特殊矩阵的用途 结论 3.4 数组和特殊矩阵3.4.1数组的存储结构3.4.2普通矩阵的存储3.4.3特殊矩阵的存储1. 对称矩阵(方阵)2. 三角矩阵(方阵)3. 三对角矩阵(方阵…...

编程日记 2023/7/30 13:38:57

服务器后台运行程序

代码运行 要让代码在服务器后台运行&#xff0c;有多种方法。在 Linux 系统中&#xff0c;最常见的有以下几种方式&#xff1a; **1. 使用 & 符号&#xff1a;** 在命令后面添加 & 符号可以让程序在后台运行。例如&#xff1a; bash python myscript.py &但是…...

编程日记 2023/7/30 13:37:55

大数据课程D7——hadoop的YARN

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 了解YARN的概念和结构&#xff1b; ⚪ 掌握YARN的资源调度流程&#xff1b; ⚪ 了解Hadoop支持的资源调度器&#xff1a;FIFO、Capacity、Fair&#xff1b; ⚪ 掌握YA…...

编程日记 2023/7/30 13:36:54

Rust vs Go:常用语法对比(十三)

题图来自 Go vs. Rust: The Ultimate Performance Battle 241. Yield priority to other threads Explicitly decrease the priority of the current process, so that other execution threads have a better chance to execute now. Then resume normal execution and call f…...

编程日记 2023/7/30 13:35:51

【【51单片机DA转换模块】】

爆改直流电机&#xff0c;DA转换器 main.c #include <REGX52.H> #include "Delay.h" #include "Timer0.h"sbit DAP2^1;unsigned char Counter,Compare; //计数值和比较值&#xff0c;用于输出PWM unsigned char i;void main() {Timer0_Init();whil…...

编程日记 2023/7/30 13:34:50

[SQL挖掘机] - 字符串函数 - substring

介绍: substring函数是在mysql中用于提取字符串的一种函数。它接受一个字符串作为输入&#xff0c;并返回从该字符串中指定位置开始的一部分子串。substring函数可以用于获取字符串中的特定字符或子串&#xff0c;以便进行进一步的处理或分析。 用法: 下面是substring函数的…...

编程日记 2023/7/30 13:33:48

第一百一十六天学习记录：C++提高：STL-string（黑马教学视频）

string基本概念 string是C风格的字符串&#xff0c;而string本质上是一个类 string和char区别 1、char是一个指针 2、string是一个类&#xff0c;类内部封装了char*&#xff0c;管理这个字符串&#xff0c;是一个char型的容器。 特点&#xff1a; string类内部封装了很多成员方…...

编程日记 2023/7/30 13:32:47

Meta-Transformer 多模态学习的统一框架

Meta-Transformer是一个用于多模态学习的新框架&#xff0c;用来处理和关联来自多种模态的信息&#xff0c;如自然语言、图像、点云、音频、视频、时间序列和表格数据&#xff0c;虽然各种数据之间存在固有的差距&#xff0c;但是Meta-Transformer利用冻结编码器从共享标记空间…...

编程日记 2023/7/30 13:31:46

tinkerCAD案例：24.Tinkercad 中的自定义字体

tinkerCAD案例&#xff1a;24.Tinkercad 中的自定义字体 原文 Tinkercad Projects Tinkercad has a fun shape in the Shape Generators section that allows you to upload your own font in SVG format and use it in your designs. I’ve used it for a variety of desi…...

编程日记 2023/7/30 13:30:44

list与流迭代器stream_iterator

运行代码&#xff1a; //list与流迭代器 #include"std_lib_facilities.h" //声明Item类 struct Item {string name;int iid;double value;Item():name(" "),iid(0),value(0.0){}Item(string ss,int ii,double vv):name(ss),iid(ii),value(vv){}friend ist…...

编程日记 2023/7/30 13:29:43

九耶：冯·诺伊曼体系

冯诺伊曼体系&#xff08;Von Neumann architecture&#xff09;是一种计算机体系结构&#xff0c;它由匈牙利数学家冯诺伊曼于1945年提出。冯诺伊曼体系是现代计算机体系结构的基础&#xff0c;几乎所有的通用计算机都采用了这种体系结构。 冯诺伊曼体系的核心思想是将计算机硬…...

编程日记 2023/7/30 13:28:41

探索UCI心脏病数据：利用R语言和h2o深度学习构建预测模型

一、引言 随着机器学习模型在实际应用中的广泛应用&#xff0c;人们对于模型的解释性和可理解性日益关注。可解释性机器学习是指能够清晰、透明地解释机器学习模型决策过程的一种方法和技术。在许多领域中&#xff0c;如医疗诊断、金融风险评估和自动驾驶等&#xff0c;解释模型…...

编程日记 2023/7/30 13:27:39

基于 moleculer 微服务架构的智能低代码PaaS 平台源码 可视化开发

低代码开发平台源码 低代码管理系统PaaS 平台 无需代码或通过少量代码就可以快速生成应用程序的开发平台。 本套低代码管理后台可以支持多种企业应用场景&#xff0c;包括但不限于CRM、ERP、OA、BI、IoT、大数据等。无论是传统企业还是新兴企业&#xff0c;都可以使用管理后台…...

编程日记 2023/7/30 13:26:37

xrdp登录显示白屏且红色叉

如上图所示&#xff0c;xrdp登录出现了红色叉加白屏&#xff0c;这是因为不正常关闭导致&#xff0c;解决方法其实挺简单的 #进入/usr/tmp cd /usr/tmp #删除对应用户的kdecache-** 文件&#xff08;我这里使用的是kde桌面&#xff09;&#xff0c;例如删除ywj用户对应的文件 …...

编程日记 2023/7/30 13:25:35

Docker安装 Mysql 8.x 版本

文章目录 Docker安装 Mysql 8.0.22Mysql 创建账号并授权Mysql 数据迁移同版本数据迁移跨版本数据迁移 Mysql 5.x 版本与 Mysql 8.x版本是两个大版本&#xff0c;这里演示安装Mysql 8.x版本 Docker安装 Mysql 8.0.22 # 下载mysql $ docker pull mysql 默认安装最新…...

编程日记 2023/7/30 13:24:34

【数理知识】刚体 rigid body 及刚体的运动

文章目录 1 刚体2 刚体一般运动1 平移运动2 旋转运动 Ref 1 刚体 刚体是指在运动中和受力作用后&#xff0c;形状和大小不变&#xff0c;而且内部各点的相对位置不变的物体。绝对刚体实际上是不存在的&#xff0c;只是一种理想模型&#xff0c;因为任何物体在受力作用后&#…...

编程日记 2023/7/30 13:23:33

【UE5 多人联机教程】03-创建游戏

效果 步骤 打开“UMG_MainMenu”&#xff0c;增加创建房间按钮的点击事件 添加如下节点 其中&#xff0c;“FUNL Fast Create Widget”是插件自带的函数节点&#xff0c;内容如下&#xff1a; “创建会话”节点指游戏成功创建一个会话后&#xff0c;游戏的其他实例即可发现&am…...

编程日记 2023/7/30 13:22:32

【时间序列预测 】M4

【时间序列预测 】M4 论文题目&#xff1a;The M4 Competition: 100,000 time series and 61 forecasting methods 中文题目&#xff1a; 论文链接&#xff1a; 论文代码&#xff1a; 论文团队&#xff1a; 发表时间&#xff1a; DOI: 引用&#xff1a; 引用数&#xff1a; 摘要…...

编程日记 2023/7/30 13:21:31

SpringCloud微服务实战——搭建企业级开发框架（五十三）：微信小程序授权登录增加多租户可配置界面

GitEgg框架集成weixin-java-miniapp工具包以实现微信小程序相关接口调用功能&#xff0c;weixin-java-miniapp底层支持多租户扩展。每个小程序都有唯一的appid&#xff0c;weixin-java-miniapp的多租户实现并不是以租户标识TenantId来区分的&#xff0c;而是在接口调用时&#…...

编程日记 2023/7/30 13:20:29

Stability AI推出Stable Diffusion XL 1.0，文本到图像模型

Stability AI宣布推出Stable Diffusion XL 1.0&#xff0c;这是一个文本到图像的模型&#xff0c;该公司将其描述为迄今为止“最先进的”版本。 Stability AI表示&#xff0c;SDXL 1.0能生成更加鲜明准确的色彩&#xff0c;在对比度、光线和阴影方面做了增强&#xff0c;可生成…...

编程日记 2023/7/30 13:19:28

B076-项目实战--宠物上下架 展示 领养 收购订单

目录 上下架功能提供后台宠物列表实现 前台展示前台宠物列表和详情展示店铺展示 领养分析前台后端PetControllerPetServiceImpl 订单需求分析可能产生订单的模块订单模块额外功能 订单设计表设计流程设计 集成基础代码收购订单创建订单前端后端 上下架功能提供 后台宠物列表实…...

编程日记 2023/7/30 13:18:26

【iOS】—— 持久化

文章目录 数据持久化的目的iOS中数据持久化方案数据持久化方式分类内存缓存磁盘缓存 沙盒机制获取应用程序的沙盒路径沙盒目录的获取方式 持久化数据存储方式XML属性列表Preferences偏好设置&#xff08;UserDefaults&#xff09;数据库存储什么是序列化和反序列化&#xff0c;…...

编程日记 2023/7/30 13:17:25

教程 - 在 Vue3+Ts 中引入 CesiumJS 的最佳实践@2023

1. 本篇适用范围与目的 1.1. 适用范围 严格使用 Vue3 TypeScript 的前端项目&#xff0c;包管理器默认使用 pnpm 构建工具使用 Vite4 使用原生 CesiumJS 依赖做应用开发 客户端渲染&#xff0c;因为我不太熟悉 Vue 的服务端渲染&#xff0c;有本篇的介绍后&#xff0c;熟悉…...

编程日记 2023/7/30 13:16:22

最优化方法

一. 图论 1.最小生成树 图的生成树是它的一颗含有其所有顶点的无环连通子图,一 幅加权图的最小生成树(MST)是它的一颗权值(树中的所有边的权值之和) 最小的生成树 • 适用场景&#xff1a;道路规划、通讯网络规划、管道铺设、电线布设等 题目数据 kruskal算法 稀疏图&#x…...

编程日记 2023/7/30 13:15:21

Mongodb 多文档聚合操作处理方法二（Map-reduce 函数）

聚合 聚合操作处理多个文档并返回计算结果。您可以使用聚合操作来&#xff1a; 将多个文档中的值分组在一起。 对分组数据执行操作以返回单个结果。 分析数据随时间的变化。 要执行聚合操作&#xff0c;您可以使用&#xff1a; 聚合管道 单一目的聚合方法 Map-reduce 函…...

编程日记 2023/7/30 13:14:20

ant design vue j-modal 修改高度

问题描述 今天在项目中遇到关于j-modal组件修改弹窗大小问题&#xff0c;我尝试使用直接使用:height"300"&#xff0c;没用效果&#xff0c;弹窗大小依然和没改之前一样&#xff0c;后来找到了这种方式可以去修改j-modal弹窗大小&#xff0c;下面来看下代码实现&…...

编程日记 2023/7/30 13:13:18

做网站图片路径做缓存吗/今日热点新闻视频

上海最近搞活动调休&#xff0c;要搞深度学习&#xff0c;win上还是不方便&#xff0c;准备弄个ubuntu。于是有以下回忆文字。在机器上装了个双系统。花了两天。再也不想玩了。准备用ubuntu来做深度学习的。本文写于2019年11月4日。机器是神舟Z7-KP7D2&#xff0c;i7-7700HQGTX…...

编程日记 2025/2/12 7:55:02

专业做旅游网站/搜索平台

编辑/etc/rsyslog.d/50-default.conf 其中有这么一段*.info;*.notice;*.warn;\auth,authpriv.none;\cron,daemon.none;\mail,news.none -/var/log/messages保存后重启服务&#xff1a;sudo restart rsyslog 转载于:https://www.cnblogs.com/knightly/p/3765332.html...

编程日记 2025/2/12 4:47:42

贵阳免费网站建设/企业营销策划

转载地址&#xff1a;http://www.cnblogs.com/rollenholt/archive/2011/08/28/2156357.html java中的多线程 在java中要想实现多线程&#xff0c;有两种手段&#xff0c;一种是继续Thread类&#xff0c;另外一种是实现Runable接口。 对于直接继承Thread的类来说&#xff0c;代…...

编程日记 2025/2/12 4:36:23

flash网站制作教程/互联网广告平台有哪些

目录第1章 制作纸质加密工具1.1 密码学是什么1.2 代码与加密法1.3 制作纸质加密轮盘1.4 虚拟加密轮盘1.5 如何使用加密轮盘加密1.6 如何使用加密轮盘解密1.7 另一个加密法工具&#xff1a;St.Cyr滑条1.8 A组练习1.9 不用纸质工具做加密1.10 B组练习1.11 双重强度加密1.12 通过计…...

编程日记 2025/2/12 2:35:49

wordpress解决速度/重庆排名seo公司

1、什么是变量a1&#xff0c;其中 a 就是变量名称&#xff0c;1 就是它的值。在程序运行过程中&#xff0c;变量的值一般都会发生改变&#xff0c;内存中会专门开辟一段空间&#xff0c;用来存放变量的值&#xff0c;而变量名将指向这个值所在的内存空间。与变量相对的就是常量…...

编程日记 2025/2/12 1:24:40

老闵行房价/搜索引擎营销优化诊断训练

最近因需要&#xff0c;翻出几年前的Leapmotion感测器&#xff0c;准备用Unity3D做个互动APP&#xff0c;于是连上官网下载SDK。等下载下来一安装调试&#xff0c;瞬间傻眼&#xff0c;居然要求VR设备。我们Lab倒是不缺VR&#xff0c;有几套VIVE&#xff0c;不过不能保证甲方也…...

编程日记 2025/2/12 0:17:12