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

基于JavaScript粒子流动效果

news 2026/5/18 20:42:01

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

Postman便携版终极指南：绿色免安装的Windows API测试工具

Postman便携版终极指南&#xff1a;绿色免安装的Windows API测试工具 【免费下载链接】postman-portable &#x1f680; Postman portable for Windows 项目地址: https://gitcode.com/gh_mirrors/po/postman-portable Postman便携版是一款专为Windows用户设计的绿色免安…...

编程新知 2026/5/18 20:41:56

RT-Thread实战：AB32VG1驱动I2C OLED屏实现上电自启动

1. 项目概述与核心思路最近在折腾中科蓝讯的AB32VG1开发板&#xff0c;想用它来驱动一块I2C接口的OLED屏幕。在网上搜了一圈&#xff0c;发现大部分教程都停留在“官方例程”的层面——也就是在RT-Thread的msh&#xff08;类似shell的命令行&#xff09;里输入指令来测试驱动。…...

编程新知 2026/5/18 19:39:28

5步构建智能建筑通信系统：BACnet4J纯Java协议栈的架构师指南

5步构建智能建筑通信系统&#xff1a;BACnet4J纯Java协议栈的架构师指南 【免费下载链接】BACnet4J BACnet/IP stack written in Java. Forked from http://sourceforge.net/projects/bacnet4j/ 项目地址: https://gitcode.com/gh_mirrors/ba/BACnet4J 在智能建筑和工业…...

编程新知 2026/5/18 19:22:27

国产碳化硅MOSFET在通讯电源PFC中的应用与实战解析

1. 项目概述&#xff1a;当通讯电源遇上国产碳化硅MOSFET最近在做一个通讯电源的PFC&#xff08;功率因数校正&#xff09;项目&#xff0c;客户对效率、功率密度和可靠性提出了近乎苛刻的要求。传统的硅基MOSFET方案&#xff0c;在追求更高开关频率以减小磁性元件体积时&#…...

编程新知 2026/5/18 18:41:02

利用Taotoken用量看板精细化管理团队大模型API消费

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 利用Taotoken用量看板精细化管理团队大模型API消费 对于团队管理者而言&#xff0c;在引入大模型能力后&#xff0c;一个普遍存在的…...

编程新知 2026/5/18 17:54:33

别再折腾双系统了！Win11/Win10下用WSL2搞定PyTorch+CUDA环境（附YOLOv5实战）

在Windows上打造高效深度学习环境&#xff1a;WSL2PyTorchCUDA全攻略 对于许多刚接触深度学习的开发者来说&#xff0c;环境配置往往是最令人头疼的第一步。传统做法要么是在Windows和Linux双系统间来回切换&#xff0c;要么忍受虚拟机性能低下的问题。而现在&#xff0c;WSL2&…...

编程新知 2026/5/18 17:11:07

为什么92%的团队在2026年前仓促重构AI栈？——主流框架弃用预警、许可证变更清单与平滑迁移路线图

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;2026年AI工具栈搭建完整指南 构建面向生产环境的AI工具栈&#xff0c;需兼顾前沿性、稳定性与可扩展性。2026年主流实践已从单点模型调用转向模块化、可观测、可编排的智能工作流基础设施。以下为推荐技…...

编程新知 2026/5/18 17:06:51

Claude Code安装+配置国产大模型+CC Switch

Claude Code 是一个运行在终端&#xff08;Terminal&#xff09;里的 AI 程序员。 它不仅仅是一个聊天框&#xff0c;它拥有操作你电脑文件的权限 https://code.claude.com/docs/en/setup 安装 前提条件 需要 Node.js 18 或更新版本 macOS 用户推荐使用 nvm 或 Homebrew 安装…...

编程新知 2026/5/18 15:54:58

redis:AOF

Redis AOF&#xff08;Append Only File&#xff09;核心知识点总结一、核心定义与作用AOF 是 Redis 的一种持久化方式&#xff0c;以文本 / 二进制形式记录所有写命令&#xff08;如 set、lpush 等&#xff09;&#xff0c;核心作用是保存数据、实现宕机后的数据恢复&#xff…...

编程新知 2026/5/18 14:40:34

初创公司如何利用Taotoken以可控成本试用多模型

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 初创公司如何利用Taotoken以可控成本试用多模型 对于资源有限的初创团队而言&#xff0c;在产品开发中引入大模型能力是一个充满机…...

编程新知 2026/5/18 13:54:09