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.hqwc.cn/news/473498.html

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

相关文章

如何让Obsidian实现电脑端和安卓端同步

Obsidian是一款知名的笔记软件&#xff0c;支持Markdown语法&#xff0c;它允许用户在多个设备之间同步文件。要在安卓设备上实现同步&#xff0c;可以使用remote save插件&#xff0c;以下是具体操作步骤&#xff1a; 首先是安装电脑端的obsidian&#xff0c;然后依次下载obs…

MOSFET栅极应用电路分析汇总(驱动、加速、保护、自举等等)

概述 MOSFET是一种常见的电压型控制器件&#xff0c;具有开关速度快、高频性能、输入阻抗高、噪声小、驱动功率小、动态范围大、安全工作区域(SOA)宽等一系列的优点&#xff0c;因此被广泛的应用于开关电源、电机控制、电动工具等各行各业。栅极做为MOSFET本身较薄弱的环节&am…

Python如何实现定时发送qq消息

因为生活中老是忘记各种事情&#xff0c;刚好又在学python&#xff0c;便突发奇想通过python实现提醒任务的功能&#xff08;尽管TIM有定时功能&#xff09;&#xff0c;也可定时给好友、群、讨论组发送qq消息。其工作流程是&#xff1a;访问数据库提取最近计划——>根据数据…

Java - SPI机制

本文参考&#xff1a;SPI机制 SPI&#xff08;Service Provider Interface&#xff09;&#xff0c;是JDK内置的一种服务提供发现机制&#xff0c;可以用来启动框架扩展和替换组件&#xff0c;主要是被框架的开发人员使用&#xff0c;比如 java.sql.Driver接口&#xff0c;其他…

基于SSM的社区疫情防控管理系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的社区疫情防控管理系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spri…

torch.utils.data

整体架构 平时使用 pytorch 加载数据时大概是这样的&#xff1a; import numpy as np from torch.utils.data import Dataset, DataLoaderclass ExampleDataset(Dataset):def __init__(self):self.data [1, 2, 3, 4, 5]def __getitem__(self, idx):return self.data[idx]def…

祝所有的CSDN社区成员们新年快乐

文章目录 尊敬的CSDN社区成员们&#xff0c; 在新年的钟声即将敲响之际&#xff0c;我携带着满心祝福与期许&#xff0c;以字为舟&#xff0c;穿越虚拟与现实的界限&#xff0c;来到您的身边&#xff0c;向每一位热爱编程、投身技术研究、在CSDN平台上挥洒智慧和汗水的朋友们&a…

Netty中的适配器、Handler共享和资源管理

ChannelHandler的适配器 有一些适配器类可以将编写自定义的ChannelHandler所需要的工作降到最低限度&#xff0c; 因为它们提供了定义在对应接口中的所有方法的默认实现。因为有时会忽略那些不感兴趣的 事件&#xff0c;所以Netty提供了抽象积累ChannelInboundHandlerAdapter(…

深夜突发! OpenAI震撼发布了SORA文生视频模型,对职场人的影响可能跟你想的不一样

深夜突发! OpenAI震撼发布了SORA文生视频模型&#xff0c;对职场人的影响可能跟你想的不一样。 马上就要节后返工了&#xff0c;顾问老师也早已回到了温暖的广州。与一位同城的学员相聚在老广州的一个茶楼中&#xff0c;喝起了下午茶。面对各式的广式茶点&#xff0c;在淡淡的茶…

防火墙 iptables(二)--------------------SNAT与DNAT

一、SNAT ①SNAT 应用环境: 局域网主机共享单个公网IP地址接入Internet (私有IP不能在Internet中正常路由) ②SNAT原理: 源地址转换&#xff0c;根据指定条件修改数据包的源IP地址&#xff0c;通常被叫做源映射 数据包从内网发送到公网时&#xff0c;SNAT会把数据包的源IP由…

Shokz韶音是运动耳机的领导品牌

在一年一度的Keep官方营销沙龙Keep自由营上,运动耳机领导品牌Shokz韶音和全球运动科技App Keep共同宣布达成深度合作。Shokz韶音运动耳机将成为Keep官方合作运动耳机。同时,双方将在线上赛事、电商购物、新品发布乃至圈层耕耘等诸多方面,展开全方位合作。 Shokz韶音是运动耳机的…

前端秘法进阶篇----这还是我们熟悉的浏览器吗?(浏览器的渲染原理)

目录 一.浏览器渲染原理 二.渲染时间点 三.渲染流水线 1.解析html(Parse HTML) 1.1解析成DOM树(document object model) 1.2解析成CSSOM树(css object model) 2.样式计算(Recalculate Style) 3.布局(Layout) 4.分层(Layer) 5. 绘制(Paint) 6.分块(Tiling) 7. 光栅化…