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 中…...
思源宋体TTF：开源字体选型与商业价值指南
思源宋体TTF：开源字体选型与商业价值指南 【免费下载链接】source-han-serif-ttf Source Han Serif TTF 项目地址: https://gitcode.com/gh_mirrors/so/source-han-serif-ttf 你是否曾为商业项目的字体授权成本而困扰？是否在寻找既能满足专业设计…...
终极Übersicht小部件调试指南：10个实用工具和高效方法
终极bersicht小部件调试指南：10个实用工具和高效方法 【免费下载链接】uebersicht ˈyːbɐˌzɪt 项目地址: https://gitcode.com/gh_mirrors/ue/uebersicht bersicht是一款强大的macOS桌面小部件工具，让开发者能够在桌面上创建和运行自定义小部…...
TouchGal：3个关键功能让你成为真正的Galgame收藏家
TouchGal：3个关键功能让你成为真正的Galgame收藏家 【免费下载链接】kun-touchgal-next TouchGAL是立足于分享快乐的一站式Galgame文化社区, 为Gal爱好者提供一片净土! 项目地址: https://gitcode.com/gh_mirrors/ku/kun-touchgal-next 你是否曾为寻找心仪的…...
MDS vs PCA：哪种降维方法更适合你的数据？
MDS与PCA深度对比：从算法原理到实战选型指南 当面对高维数据时，降维技术就像一把打开数据奥秘的钥匙。在众多降维方法中，多维尺度变换(MDS)和主成分分析(PCA)是最常被比较的两种经典技术。它们都能将复杂的高维数据简化为更易理解的二维或三维…...
如何轻松备份微信聊天记录：WeChatMsg完整指南让数据掌控权回归你手
如何轻松备份微信聊天记录：WeChatMsg完整指南让数据掌控权回归你手 【免费下载链接】WeChatMsg 提取微信聊天记录，将其导出成HTML、Word、CSV文档永久保存，对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trend…...
Mermaid Live Editor：代码驱动的实时图表协作新范式
Mermaid Live Editor：代码驱动的实时图表协作新范式 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-live-editor …...
StructBERT中文相似度模型保姆级教学：如何用TSNE可视化高维句向量空间分布
StructBERT中文相似度模型保姆级教学：如何用TSNE可视化高维句向量空间分布 1. 引言：为什么需要可视化句向量？ 当你使用StructBERT这样的模型计算句子相似度时，你得到的只是一个0到1之间的数字。这个数字告诉你两个句子“有多像”…...
幻兽帕鲁存档迁移完全手册：告别数据丢失的终极解决方案
幻兽帕鲁存档迁移完全手册：告别数据丢失的终极解决方案 【免费下载链接】palworld-host-save-fix 项目地址: https://gitcode.com/gh_mirrors/pa/palworld-host-save-fix 你是否曾在更换幻兽帕鲁服务器时，眼睁睁看着自己辛苦培养的角色数据消失无…...
Matlab_Simulink与Carsim的联合仿 擅长基于群智能算法优化的LQR、PID控制算法，能清晰讲解其中要点哦。对于基于群智能算法的一般路径规划
Matlab/Simulink与Carsim的联合仿 擅长基于群智能算法优化的LQR、PID控制算法，能清晰讲解其中要点哦。对于基于群智能算法的一般路径规划 稍长智能车轨迹跟踪控制方向 熟悉Matlab/Simulink和Carsim的联合仿真呢。这是一个非常专业且热门的研究方向（群智能…...
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工具&…...