css 星星闪烁加载框
今天带来的是普灵普灵的loader闪烁加载框
效果如下
开源精神给我们带来了源码
,源码如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>star Particles</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="crossorigin="anonymous" referrerpolicy="no-referrer" /><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #131a1c;}.loader {position: relative;width: 300px;height: 300px;display: flex;justify-content: center;align-self: center;animation: animate-color 7.2s linear infinite;}.loader span {position: absolute;transform-origin: 150px;transform: translateX(-150px) rotate(calc(var(--i) * 30deg));filter: drop-shadow(0 0 5px #3cc2ff) drop-shadow(0 0 15px #3cc2ff) drop-shadow(0 0 30px #3cc2ff);}.loader span i {position: relative;color: #3cc2ff;animation: rotate-stars 2.4s linear infinite;animation-delay: calc(var(--i) * 0.2s);}.loader span::before {content: '\f005';position: absolute;font-family: fontAwesome;font-size: 0.75em;color: #131a1c;animation: rotate-particle 2.4s linear infinite;animation-delay: calc(var(--i) * -0.2s);}@keyframes rotate-stars {0% {transform: rotate(0deg) scale(0);}50% {transform: rotate(180deg) scale(3);}100% {transform: rotate(360deg) scale(0);}}@keyframes animate-color {0% {filter: hue-rotate(0deg);}100% {filter: hue-rotate(360deg);}}@keyframes rotate-particle {0% {scale: 1;opacity: 0;rotate: 0deg;}50% {scale: 1;opacity: 1;rotate: 180deg;}100% {scale: 0;opacity: 0;rotate: 360deg;filter: drop-shadow(-150px 0 #3cc2ff) drop-shadow(150px 0 #3cc2ff) drop-shadow(0 150px #3cc2ff) drop-shadow(0 -150px #3cc2ff);}}</style>
</head><body><div class="loader"><span style="--i:1;"><i class="fa-solid fa-star"></i></span><span style="--i:2;"><i class="fa-solid fa-star"></i></span><span style="--i:3;"><i class="fa-solid fa-star"></i></span><span style="--i:4;"><i class="fa-solid fa-star"></i></span><span style="--i:5;"><i class="fa-solid fa-star"></i></span><span style="--i:6;"><i class="fa-solid fa-star"></i></span><span style="--i:7;"><i class="fa-solid fa-star"></i></span><span style="--i:8;"><i class="fa-solid fa-star"></i></span><span style="--i:9;"><i class="fa-solid fa-star"></i></span><span style="--i:10;"><i class="fa-solid fa-star"></i></span><span style="--i:11;"><i class="fa-solid fa-star"></i></span><span style="--i:12;"><i class="fa-solid fa-star"></i></span></div>
</body></html>
相关文章：
css 星星闪烁加载框
今天带来的是普灵普灵的loader闪烁加载框 效果如下 开源精神给我们带来了源码 ,源码如下 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, in…...
代码随想录算法训练营第二十二天丨 二叉树part09
669. 修剪二叉搜索树 思路 递归法 从图中可以看出需要重构二叉树，想想是不是本题就有点复杂了。 其实不用重构那么复杂。 在上图中我们发现节点0并不符合区间要求，那么将节点0的右孩子 节点2 直接赋给 节点3的左孩子就可以了（就是把节点…...
Apipost连接数据库详解
Apipost提供了数据库连接功能，在接口调试时可以使用数据库获取入参或进行断言校验。目前的Apipost支持：Mysql、SQL Sever、Oracle、Clickhouse、达梦数据库、PostgreSQL、Redis、MongoDB 8种数据库的连接操作 新建数据库连接： 在「项目设置…...
让 Visual Studio 用上 ChatGPT
一、简介 Visual chatGPT Studio 是 Visual Studio 的一个免费扩展，它直接在 IDE 中添加了 chatGPT 功能。它允许用户以可以根据菜单功能的方式使用 chatGPT。 二、功能介绍 该扩展提供了一组使用 ChatGPT 命令，可以在编辑器中选择你需要处理的代码或…...
如何删除错误堆栈里的数据
修改某个主数据。然后发现N年前，某位开发在DTP上做了一个错误堆栈。 这里面有很多历史错误信息，有几千条了，一条条删肯定不可能。 如果不删除，DTP增量无法激活，明天处理链肯定出问题。 于是找到一位印度大神的方法&a…...
k8s使用minio分布式集群作为存储--基础配置篇
背景：minio分布式集群是单独的服务，并没有被k8s管理，k8s与minio集群在不同的服务器上部署，k8s需要使用minio分布式集群作为k8s集群的配置文件及其他文件的存储介质。 1、安装fuse： sudo yum install fuse1.1查询是否有fusemount3 sudo find / -name fusermount31.2确认…...
@Autowired 到底是怎么把变量注入进来的？
[toc] 在 Spring 容器中，当我们想给某一个属性注入值的时候，有多种不同的方式，例如可以通过构造器注入、可以通过 set 方法注入，也可以使用 Autowired、Inject、Resource 等注解注入。 今天我就来和小伙伴们聊一聊，Au…...
【Python学习笔记】函数
1. 函数组成 Python中，我们是这样定义函数的： def function(para1, para2):print("func start")print(para1)print(para2)print("func end")print("让技术总监面试 求职者")return "func return"def 是关键字…...
简单实现一个todoList（上移、下移、置顶、置底）
演示 html部分 <!DOCTYPE html> <html> <head><title>表格示例</title> </head> <body><table border"1"><thead><tr><th>更新时间</th><th>操作</th></tr></thead…...
计算机视觉：池化层的作用是什么？
本文重点 在深度学习中，卷积神经网络（CNN）是一种非常强大的模型，广泛应用于图像识别、目标检测、自然语言处理等领域。而池化层作为CNN中的一个关键步骤，扮演着优化神经网络、提升深度学习性能的重要角色。本文将深入探讨池化层的作用及其重要性，帮助读者更好地理解和应…...
luffy项目前端创建、配置、解决跨域问题、后端数据库迁移
前端 创建前端vue 使用vue-cil创建前端将无用的东西删除 配置 跟后端交互：axios 安装插件：cnpm install -S axios在main.js中写import axios from "axios"; Vue.prototype.$axios axios后续使用就直接this.$axios即可 操作cookie&am…...
电商数据API接口：新服务下电商网站、跨境电商独立站,移动APP的新型拉新武器
互联网的发展改变了我们的生活方式，也改变了企业商家们的营销方式，越来越多的企业商家把产品营销从线下转到线上，选择在线商城、移动APP、微信公众号等互联网工具进行营销活动。而随着营销模式的多元化和电子支付渠道的进一步发展，…...
多线程并发篇---第十一篇
系列文章目录 文章目录 系列文章目录前言一、CAS的原理二、CAS有什么缺点吗？三、引用类型有哪些？有什么区别？前言 一、CAS的原理 CAS叫做CompareAndSwap，比较并交换，主要是通过处理器的指令来保证操作的原子性，它包含 三个操作数： 变量内存地址，V表示旧的预期值，A表示…...
JVM第六讲：JVM 基础 - Java 内存模型引入
JVM 基础 - Java 内存模型引入 很多人都无法区分Java内存模型和JVM内存结构，以及Java内存模型与物理内存之间的关系。本文是JVM第六讲，从堆栈角度引入JMM，然后介绍JMM和物理内存之间的关系, 为后面JMM详解, JVM 内存结构详解, Java 对象模型详…...
机房安全管理制度
#安全运维管理制度# 1、总则 1.1、目的 为进一步规范XXXXX单位机房安全管理工作，防止未经授权的访问，做好机房的防火、防盗等工作，确保XXXXX单位机房物理设施的安全，制定本制度。 1.2、范围 本制度适用于XXXXX单位机房的安全…...
【自然语言处理】— 隐马尔可夫模型详解、例解
【自然语言处理】— 隐马尔可夫模型 【自然语言处理】— 隐马尔可夫模型引例隐马尔可夫模型概念隐马尔可夫模型的关键隐马尔可夫模型的数学表示隐含状态与观测结果状态转移矩阵观测概率矩阵初始状态概率向量 小结 【自然语言处理】— 隐马尔可夫模型 引例 假设有三种不同的骰…...
运行的 akrun 会打印信息到控制台，如何取消打印 -- chatGPT
gpt: 如果运行的程序 akrun 打印信息到控制台，但您希望取消或禁止它的输出，可以尝试以下方法： 1. **重定向输出到空文件**：您可以将程序的标准输出重定向到一个空文件，从而禁止信息输出到控制台。执行以下命令&#…...
【React】03-React面向组件编程2
文章目录 2.6. 组件的生命周期2.6.1. 效果2.6.2. 理解2.6.3. 生命周期流程图(旧)2.6.4. 生命周期流程图(新)2.6.5. 重要的勾子2.6.6. 即将废弃的勾子2.6.7 getSnapshotBeforeUpdate 2.7. 虚拟DOM与DOM Diffing算法2.7.1. 效果2.7.2. 基本原理图 2.6. 组件的生命周期 2.6.1. 效…...
【python编程】python无法import模块的一种原因分析
python系统路径添加错误 报错原因原因分析解决办法补充 最近写代码的时候遇到一个问题，就是想添加工程下fu_convert文件夹下自己编写的convert_fw.py模块，但是出现报错，是个比较低级的问题，但还是简单记录一下 报错原因 无法找到…...
vue3.0与vue2.0的区别
前言 Vue 3.0是一个用于构建用户界面的JavaScript框架。相比于Vue 2.x，Vue 3.0在性能、体积和开发体验上都有了很大的提升。 以下将从不同的角度上去分析Vue 3.0与Vue 2.0的区别： 一、项目架构 从项目搭建和打包工具的选择来看： Vue 2.0 中…...
ESP32智能硬件开发实战：基于MCP协议的AI语音助手全栈指南
ESP32智能硬件开发实战：基于MCP协议的AI语音助手全栈指南 【免费下载链接】xiaozhi-esp32 An MCP-based chatbot | 一个基于MCP的聊天机器人 项目地址: https://gitcode.com/GitHub_Trending/xia/xiaozhi-esp32 在AIoT（人工智能物联网）…...
ESP32 TCP服务端避坑指南：从端口复用到KeepAlive，这些配置项你真的懂了吗？
ESP32 TCP服务端深度配置实战：从端口复用到KeepAlive参数调优 在物联网设备开发中，TCP服务端的稳定性往往决定着整个系统的可靠性。许多开发者在使用ESP32搭建TCP服务端时，虽然能够快速实现基础通信功能，但当面临多设备连接、网络…...
Enformer深度学习模型：基因序列预测的混合架构革命
Enformer深度学习模型：基因序列预测的混合架构革命 【免费下载链接】enformer-pytorch Implementation of Enformer, Deepminds attention network for predicting gene expression, in Pytorch 项目地址: https://gitcode.com/gh_mirrors/en/enformer-pytorch …...
VideoSrt：智能字幕生成工具重新定义视频创作效率
VideoSrt：智能字幕生成工具重新定义视频创作效率 【免费下载链接】video-srt-windows 这是一个可以识别视频语音自动生成字幕SRT文件的开源 Windows-GUI 软件工具。 项目地址: https://gitcode.com/gh_mirrors/vi/video-srt-windows VideoSrt是一款基于Golan…...
Pixel Language Portal保姆级教程：Hunyuan-MT-7B模型蒸馏轻量化（TinyMT）与移动端适配路径
Pixel Language Portal保姆级教程：Hunyuan-MT-7B模型蒸馏轻量化（TinyMT）与移动端适配路径 1. 项目背景与核心价值 Pixel Language Portal（像素语言跨维传送门）是一款基于腾讯Hunyuan-MT-7B大模型构建的创新翻译工具。…...
基于SpringBoot + Vue的校园论坛交流系统
文章目录前言一、详细操作演示视频二、具体实现截图三、技术栈1.前端-Vue.js2.后端-SpringBoot3.数据库-MySQL4.系统架构-B/S四、系统测试1.系统测试概述2.系统功能测试3.系统测试结论五、项目代码参考六、数据库代码参考七、项目论文示例结语前言 💛博主介绍&#…...
Vue2项目实战：集成西瓜播放器xgplayer实现企业级视频播放组件
1. 为什么选择xgplayer做企业级视频播放方案 在在线教育平台这类对视频播放要求较高的场景中，播放器的选择直接影响用户体验和开发效率。我经历过多个项目的实战验证，西瓜播放器xgplayer确实是个不错的选择。它不像某些开源播放器那样需要折腾各种兼容性…...
Unity Shader UV 坐标与纹理平铺Tiling Offset 深度解析
从 UV 空间的数学本质出发，理解 URP 中纹理坐标的缩放（Tiling）与偏移（Offset）控制原理， 并掌握 Shader Graph、HLSL、C# 三种维度的实践技巧。UV 坐标系基础在实时渲染中，UV 坐标是将二维纹理贴…...
go-pry配置文件详解：自定义导入包和调试选项
go-pry配置文件详解：自定义导入包和调试选项 【免费下载链接】go-pry An interactive REPL for Go that allows you to drop into your code at any point. 项目地址: https://gitcode.com/gh_mirrors/go/go-pry go-pry是一款强大的Go语言交互式REPL工具&…...
Qwen3.5-9B-AWQ-4bit实战教程：用‘概括最重要信息’提示词压缩冗余输出
Qwen3.5-9B-AWQ-4bit实战教程：用"概括最重要信息"提示词压缩冗余输出 1. 认识Qwen3.5-9B-AWQ-4bit模型 Qwen3.5-9B-AWQ-4bit是一个强大的多模态AI模型，它能同时理解图片和文字。想象一下，你给这个AI看一张照片，然后问…...