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

【css酷炫效果】纯CSS实现粒子旋转动画

article 2026/3/2 12:08:07

【css酷炫效果】纯CSS实现粒子旋转动画

缘
创作背景
html结构
css样式
完整代码
效果图

想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492008

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

	<div id="particle-container" class='particle-container'></div>

css样式

/* 基本样式重置 */
body, html {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden; /* 防止滚动条出现 */background-color: #000; /* 设置背景颜色为黑色 */
}/* 粒子容器 */
.particle-container {position: relative;width: 100%;height: 100%;pointer-events: none; /* 使容器内的粒子不影响鼠标事件 */
}/* 粒子样式 */
.particle-container::before,
.particle-container::after,
.particle {content: '';position: absolute;top: 50%;left: 50%;width: 2px;height: 2px;background-color: rgba(255, 255, 255, 0.8); /* 设置粒子颜色为白色，带有一定的透明度 */border-radius: 50%;box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 添加一些模糊效果 */animation: particleAnimation 5s infinite ease-in-out;pointer-events: none;
}/* 使用伪元素生成一些粒子 */
.particle-container::before,
.particle-container::after {width: 4px;height: 4px;
}/* 使用大量类生成更多粒子 */
.particle:nth-child(1) { top: 5%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 15%; left: 20%; animation-delay: 0.2s; }
.particle:nth-child(3) { top: 25%; left: 30%; animation-delay: 0.4s; }/* 粒子动画关键帧 */
@keyframes particleAnimation {0% {transform: translate(-50%, -50%) rotate(0deg);opacity: 1;}100% {transform: translate(-50%, -50%) rotate(360deg) translate(200px, -200px);opacity: 0;}
}

完整代码

<!DOCTYPE html>
<html lang="en"> 
<head><title>页面特效</title>
<style type="text/css">
/* 基本样式重置 */
body, html {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden; /* 防止滚动条出现 */background-color: #000; /* 设置背景颜色为黑色 */
}/* 粒子容器 */
.particle-container {position: relative;width: 100%;height: 100%;pointer-events: none; /* 使容器内的粒子不影响鼠标事件 */
}/* 粒子样式 */
.particle-container::before,
.particle-container::after,
.particle {content: '';position: absolute;top: 50%;left: 50%;width: 2px;height: 2px;background-color: rgba(255, 255, 255, 0.8); /* 设置粒子颜色为白色，带有一定的透明度 */border-radius: 50%;box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 添加一些模糊效果 */animation: particleAnimation 5s infinite ease-in-out;pointer-events: none;
}@keyframes particleAnimation {0% {transform: translate(-50%, -50%) rotate(0deg);opacity: 1;}100% {transform: translate(-50%, -50%) rotate(360deg) translate(200px, -200px);opacity: 0;}
}</style></head>
<body><h1 style='color:red;'>斗破苍穹！</h1><div id="particle-container" class='particle-container'></div></body><script>const container = document.getElementById('particle-container');const numberOfParticles = 100;setInterval(function(){for (let i = 0; i < numberOfParticles; i++) {const particle = document.createElement('div');particle.classList.add('particle');particle.style.top = Math.random() * 95+ 'vh';particle.style.left = Math.random() * 95+ 'vw';particle.style.animationDelay = Math.random() * 5 * 0.4+`s`;particle.style.width = (Math.floor(Math.random() * 4) + 1)+`px`;particle.style.height = Math.floor(Math.random() * 4) + 1+`px`;container.appendChild(particle);}},3000);</script></html>

效果图

在这里插入图片描述

【css酷炫效果】纯CSS实现粒子旋转动画

【css酷炫效果】纯CSS实现粒子旋转动画缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492008 缘创作随缘，不定时更新。创作背景刚看到csdn出活动了&…...

编程日记 2026/2/19 22:31:25

k8s中的service解析

k8s中的service解析在k8s中，我们可以通过pod来创建服务。然而，当我们创建多个 Pod 来提供同一项服务时，直接通过 Pod IP 进行访问会变得复杂且不可维护。因此，Kubernetes 提供了 Service 这一抽象概念，用于对外暴露…...

编程日记 2026/2/21 3:31:42

案例：图书管理

掌握图书管理案例的实现，能够使用Spring Boot整合Thymeleaf完成图书管理案例。 1.任务需求 （1）项目使用Spring Boot整合Thymeleaf，项目展示的页面效果全部通过Thymeleaf的模板文件实现。 （2）查询所有图书。…...

编程日记 2026/2/27 20:39:57

Docker和Dify学习笔记

文章目录 1 docker学习1.1 基本命令使用1.1.1 docker ps查看当前正在运行的镜像1.1.2 docker stop停止容器1.1.3 docker compose容器编排1.1.4 docker网络[1] 进入到容器里面敲命令[2] docker network ls[3] brige网络模式下容器访问宿主机的方式 2 Dify的安装和基础使用2.1 下…...

编程日记 2026/2/21 11:21:39

【Java集合夜话】第1篇：拨开迷雾，探寻集合框架的精妙设计

欢迎来到Java集合框架系列的第一篇文章！🌹 本系列文章将以通俗易懂的语言，结合实际开发经验，带您深入理解Java集合框架的设计智慧。🌹 若文章中有任何不准确或需要改进的地方，欢迎大家指出，让我…...

编程日记 2026/2/28 22:51:32

将用户信息存储或者更新到Session sessionStorage.setItem("userID",loginform.value.username); sessionStorage.setItem(loginTime, Date.now()); 获取Session信息 const storedUserInfo sessionStorage.getItem(userID); const loginTime sessionStorage.get…...

编程日记 2026/2/15 1:02:53

线性代数（1）用 excel 计算鸡兔同笼

线性代数excel计算鸡兔同笼案例：鸡兔同笼问题的三种解法（递进式教学）一、问题描述二、方程式解法（基础版）步骤解析三、线性代数解法（进阶版）1. 方程组转化为矩阵形式2. 矩阵求解（逆…...

编程日记 2026/2/13 23:28:09

Qt中多线程

在Qt中实现多线程主要有两种常用方式：基于QThread的子类化和QObjectmoveToThread的Worker模式。以下是详细说明和示例代码： 1. 传统方法：继承 QThread（适用于简单任务） #include <QThread> #include <QDebug…...

编程日记 2026/2/24 14:45:42

Grokking System Design 系统设计面试问题

《Grokking the System Design Interview》列举了多个经典的系统设计题目，通常按照不同的业务场景和技术难点进行分类。以下是一些常见的分类和题目示例： 1. 社交网络类设计 Twitter（支持关注/取关、推文、Feed 流）设计 Facebook Messenger（即时聊天，支持在线/离线状…...

编程日记 2026/2/17 9:01:27

Android Launcher3 首屏图标锁定技术方案解析

一、需求背景与技术挑战在Android 13系统定制开发中，需实现Launcher首屏图标固定功能。该需求需在以下技术维度进行突破： 拖拽事件拦截机制：需精准识别拖拽目标区域布局层级判定：准确识别第一屏的布局标识跨屏操作限制&…...

编程日记 2026/2/24 8:39:05

hubilder打包ios app, 并上传TestFlight

目录一前提条件不是该项目成员解决 1. 直接找到该项目的管理人员去设置你的账号 2. 直接重新生成APPID(一般不建议的，可以查看) 3. 如果是离职人员，可以让他将项目权限转让出来 - 如何转让应用 - DCloud问答未申请ios证书和描述文件 APP ID 的…...

编程日记 2026/2/17 6:07:04

AI实干家：HK深度体验-【第7篇-新加坡与香港家办业务对比】

PART I 家族办公室（家办）的定义与统计口径分析家族办公室（Family Office, FO）的统计口径因地区、政策及数据来源差异而有所不同，需结合官方定义与第三方研究综合判断： 一、家办定义与统计口径核心定义&…...

编程日记 2026/2/15 3:41:00

Java集成MQTT和Kafka实现稳定、可靠、高性能的物联网消息处理系统

Java集成MQTT和Kafka实现高可用方案 1. 概述在物联网(IoT)和分布式系统中，消息传递的可靠性和高可用性至关重要。本文将详细介绍如何使用Java集成MQTT和Kafka来构建一个高可用的消息处理系统。 MQTT(消息队列遥测传输)是一种轻量级的发布/订阅协议，适用于资源受限的设备和…...

编程日记 2026/2/21 6:53:08

【总结篇】java多线程,新建线程有几种写法,以及每种写法的优劣势

java多线程新建线程有几种写法,以及每种写法的优劣势 [1/5]java多线程新建线程有几种写法–继承Thread类以及他的优劣势[2/5]java多线程-新建线程有几种写法–实现Runnable接口以及他的优劣势[3/5]java多线程新建线程有几种写法–实现Callable接口结合FutureTask使用以及他的…...

编程日记 2026/2/20 18:31:32

剑指 Offer II 107. 矩阵中的距离

comments: true edit_url: https://github.com/doocs/leetcode/edit/main/lcof2/%E5%89%91%E6%8C%87%20Offer%20II%20107.%20%E7%9F%A9%E9%98%B5%E4%B8%AD%E7%9A%84%E8%B7%9D%E7%A6%BB/README.md 剑指 Offer II 107. 矩阵中的距离题目描述给定一个由 0 和 1 组成的矩阵 mat …...

编程日记 2026/2/18 8:54:03

雅可比行列式

定义和推导雅可比行列式，它是以n个n元函数的偏导数为元素的行列式。以下是雅可比式的推导过程： 二阶雅可比式的推导以二重积分中的极坐标变换为例，设 ： ，则 x 和 y 的全微分分别为： 可以将 dx 与 dy 视作…...

编程日记 2026/2/18 8:55:34

UMA架构下的GPU 显存

GPU 显存 (Graphics Memory) 在大多数现代设备（包括 Android 手机、嵌入式设备等）上，确实是使用 DDR（Double Data Rate SDRAM） 类型的内存。不过，具体实现方式根据硬件架构有所不同，主要分为以…...

编程日记 2026/2/14 6:02:03

【大模型基础_毛玉仁】3.2 上下文学习

目录 3.2 上下文学习3.2.1 上下文学习的定义3.2.2 演示示例选择1）直接检索2）聚类检索3）迭代检索 3.2.3 性能影响因素 3.2 上下文学习随模型训练数据规模和参数量的扩大，大语言模型涌现出了上下文学习（In-Context Lea…...

编程日记 2026/2/18 12:26:36

在 ARM 嵌入式 Linux 下使用 C/C++ 实现 MQTT

在 ARM 嵌入式 Linux 下使用 C/C 实现 MQTT 通信是一个常见的需求，尤其是在资源受限的环境中。以下是一个详细的教程，使用 Eclipse Paho C Client 库来实现 MQTT 客户端。 1. 安装 Eclipse Paho C Client 库 Eclipse Paho C Client 是一个轻量级的 MQTT…...

编程日记 2026/2/13 23:49:36

Oraclelinux问题-/var/log/pcp/pmlogger/目录超大

有套19c rac环境，操作系统是oracle linux 8.10，日常巡检时发现/var/log/pcp/pmlogger/目录超大，如下 [rootdb1 ~]# du -sh /var/log/pcp/pmlogger/* 468G /var/log/pcp/pmlogger/db 1.3G /var/log/pcp/pmlogger/oracle06-106 754M /…...

编程日记 2026/2/23 18:45:51

【大语言模型_8】vllm启动的模型通过fastapi封装增加api-key验证

背景： vllm推理框架启动模型不具备api-key验证。需借助fastapi可以实现该功能代码实现： rom fastapi import FastAPI, Header, HTTPException, Request,Response import httpx import logging# 创建 FastAPI 应用 app FastAPI() logging.basicConfig(…...

编程日记 2026/2/15 2:15:52

学习笔记 ASP.NET Core Web API 8.0部署到iis

一.修改配置文件修改Program.cs配置文件将 if (app.Environment.IsDevelopment()) {app.UseSwagger();app.UseSwaggerUI(); }修改为 app.UseSwagger(); app.UseSwaggerUI(); 二.安装ASP.NET Core Runtime 8.0.14 文件位置https://dotnet.microsoft.com/en-us/download/do…...

编程日记 2026/2/18 9:09:53