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 中…...
09_Webpack打包工具
1 初识Webpack 1.1 什么是Webpack Webpack打包工具对项目中的复杂文件进行打包处理，可以实现项目的自动化构建，并且给前端开发人员带来了极大的便利。 目前，企业中的绝大多数前端项目是基于Webpack打包工具来进行开发的。 1.2 Webpack的安…...
小程序 | 小程序后端用什么语言开发比较好
目录 ♣️ 引言 选择合适的后端语言 推荐使用Node.js Node.js 的优点 其他备选语言 ♣️ 小结 ♣️ 引言 小程序的兴起已经成为了当今移动互联网时代的热点之一，而小程序后端的好坏直接影响着小程序的使用体验，因此，选择一种好的语言来…...
Websocket升级版
之前写过一个关于websocket的博客，是看书时候做的一个demo。但是纸上得来终觉浅，这次实战后实打实的踩了不少坑，写个博客记录总结。 1.安装postman websocket接口调试，需要8.5以及以上版本的postman 先把以前的卸载，…...
基于音频SOC开发板的主动降噪ANC算法源码实现
基于音频SOC开发板的主动降噪ANC算法源码实现 是否需要申请加入数字音频系统研究开发交流答疑群(课题组)？可加我微信hezkz17, 本群提供音频技术答疑服务，+群附加赠送降噪开发资料,...
【Pytorch】深度学习之损失函数
文章目录 二分类交叉熵损失函数交叉熵损失函数L1损失函数MSE损失函数平滑L1(Smooth L1)损失函数目标泊松分布的负对数似然损失KL散度MarginRankingLoss多标签边界损失函数二分类损失函数多分类的折页损失三元组损失HingEmbeddingLoss余弦相似度CTC损失函数参考资料 学习目标&am…...
3.4 构造方法
思维导图： 3.4.1 定义构造方法 ### Java中的构造方法 #### **定义与目的** 构造方法，也称为构造器，是一个特殊的成员方法，用于在实例化对象时为对象赋值或执行初始化操作。其主要目的是确保对象在被创建时具有有效和合适的初始状…...
代码随想录
前言 代码随想录算法训练营day43 一、Leetcode 1049. 最后一块石头的重量 II 1.题目 有一堆石头，用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合，从中选出任意两块石头，然后将它们一起粉碎。假设石头的重量分…...
2核4G游戏服务器推荐(阿里云/腾讯云/华为云)
2核4G游戏服务器推荐，首选腾讯云2核4G5M带宽轻量应用服务器218元一年、阿里云2核4G4M带宽轻量应用服务器297元一年，华为云2核2G3M云耀L服务器95元一年，阿腾云来详细说下2核4G游戏服务器推荐配置大全： 目录 2核4G游戏服务器推荐 …...
SQL标识列实现自动编号的步骤和技巧以及优势
目录 前言: 过程: 1.步骤: 2.标识种子和表示增量: 效果展示: 优势: 总结: 前言: 在.NET中的例子里面遇到这么一个问题，不能将NULL插入列‘ID’，表Login.dbo.Scores’;列不允许有NULL值。INSERT失败。这个问题很明显，我在SQL数据库中…...
【Debian】报错：su: Authentication failure
项目场景： 今天我重新刷了一个debian系统。 系统版本： # 查看系统版本 lsb_release -a 我的系统版本： No LSB modules are available. Distributor ID：Debian Description: Debian GNU/Linux 12 （bookwormÿ…...