CSS 不同颜色的小圆角方块组成的旋转加载动画

 

<template><!-- 创建一个装载自定义旋转加载动画的容器 --><view class="spinner"><!-- 定义外部包裹容器,用于实现整体旋转动画 --><view class="outer"><!-- 定义四个内部小方块以形成十字形结构 --><view class="inner tl"></view> <!-- 左上角 --><view class="inner tr"></view> <!-- 右上角 --><view class="inner br"></view> <!-- 右下角 --><view class="inner bl"></view> <!-- 左下角 --></view></view>
</template><script></script><style>/* 设置页面背景颜色为深灰色 */body {background-color: #212121;}/* 设置旋转加载动画容器样式 */.spinner {position: absolute;/* 绝对定位,使其能居中显示 */width: 128px;/* 设置宽度 */height: 128px;/* 设置高度 */top: calc(50% - 64px);/* 上边距计算

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/258369.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sqlserver对已有的表插入列

现有如下的一个表&#xff1b; 现在要插入一个 人员id 列&#xff1b;如下图在设计视图的行首单击&#xff0c;选择 插入列&#xff1b; 然后添加一个 人员id 列&#xff1b; 保存&#xff0c;出现下图提示&#xff0c;不能保存设计&#xff1b; 这就直接使用sql语句更改&#…

leetcode hot100爬楼梯

在本题目中&#xff0c;要求爬第n阶有多少种爬法&#xff0c;并且每次只能爬1个或者2个&#xff0c;这明显是动态规划的问题&#xff0c;我们需要用动态规划的解决方式去处理问题。动态规划就是按照正常的顺序由前向后依次推导。而递归则是从结果往前去寻找&#xff08;个人理解…

单片机学习笔记---LED呼吸灯直流电机调速

目录 LED呼吸灯 直流电机调速 模型结构 波形 定时器初始化函数 中断函数 主程序 上一节讲了电机的工作原理&#xff0c;这一节开始代码演示&#xff01; 我们上一篇说Ton的时间长Toff时间短电机会快&#xff0c;Ton的时间短Toff时间长电机会慢 并且我们还要保证无论Ton和…

小游戏和GUI编程(6) | 基于 SFML 的井字棋

小游戏和GUI编程(6) | 基于 SFML 的井字棋 0. 简介 使用 SFML 实现井字棋(tic-tac-toe), 规划如下: 了解规则&#xff0c; 使用命令行实现(已经实现了)使用 SFML&#xff0c;提供极简的交互(预计 1 小时)制作 SVG 图像&#xff0c; 美化界面(预计 1 小时) 1. 基于命令行的实…

分省年度数据集(1990-2021年)

一、数据介绍 数据名称&#xff1a;分省年度数据集&#xff08;1990-2021年&#xff09; 数据来源&#xff1a;国家统计局-分省年度数据 数据范围&#xff1a;1990-2021年&#xff0c;包括31个省份 指标数量 &#xff1a;2981个指标 数据整理&#xff1a;自主整理 更新时…

线性代数的本质 2 线性组合、张成的空间、基

基于3Blue1Brown视频的笔记 一种新的看待方式 对于一个向量&#xff0c;比如说&#xff0c;如何看待其中的3和-2&#xff1f; 一开始&#xff0c;我们往往将其看作长度&#xff08;从向量的首走到尾部&#xff0c;分别在x和y上走的长度&#xff09;。 在有了数乘后&#xff0…

建造者模式-Builder Pattern

原文地址:https://jaune162.blog/design-pattern/builder-pattern/ 引言 现在一般大型的业务系统中的消息通知的形式都会有多种,比如短信、站内信、钉钉通知、邮箱等形式。虽然信息内容相同,但是展现形式缺不同。如短信使用的是纯文本的形式,钉钉使用的一般是Markdown的形…

【实战】一、Jest 前端自动化测试框架基础入门(二) —— 前端要学的测试课 从Jest入门到TDD BDD双实战(二)

文章目录 一、Jest 前端自动化测试框架基础入门5.Jest 中的匹配器toBe 匹配器toEqual匹配器toBeNull匹配器toBeUndefined匹配器和toBeDefined匹配器toBeTruthy匹配器toBeFalsy匹配器数字相关的匹配器字符串相关的匹配器数组相关的匹配器异常情况的匹配器 6.Jest 命令行工具的使…

C++中类的6个默认成员函数 【拷贝构造函数】

文章目录 拷贝构造函数的使用拷贝构造对于自定义类型【浅拷贝】深拷贝拷贝构造函数典型调用场景 拷贝构造函数的使用 在前几章学习对象的时候&#xff0c;我们有的时候需要一个与已存在对象一某一样的新对象 那在创建对象时&#xff0c;可否创建一个与已存在对象一某一样的新对…

Qlik Sense : 条形图

条形图 “条形图适合比较多个值。维度轴显示所比较的类别条目&#xff0c;度量轴显示每个类别条目的值。” Qlik Sense中的条形图是一种数据可视化工具&#xff0c;用于展示不同类别或维度之间的比较。它通过水平或垂直的条形表示数据&#xff0c;并根据数值的大小进行排序。…

win10 环境下Python 3.8按装fastapi paddlepaddle 进行图片文字识别1

###按装 用conda 创建python 3.8的环境&#xff0c;可参看本人python下的其它文章。 在pycharm开发环境下按装相关的模块&#xff1a; pip install -i https://pypi.tuna.tsinghua.edu.cn/simple fastapi pip install -i https://pypi.tuna.tsinghua.edu.cn/simple "uvi…

《Go 简易速速上手小册》第1章:Go 语言基础(2024 最新版)

文章目录 1.1 Go 语言的安装与环境配置1.1.1 基础知识讲解案例 Demo&#xff1a;简单的 Go 程序 1.1.2 重点案例&#xff1a;搭建一个 Go Web 服务准备工作步骤 1&#xff1a;创建项目目录步骤 2&#xff1a;编写 Web 服务代码步骤 3&#xff1a;运行你的 Web 服务步骤 4&#…

寒假 6

1.现有无序序列数组为{23,24,12,5,33,5,34,7}&#xff0c;请使用以下排序实现编程。 函数1:请使用冒泡排序实现升序排序 函数2︰请使用简单选择排序实现升序排序 函数3:请使用直接插入排序实现升序排序 函数4∶请使用插入排序实现升序排序 #include <stdio.h> #inclu…

牛客小白月赛87

说明 年后第一次写题&#xff0c;已经麻了&#xff0c;这次的题很简单但居然只写了两道题。有种本该发挥80分的水平&#xff0c;但是只做出了20分的水平的感觉。不过剩下几个题&#xff08;除了G题&#xff09;&#xff0c;比完赛一小时内就AC了。欢迎大家交流学习。&#xff0…

【2024年毕设系列】如何使用Anaconda和Pycharm

【2024年毕设系列】如何使用Anaconda和Pycharm 视频教程地址&#xff1a;【2024毕设系列】Anaconda和Pycharm如何使用_哔哩哔哩 Hi&#xff0c;各位好久不见&#xff0c;这里是肆十二&#xff0c;首先在这里给大伙拜年了。 诸位过完年之后估计又要开始为了大作业和毕业设计头疼…

【蓝桥杯单片机入门记录】LED灯(附多个例程)

目录 一、LED灯概述 1.1 LED发光原理 1.2电路原理图 1.3电路实物图 1.4 开发板LED灯原理图 1.4.1共阳极LED灯操控原理&#xff08;本开发板&#xff09; &#xff08;非实际原理图&#xff0c;便于理解版本&#xff09;由图可以看出&#xff0c;每个LED灯的左边&#xf…

关于在分布式环境中RVN和使用场景的介绍3

简介 在《关于在分布式环境中RVN和使用场景的介绍2》和《关于在分布式环境中RVN和使用场景的介绍1》中我们介绍了RVN的概念和在一些具体用例中的使用。在本文中我们讨论一下在分布式环境中使用RVN需要注意的问题。 问题 我们在收到一条待处理的事件时&#xff0c;需要检查该…

css3实现炫彩字体

这个字体颜色是动态变化的&#xff0c;直接上代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title&…

Java 新手如何使用Spring MVC 中的查询字符串和查询参数

目录 前言 什么是查询字符串和查询参数&#xff1f; Spring MVC中的查询参数 处理可选参数 处理多个值 处理查询参数的默认值 处理查询字符串 示例&#xff1a;创建一个RESTful服务 总结 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家…

【Node.js】path 模块进行路径处理

Node.js 执行 JS 代码时&#xff0c;代码中的路径都是以终端所在文件夹出发查找相对路径&#xff0c;而不是以我们认为的从代码本身出发&#xff0c;会遇到问题&#xff0c;所以在 Node.js 要执行的代码中&#xff0c;访问其他文件&#xff0c;建议使用绝对路径 实例&#xff1…