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

基于JavaScript粒子流动效果

news 2025/7/8 9:20:52

这是一个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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/7/7 6:59:35

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/7/7 21:32:26

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/7/6 9:09:42

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/7/8 1:38:37

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/6/21 18:39:26

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/7/6 16:09:40

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/7/4 8:55:29

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/7/7 3:03:26

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/7/6 5:55:01

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/6/26 5:08:48