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

基于JavaScript粒子流动效果

news 2026/3/31 19:13:02

这是一个HTML文件，主要包含了一些CSS样式和JavaScript代码，用于创建一个动画效果。

在CSS部分，定义了一些基本的样式，包括页面的背景颜色、位置、大小等。特别的，定义了两种球形元素（.ball_A 和 .ball_B）的样式，以及它们的动画效果。

在JavaScript部分，定义了一个名为Ball的类，用于创建球形元素，并控制它们的运动。Ball类有一些方法，如random用于生成随机数，render用于渲染球形元素，update用于更新球形元素的位置。

在页面加载时，会调用creatBall函数创建一系列的球形元素，并将它们添加到页面中。然后，调用render函数，使这些球形元素按照预定的动画效果进行运动。

总的来说，这个HTML文件的主要功能是创建一个动画效果，其中包含一系列的球形元素在页面上进行运动。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body,html{width: 100%;height: 100%;background: #222;overflow: hidden;position: relative;--m-x:51px;--m-y:51px}.playground{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 600px;height: 300px;display: flex;justify-content: space-around;align-items: center;}.ball{width: 100px;height: 100px;border-radius: 50%;/*border: 1px solid #FFFFFF;*/position: relative;}.ball_A{/*border: 1px solid #a101f6;*/color: #FFFFFF;background: #a101f6;cursor: pointer;animation: scaleBall 0.5s forwards;}.ball_B{/*border: 1px solid #FFFFFF;*/color: #FFFFFF;}.ball_B1{border: none;width: 20px;height: 20px;background:#0d84ff;transform: scale(0);left: -20px;border-radius: 10px 30px  20px  20px  / 15px  10px  25px  25px;animation: transBall 0.8s 1.2s forwards;}.text{display: inline-block;width: 100px;line-height: 100px;color: white;text-align: center;}@keyframes scaleBall {0%{transform: scale(1.0);}100%{transform: scale(1.3);background: none;/*border: 1px solid #fff;*/}}.small-ball{width: 10px;height: 10px;background: #0d84ff;border-radius: 50%;position: absolute;/*animation: moveBall 0.5s forwards;*/}@keyframes transBall {0%{transform: scale(0);border-radius: 5px 10px  15px  5px  / 8px  7px  6px  15px;}50%{border-radius: 10px 30px  20px  20px  / 15px  10px  25px  25px;}100%{transform: scale(6);border-radius: 50px}}</style>
</head>
<body>
<div class="playground"><div class="ball ball_A"><span class="text">A</span></div><div class="ball ball_B"><span class="text">B</span></div>
</div>
<div class="playground"><div class="ball" style="opacity: 0"><span class="text">a</span></div><div class="ball ball_B1">
<!--        <span class="text">B</span>--></div>
</div>
<script>const playground = document.querySelector('.playground')const ctx = document.querySelector('.ball_A')const ctx_b = document.querySelector('.ball_B')const play = playground.getBoundingClientRect()const rect = ctx.getBoundingClientRect()const rect_b = ctx_b.getBoundingClientRect()const list = []const pox = {y: rect.height,x: rect.width,bx: rect_b.left - play.left,by: rect_b.top - play.top}class Ball{constructor(con,x,y) {this.x = x;this.y = y;this.width = con.x;this.height = con.y;this.ex = this.random(-20,con.x)this.ey = this.random(-20,con.y)this.dx = this.random(-5, 6); // -5~5this.dy = this.random(-5, 6); // -5~5this.dom = ''}random(min,max){return Math.random()* (max - min) + min;}render(index,step){const move = `@keyframes moveBall_${index} {0%{top:${this.y}px;left: ${this.x}px;}50%{top:${this.ey}px;left: ${this.ex}px;}100%{top:${this.y}px;left: ${pox.bx - 100}px;}}`const sheet = document.styleSheets[0];sheet.insertRule(move, 0)const div = document.createElement("div")div.className = 'small-ball'div.style.transform = `scale(${Math.random() + 0.5})`div.style.opacity = Math.random() + 0.5div.style.animation = `moveBall_${index} ${step}s cubic-bezier(0.23, 1, 0.32, 1) forwards`ctx.appendChild(div)this.dom = div}}creatBall()function creatBall(){let step = 2const x = pox.x / 2const y = pox.y / 2for (let i = 0; i< 50; i++){step += 0.01const ball = new Ball(pox,x,y)ball.render(i,step)list.push(ball)}}</script>
</body>
</html>

相关文章：

基于JavaScript粒子流动效果

这是一个HTML文件&#xff0c;主要包含了一些CSS样式和JavaScript代码&#xff0c;用于创建一个动画效果。 在CSS部分&#xff0c;定义了一些基本的样式&#xff0c;包括页面的背景颜色、位置、大小等。特别的&#xff0c;定义了两种球形元素&#xff08;.ball_A 和 .ball_B&am…...

编程日记 2023/9/6 11:34:12

【U盘】实现U盘清空并重置恢复存储

打开电脑&#xff0c;将U盘插入USB端口&#xff0c;点按快捷键【WinR】&#xff0c;弹出运行对话框&#xff0c;输入命令 diskpart 进入命令提示符窗口 输入指令 list disk 查看现在的硬盘 这里显示的U盘编号是“1”&#xff0c;因此输入select disk “1”&#xff0c;就是选择…...

编程日记 2023/9/6 11:33:11

基于Hugo 搭建个人博客网站

目录 1.环境搭建 2.生成博客 3.设置主题 4.将博客部署到github上 1.环境搭建 1&#xff09;安装Homebrew brew是一个在 macOS 操作系统上用于管理软件包的包管理器。类似于centos下的yum或者ubuntu下的apt&#xff0c;它允许用户通过命令行安装、更新和管理各种软件工具、…...

编程日记 2023/9/6 11:32:10

Springboot + Sqlite实战(离线部署成功)

最近有个需求&#xff0c;是手机软件离线使用&#xff0c; 用的springboot mybatis-plus mysql&#xff0c;无法实现&#xff0c;于是考虑使用内嵌式轻量级的数据库SQLlite 引入依赖 <dependency><groupId>org.xerial</groupId><artifactId>sqlite-…...

编程日记 2023/9/6 11:31:08

【后量子密码】CRYSTALS-KYBER 算法（一）：MLWE 问题与NTT（附源码分析）

一、前言 大多数基于数论的密码学，如Diffie-Hellman协议和RSA加密系统，依赖于大整数因子分解或特定群的离散对数等困难问题。然而，Shor 在1997年给出了对所有这些问题的高效量子算法，这将使得基于数论的密码系统在未来量子计算机时代变得不安全。相比之下，目前对于格密码…...

编程日记 2023/9/6 11:30:07

VTK——angleWidget的3D转换

文章目录 3D空间坐标转换例程心得 3D空间坐标转换 在冠状图、矢状面、横截面等创建的角度组件的三个端点坐标&#xff0c;不能直接用在3D视图中。这是因为2D切片的坐标是基于像素的&#xff0c;而3D空间的坐标可能是基于实际物理尺寸的。 解决方案是使用2D点的坐标、切片的物理…...

编程日记 2023/9/6 11:29:05

HDFS 集群动态节点管理

目录 一、动态扩容、节点上线 1.1 背景 1.2 扩容步骤 1.2.1 新机器基础环境准备 1.2.2 Hadoop 配置 1.2.3 手动启动 DataNode 进程 1.2.4 Web 页面查看情况 1.2.5 DataNode 负载均衡服务 二、动态缩容、节点下线 2.1 背景 2.2 缩容步骤 2.2.1 添加退役节点 …...

编程日记 2023/9/6 11:28:04

postman9.12.汉化版（附有下载链接）

想用英文版本的可以直接点击下载最新版本 这里直接付上9.12.2版本的下载链接&#xff0c;如果大家要下载别的版本&#xff0c;可以直接修改链接里面的版本号即可 &#xff0c;下面是汉化包下载 链接&#xff1a;https://pan.baidu.com/s/1izK3HfqlfXJdq6KIYeJ2zw?pwdpetk 提…...

编程日记 2023/9/6 11:27:03

mysql与msql2数据驱动

mysql基本使用 数据库操作&#xff08;DDL&#xff09; -- 数据考操作 -- 1.查询所有数据库 SHOW DATABASES;-- 2.选择数据库 USE learn_mysql;-- 3.当前正在使用的数据库 SELECT DATABASE();-- 4.创建数据库 CREATE DATABASE IF NOT EXISTS learn_mysql;-- 5.删除数据库 DRO…...

编程日记 2023/9/6 11:26:02

解决微信小程序回调地狱问题

一、背景 小程序开发经常遇到根据网络请求结果&#xff0c;然后继续 处理下一步业务操作&#xff0c;代码如下&#xff1a; //1第一个请求 wx.request({url:"https://example.com/api/",data:data,success:function(res){//2第二个请求 wx.request({url:"http…...

编程日记 2023/9/6 11:24:57

cron介绍

cron表达式在线生成 在使用定时调度任务的时候&#xff0c;我们最常用的&#xff0c;就是cron表达式了。通过cron表达式来指定任务在某个时间点或者周期性的执行。 cron表达式的组成 cron表达式是一个字符串&#xff0c;由6到7个字段组成&#xff0c;用空格分隔。其中前6个字…...

编程日记 2023/9/6 11:23:54

mkp勒索病毒的介绍和防范，勒索病毒解密，数据恢复

mkp勒索病毒是一种新兴的电脑病毒&#xff0c;它会对感染的电脑进行加密&#xff0c;并要求用户支付一定的赎金才能解锁。这种病毒已经引起了全球范围内的关注&#xff0c;因为它不仅具有高危害性&#xff0c;而且还有很强的传播能力。本文将对mkp勒索病毒进行详细介绍&#xf…...

编程日记 2023/9/6 11:22:51

【面试精品】关于面试会遇到的Apache相关的面试题

1. Apache HTTP Server 基于什么协议提供网页浏览服务&#xff1f; 答&#xff1a;基于标准的http网络协议提供网页浏览服务。 2. 简述编译安装httpd软件包的基本过程&#xff1f; 答&#xff1a;解包&#xff0c;配置&#xff0c;编译&#xff0c;安装。 3. 编译安装httpd软…...

编程日记 2023/9/6 11:21:50

python对文件转md5，用于文件重复过滤

直接上代码 import hashlibdef calculate_md5(file_path):# 创建 MD5 哈希对象md5_hash hashlib.md5()# 打开文件并逐块读取&#xff0c;更新哈希值with open(file_path, rb) as file:while True:data file.read(8192) # 逐块读取文件&#xff0c;每块大小为 8192 字节if n…...

编程日记 2023/9/6 11:20:49

mac苹果电脑删除顽固残留软件图标

核心&#xff1a;删除“启动台”数据库里对应app的信息 1、打开访达&#xff08;Finder&#xff09;&#xff0c;点击最顶部菜单栏的【前往》前往文件夹】&#xff0c;接着输入【/private/var/folders】 2、在弹出的访达&#xff08;Finder&#xff09;窗口搜索栏输入【com.ap…...

编程日记 2023/9/6 11:19:48

【jsvue】联合gtp仿写一个简单的vue框架，以此深度学习JavaScript

用 gtp 学习 Vue 生命周期的原理 lifecycle.js function Vue(options) {// 将选项保存到实例的 $options 属性中this.$options options;// 若存在 beforeCreate 钩子函数&#xff0c;则调用之if (typeof options.beforeCreate function) {options.beforeCreate.call(this);…...

编程日记 2023/9/6 11:18:47

linux centos7 系统之编程:求水仙花数

在Python编程中&#xff0c;有列表、元组和字典三类变量可以使用&#xff0c;方便数据的存储与处理&#xff0c;而bash中仅有字符串变量、数组、函数可用&#xff0c;方法运用上受到限制&#xff0c;这与bash基于C语言&#xff0c;注重语法结构的严谨有关。而Python等高级语言更…...

编程日记 2023/9/6 11:17:45

git中的cherry-pick和merge有些区别以及cherry-pick怎么用

git中的cherry-pick和merge在使用场景上有些区别: cherry-pick用于将另一个分支的某一次或几次commit应用到当前分支。它可以选择性地拉取代码修改。merge用于将两个分支合并成一个新分支。它会把整个分支上的所有修改都合并过来。 具体区别:cherry-pick通常用于将bug修复从发…...

编程日记 2023/9/6 11:16:44

【前端】CSS-Flex弹性盒模型布局

目录 一、前言二、Flex布局是什么1、任何一个容器都可以指定为Flex布局2、行内元素也可以使用Flex布局3、Webkit内核的浏览器&#xff0c;必须加上-webkit前缀 三、基本概念四、flex常用的两种属性1、容器属性2、项目属性 五、容器属性1、flex-direction①、定义②、语句1&…...

编程日记 2023/9/6 11:15:43

Android AAPT: error: resource color 异常原因处理

异常体现&#xff1a; Android resource linking failed ERROR:E:\software\Developer\APP\GaoDeTest2\app\src\main\res\values\themes.xml:3:5-9:13: AAPT: error: resource color/purple_500 (aka com.example.gaodetest2:color/purple_500) not found.ERROR:E:\software\De…...

编程日记 2023/9/6 11:14:42

超越GUI：用Tcl命令流高效编辑Tessent DftSpecification的三种进阶玩法

超越GUI&#xff1a;用Tcl命令流高效编辑Tessent DftSpecification的三种进阶玩法 在大型SoC项目中&#xff0c;频繁修改IJTAG网络结构是每位资深DFT工程师的日常。当设计迭代进入深水区&#xff0c;图形界面操作和手动文本编辑的效率瓶颈会愈发明显——每次增减SIB、调整TDR位…...

编程新知 2026/3/31 19:04:26

Arctic数据压缩与序列化：LZ4压缩如何提升性能10倍的终极指南

Arctic数据压缩与序列化&#xff1a;LZ4压缩如何提升性能10倍的终极指南 【免费下载链接】arctic High performance datastore for time series and tick data 项目地址: https://gitcode.com/gh_mirrors/ar/arctic Arctic是一个专为时间序列和tick数据设计的高性能数据…...

编程新知 2026/3/31 18:03:36

错误处理与HTTP状态码：Zalando RESTful API Guidelines 的异常管理机制

错误处理与HTTP状态码&#xff1a;Zalando RESTful API Guidelines 的异常管理机制 【免费下载链接】restful-api-guidelines A model set of guidelines for RESTful APIs and Events, created by Zalando 项目地址: https://gitcode.com/gh_mirrors/re/restful-api-guideli…...

编程新知 2026/3/31 17:33:22

2026.3.31 TRO成功和解案例 案件号：25-cv-25717，1000美金和解Palmer律所3000美金索赔，沃尔玛店铺全额解冻！

TRO经典案例案件概述案件号&#xff1a;25-cv-25717&#xff08;点击查看案件详情&#xff09;案件时间&#xff1a;2025-12-8收到TRO时间&#xff1a;2025-12-20销售平台&#xff1a;沃尔玛冻结金额&#xff1a;$209美金Palmer律所索赔额&#xff1a;$3,000美金侵权产品销售量…...

编程新知 2026/3/31 16:48:23

STM32 PWR电源管理与低功耗模式实战指南

1. STM32电源管理基础与实战意义 在嵌入式系统开发中&#xff0c;电源管理往往是最容易被忽视却至关重要的环节。想象一下你的智能手环如果每天都需要充电&#xff0c;或者无线传感器节点每隔几小时就要更换电池&#xff0c;这样的产品显然缺乏实用价值。STM32的PWR模块正是为解…...

编程新知 2026/3/31 16:22:09

长期用嘴呼吸，颈肩肌肉代偿性紧张

很多人因为鼻塞、习惯等原因长期用嘴呼吸&#xff0c;却不知道这会导致颈肩肌肉代偿性紧张&#xff0c;影响颈腰椎健康。用嘴呼吸时&#xff0c;头部会不自觉地向前伸、仰起&#xff0c;颈椎长期处于过度前屈或后伸状态&#xff0c;颈部肌肉持续牵拉&#xff0c;容易导致肌肉劳…...

编程新知 2026/3/31 16:03:44

高效数据采集解决方案：快手内容获取工具的技术实现与应用指南

高效数据采集解决方案&#xff1a;快手内容获取工具的技术实现与应用指南 【免费下载链接】kuaishou-crawler As you can see, a kuaishou crawler 项目地址: https://gitcode.com/gh_mirrors/ku/kuaishou-crawler 在信息爆炸的时代&#xff0c;如何高效、合规地获取网络…...

编程新知 2026/3/31 16:03:44

GLM-OCR服务监控与运维指南：使用Prometheus与Grafana搭建看板

GLM-OCR服务监控与运维指南&#xff1a;使用Prometheus与Grafana搭建看板 想象一下&#xff0c;你负责的GLM-OCR服务正在线上稳定运行&#xff0c;突然接到业务方反馈&#xff0c;说图片识别接口响应变慢了。你第一反应是什么&#xff1f;是登录服务器看日志&#xff0c;还是去…...

编程新知 2026/3/31 14:17:25

Wan2.2-I2V-A14B实战案例：地方政府生成‘乡村振兴’政策解读动画短视频系列

Wan2.2-I2V-A14B实战案例&#xff1a;地方政府生成乡村振兴政策解读动画短视频系列 1. 项目背景与需求分析 近年来&#xff0c;随着数字政务的快速发展&#xff0c;各级地方政府越来越重视利用新媒体技术进行政策宣传。某地方政府计划开展"乡村振兴"系列政策解读工…...

编程新知 2026/3/31 14:09:19

OpenRocket：革新性全流程火箭设计的开源技术突破实践

OpenRocket&#xff1a;革新性全流程火箭设计的开源技术突破实践 【免费下载链接】openrocket Model-rocketry aerodynamics and trajectory simulation software 项目地址: https://gitcode.com/GitHub_Trending/op/openrocket OpenRocket作为一款基于Java开发的开源火…...

编程新知 2026/3/31 12:37:57