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

基于JavaScript粒子流动效果

news 2026/2/10 23:32:00

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

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2026/1/2 23:01:24

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2026/2/8 20:42:41

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/8 20:41:49

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/10/7 0:32:40

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

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

编程新知 2026/2/2 22:06:13

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/8 0:33:04

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27