两种风格的纯CSS3加载动画

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>加载动画</title><style>.loader {width: 30px;height: 30px;border-radius: 50%;border: 4px solid #f3f3f3;border-top: 4px solid #3498db;animation: spin 1s linear infinite;margin: 0 auto;}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.spin {display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 50px;width: 200px;height: 200px;border: 1px solid #999;}.spin span {margin-top: 5px;}.container {display: flex;}.dots {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;margin: 50px;border: 1px solid #999;}.dot {width: 10px;height: 10px;background-color: #ccc;border-radius: 50%;margin: 0 3px;opacity: 0.4;animation: loading 1.2s infinite;}.dot:nth-child(1) {animation-delay: 0.1s;}.dot:nth-child(2) {animation-delay: 0.3s;}.dot:nth-child(3) {animation-delay: 0.5s;}@keyframes loading {0% {transform: scale(1);opacity: 0.4;}50% {opacity: 1;transform: scale(1.2);}100% {opacity: 0.4;transform: scale(1);}}</style></head><body><div class="container"><!-- 第一种动画 --><div class="spin"><div class="loader"></div><span>加载中...</span></div><!-- 第二种动画 --><div class="dots"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div></div></body>
</html>

页面效果:
在这里插入图片描述

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

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

相关文章

蓝桥杯每日一题2023.9.27

4408. 李白打酒加强版 - AcWing题库 题目描述 题目分析 对于这题我们发现有三个变量&#xff0c;店&#xff0c;花&#xff0c;酒的数量&#xff0c;对于这种范围我们使用DP来进行分析。 dp[i][j][k]我们表示有i个店&#xff0c;j朵花&#xff0c;k单位酒的集合&#xff0c…

数据挖掘note(赵老师语录)

&#xff08;一&#xff09; 数据挖掘一般分为机器学习和统计学习&#xff0c;大数据学的课程一般是关于机器学习&#xff0c;我们学的浅&#xff0c;主要关于统计学习&#xff0c;示意图如下所示&#xff1a; 这是一个大数据时代&#xff0c;但是数据挖掘的利用率不足0.5%&am…

MySQL 索引的作用、索引结构及执行流程介绍(索引篇 一)

索引介绍 MySQL索引&#xff08;index&#xff09;是一种用于加快数据库中数据搜索和查询的数据结构。它类似于书籍的目录&#xff0c;可以帮助数据库快速定位和访问特定数据&#xff0c;而无需扫描整个数据表。 索引的作用和缺点 1. 加快数据搜索&#xff1a;通过使用索引&…

linux下离线安装telnet

安装过程概要&#xff1a; &#xff08;一&#xff09;互联网端下载rpm包&#xff1b; &#xff08;二&#xff09;上传到服务器root目录下&#xff1b; &#xff08;三&#xff09;安装telnet服务和测试&#xff1a; 详细内容&#xff1a; &#xff08;一&#xff09;互联…

Redis与分布式-主从复制

接上文 常用中间件-OAuth2 1.主从复制 启动两个redis服务器。 修改第一个服务器地址 修改第二个redis 然后分别启动 redis-server.exe redis.windows.conf) 查看当前服务器的主从状态&#xff0c;打开客户端&#xff1a;输入info replication命令来查看当前的主从状态&am…

601-体育馆的人流量

文章目录 601-体育馆的人流量1. 题目2. 思路3. 解决4. 运行结果 601-体育馆的人流量 1. 题目 2. 思路 思路&#xff1a;查询Stadium表中人流量超过100的记录&#xff0c;将查询结果与自身的临时表连接&#xff0c;再使用where获得满足条件的记录 查询Stadium表中人流量超过10…

【数据分享】2023年我国行政村(社区)点位数据(免费获取\shp格式\excel格式)

行政村&#xff08;社区&#xff09;点位数据是我们各项研究中经常使用到的数据&#xff0c;在之前的文章中我们分享过2022年度的行政村&#xff08;社区&#xff09;点位数据&#xff08;可查看之前的文章获悉详情&#xff09;。本次我们带来的是2023年的全国范围的行政村&…

iOS自动化测试方案(一):MacOS虚拟机保姆级安装Xcode教程

文章目录 一、环境准备二、基础软件三、扩展&#xff1a;usb拓展插件 一、环境准备 1、下载VMware虚拟机的壳子&#xff0c;安装并注册软件(可以百度注册码)&#xff0c;最新版本&#xff1a;v17 2、下MacOS系统iOS镜像文件&#xff0c;用于vmware虚拟机安装&#xff0c;当前镜…

Linux(CentOS/Ubuntu)——安装nginx

如果确定你的系统是基于CentOS或RHEL&#xff0c;可以使用以下命令&#xff1a; ①、安装库文件 #安装gcc yum install gcc-c#安装PCRE pcre-devel yum install -y pcre pcre-devel#安装zlib yum install -y zlib zlib-devel#安装Open SSL yum install -y openssl openssl-de…

【力扣每日一题】2023.9.27 餐厅过滤器

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目挺长&#xff0c;估计中等难度是给在了阅读理解上。 简单来说就是给我们一堆餐厅的信息&#xff0c;每个餐厅拥有五个属性&#xff…

HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Badge

可以附加在单个组件上用于信息标记的容器组件。该组件从API Version 7开始支持。 支持单个子组件。子组件类型&#xff1a;系统组件和自定义组件&#xff0c;支持渲染控制类型&#xff08;if/else、ForEach和LazyForEach&#xff09;。 一、接口 方法1&#xff1a; Badge(value…

宁德时代Inside,中国智驾Outside!

随着华为Mate 60系列的未发先售&#xff0c;问界新M7的朋友圈疯狂刷屏到今日刘德华惊喜现身的“华与华”发布会&#xff0c;余承东的一句“遥遥领先”彻底出圈。 华为的“遥遥领先”&#xff0c;早已不止步于智能手机领域。在刚刚结束的华为秋季全场景新品发布会上&#xff0c…

那么国内比较好用的ai写作助手?

在过去的几年里&#xff0c;人工智能&#xff08;AI&#xff09;已经取得了巨大的进步&#xff0c;其中之一就是AI写作助手。这些工具基于先进的自然语言处理技术&#xff0c;可以生成多种类型的文本&#xff0c;包括文章、博客、广告文案、新闻稿等。它们不仅可以提供高质量的…

laravel设置与获取header请求头

laravel设置与获取header请求头 设置 <?phpnamespace App\Http\Controllers\Text;use Illuminate\Http\Request; use App\Http\Controllers\Controller;class TextController extends Controller {public function TextCC(Request $request){$token $request->header(j…

JAXB(Java Architecture for XML Binding)下载、使用

简介 JAXB&#xff08;Java Architecture for XML Binding&#xff09;就是XML数据绑定的java架构。JAXB可以根据XML Schema生成java类&#xff0c;也能根据java类生成XML Schema&#xff0c;能将XML数据unmarshall到Java内容树&#xff0c;也能将Java内容树持久化为XML数据。…

优化Python开发环境的几个神技巧

用Python编代码体验极佳&#xff0c;并且随着新版本的发布越来越好&#xff01; 对于很多人而言&#xff0c;Python提供的大量免费函数库、高可读性的程序和新引入的类型注释让很多爱不释手。 然而&#xff0c;数据科学家特别容易使自己的Jupyter notebook变得庞大而杂乱&…

Archlinux Timeshift的系统备份与还原

服务器在滚挂或误删系统文件,timeshift系统备份与还原的情景: 安装 timeshif 1 yay -s timeshif 备份设置 选择快照类型 此处选择【RSYNC】 选择储存位置 每台设备安装分区不一样,大家安装实际情况选择,一般选择比较大的空间存储,并且最好是机械,这样不容易损坏 设置计…

Hashable/哈希协议, Arrays/数组 的使用

1. Hashable 模型实现哈希协议 1.1 实现 /// Identifiable struct MyCustomModel: Hashable{//let id UUID().uuidStringlet title: Stringfunc hash(into hasher: inout Hasher) {hasher.combine(title)} }/// 哈希协议: 唯一标识值 struct HashableBootcamp: View {// 每个…

xorm数据库操作之Join、Union

golang的数据库操作xorm使用起来非常方便&#xff0c;不用再自己写SQl语句&#xff0c;而且xorm自己给我们做了SQL防注入等操作&#xff0c;用起来既方便又安全。此次文章我不会记录xorm的基本操作&#xff0c;我值记录一些特殊用法问题&#xff0c;包括动态创建表单、基于xorm…

2023工博会 | 上海添力网络营销公司 | 助力工业品线上推广

2023年9月23日&#xff0c;为期五天的工博会正式落下帷幕。本届工博会不仅有数量&#xff0c;更加有质量&#xff0c;国内外企业纷纷拿出看家本领&#xff0c;围绕着“绿色低碳”、“数字化转型”、“数字经济”、“科技创新”、“智能制造”等主题进行推陈出新。 本次工博会也…