【CSS】纯CSS Loading动画组件

在这里插入图片描述

<template><div class="ai-loader-box"><!-- AI loader --><div class="ai-loader"><div class="text"><p>AI智能分析中....</p></div><div class="horizontal"><div class="circlesup"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div><div class="circlesdwn"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div></div><div class="vertical"><div class="circlesup"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div><div class="circlesdwn"><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div></div></div></div></div>
</template><style scoped>
.ai-loader-box{position: relative;width: 600px;height: 600px;margin: 20px auto;
}
/* Start the loader code, first, let's align it the center of screen */
.ai-loader {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-mos-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;/* disable selection and cursor changes */-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: default;
}/* Text align it the center of screen and connect the looped animation for 2 seconds */
.text {position: absolute;left: -110px;top: -1.7em;/* -webkit-animation: text 2s infinite;-moz-animation: text 2s infinite;-moz-animation: text 2s infinite;-ms-animation: text 2s infinite;-o-animation: text 2s infinite;animation: text 2s infinite; */width: 280px;z-index: 10;color: #f00;background: #fff1f1db;border-radius: 4px;font-size: 40px;
}/* Set for the first layer vertical position */
.vertical {position: absolute;top: -1.84em;left: -0.4em;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);
}/* Set for the second layer horizontal position */
.horizontal {position: absolute;top: 0em;left: 0em;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);
}/* The next two classes do mirror for animation */
.circlesup {position: absolute;top: -4.7em;right: 12.1em;
}.circlesdwn {position: absolute;top: 2.5em;right: -13.5em;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);
}/* Create a container for our circles, rotate it 45 degrees and set animation*/
.circle {position: absolute;width: 15em;height: 15em;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-animation: orbit 2s infinite;-moz-animation: orbit 2s infinite;-moz-animation: orbit 2s infinite;-ms-animation: orbit 2s infinite;-o-animation: orbit 2s infinite;animation: orbit 2s infinite;z-index: 5;
}/* Style's of our circles */
.circle:after {content: '';position: absolute;width: 2em;height: 2em;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;border-radius: 100%;background: rgb(255, 20, 20);/* Pick a color 1*/
}.circle:nth-child(2) {-webkit-animation-delay: 100ms;-moz-animation-delay: 100ms;-ms-animation-delay: 100ms;-o-animation-delay: 100ms;animation-delay: 100ms;z-index: 4;
}.circle:nth-child(2):after {background: var(--el-color-primary);/* Pick a color 2*/-webkit-transform: scale(0.8,0.8);-moz-transform: scale(0.8,0.8);-ms-transform: scale(0.8,0.8);-o-transform: scale(0.8,0.8);transform: scale(0.8,0.8);
}.circle:nth-child(3) {-webkit-animation-delay: 225ms;-moz-animation-delay: 225ms;-ms-animation-delay: 225ms;-o-animation-delay: 225ms;animation-delay: 225ms;z-index: 3;
}.circle:nth-child(3):after {background: var(--el-color-primary-light-3);/* Pick a color 3*/-webkit-transform: scale(0.6,0.6);-moz-transform: scale(0.6,0.6);-ms-transform: scale(0.6,0.6);-o-transform: scale(0.6,0.6);transform: scale(0.6,0.6);
}.circle:nth-child(4) {-webkit-animation-delay: 350ms;-moz-animation-delay: 350ms;-ms-animation-delay: 350ms;-o-animation-delay: 350ms;animation-delay: 350ms;z-index: 2;
}.circle:nth-child(4):after {background: var(--el-color-primary-light-5);/* Pick a color 4*/-webkit-transform: scale(0.4,0.4);-moz-transform: scale(0.4,0.4);-ms-transform: scale(0.4,0.4);-o-transform: scale(0.4,0.4);transform: scale(0.4,0.4);
}.circle:nth-child(5) {-webkit-animation-delay: 475ms;-moz-animation-delay: 475ms;-ms-animation-delay: 475ms;-o-animation-delay: 475ms;animation-delay: 475ms;z-index: 1;
}.circle:nth-child(5):after {background: var(--el-color-primary);/* Pick a color 5*/-webkit-transform: scale(0.2,0.2);-moz-transform: scale(0.2,0.2);-ms-transform: scale(0.2,0.2);-o-transform: scale(0.2,0.2);transform: scale(0.2,0.2);
}/* Animation keys */
@-webkit-keyframes orbit {0% {-webkit-transform: rotate(45deg);}5% {-webkit-transform: rotate(45deg);-webkit-animation-timing-function: ease-out;}70% {-webkit-transform: rotate(405deg);-webkit-animation-timing-function: ease-in;}100% {-webkit-transform: rotate(405deg);}
}@-moz-keyframes orbit {0% {-moz-transform: rotate(45deg);}5% {-moz-transform: rotate(45deg);-moz-animation-timing-function: ease-out;}70% {-moz-transform: rotate(405deg);-moz-animation-timing-function: ease-in;}100% {-moz-transform: rotate(405deg);}
}@-ms-keyframes orbit {0% {-ms-transform: rotate(45deg);}5% {-ms-transform: rotate(45deg);-ms-animation-timing-function: ease-out;}70% {-ms-transform: rotate(405deg);-ms-animation-timing-function: ease-in;}100% {-ms-transform: rotate(405deg);}
}@-o-keyframes orbit {0% {-o-transform: rotate(45deg);}5% {-o-transform: rotate(45deg);-o-animation-timing-function: ease-out;}70% {-o-transform: rotate(405deg);-o-animation-timing-function: ease-in;}100% {-o-transform: rotate(405deg);}
}@keyframes orbit {0% {transform: rotate(45deg);}5% {transform: rotate(45deg);animation-timing-function: ease-out;}70% {transform: rotate(405deg);animation-timing-function: ease-in;}100% {transform: rotate(405deg);}
}@-webkit-keyframes text {0% {-webkit-transform: scale(0.2,0.2);-webkit-animation-timing-function: ease-out;}40%,60% {-webkit-transform: scale(1,1);-webkit-animation-timing-function: ease-out;}70%,100% {-webkit-transform: scale(0.2,0.2);}
}@-moz-keyframes text {0% {-moz-transform: scale(0.2,0.2);-moz-animation-timing-function: ease-out;}50% {-moz-transform: scale(1,1);-moz-animation-timing-function: ease-out;}60% {-moz-transform: scale(1,1);-moz-animation-timing-function: ease-out;}100% {-moz-transform: scale(0.2,0.2);}
}@-mos-keyframes text {0% {-mos-transform: scale(0.2,0.2);-mos-animation-timing-function: ease-out;}50% {-mos-transform: scale(1,1);-mos-animation-timing-function: ease-out;}60% {-mos-transform: scale(1,1);-mos-animation-timing-function: ease-out;}100% {-mos-transform: scale(0.2,0.2);}
}@-o-keyframes text {0% {-o-transform: scale(1,1);-o-animation-timing-function: ease-out;}50% {-o-transform: scale(2,2);-o-animation-timing-function: ease-out;}100% {-o-transform: scale(1,1);-o-animation-timing-function: ease-out;}
}@keyframes text {0% {transform: scale(1,1);animation-timing-function: ease-out;}50% {transform: scale(2,2);animation-timing-function: ease-out;}100% {transform: scale(1,1);animation-timing-function: ease-out;}
}
</style>

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

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

相关文章

idea项目搭建的四种方式： 一（以idea2017为例）

idea项目搭建的四种方式： 一（以idea2017为例）

目录 1. 普通java项目 2. 普通JavaWEB项目 3. maven的JavaWEB项目 4. maven的java项目 1. 普通java项目 ①点击“Create New Project”&#xff1b; ②选择“Java”&#xff0c;选择自己安装的jdk&#xff0c;点击“Next”&#xff1b; ③填好项目名称和路径&#xff1b;…
阅读更多...
记录一个docker volume映射目录创建文件报错问题

记录一个docker volume映射目录创建文件报错问题

最近用docker-compse做中间件部署。 发现使用volume映射目录后&#xff0c;初始化时创建文件报错导致容器启动失败问题。 提示是没有访问权限。 如下&#xff1a; mariadb 10:07:26.86 INFO > mariadb 10:07:26.86 INFO > Welcome to the Bitnami mariadb contain…
阅读更多...
CORS预检请求配置流程图 srpingboot和uniapp

CORS预检请求配置流程图 srpingboot和uniapp

首先要会判断预检请求 还是简单请求 简单请求 预检请求 #mermaid-svg-1R9nYRa7P9Pll4AK {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-1R9nYRa7P9Pll4AK .error-icon{fill:#552222;}#mermaid-svg-1R9nYRa7P9Pll4…
阅读更多...
基于ssm+vue的购物商场的设计与实现

基于ssm+vue的购物商场的设计与实现

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不…
阅读更多...
【视频生成大模型】 视频生成大模型 THUDM/CogVideoX-2b

【视频生成大模型】 视频生成大模型 THUDM/CogVideoX-2b

【视频生成大模型】 视频生成大模型 THUDM/CogVideoX-2b CogVideoX-2b 模型介绍发布时间模型测试生成的demo视频生成视频限制 运行环境安装运行模型下载开源协议参考 CogVideoX-2b 模型介绍 CogVideoX是 清影 同源的开源版本视频生成模型。 基础信息&#xff1a; 发布时间 2…
阅读更多...
【【自动驾驶】车辆运动学模型】

【【自动驾驶】车辆运动学模型】

【自动驾驶】车辆运动学模型 1. 引言2. 以车辆重心为中心的单车模型2.1 模型介绍2.2 滑移角 β \beta β 的推导2.2 航向角 ψ \psi ψ推导过程&#xff1a;2.3 滑移角 β \beta β2.3 Python代码实现2.4 C代码实现 3. 前轮驱动的单车模型3.1 模型介绍3.3 Python代码实现3.4 …
阅读更多...
【功能安全】 独立于环境的安全要素SEooC

【功能安全】 独立于环境的安全要素SEooC

目录 01 SEooC定义 02 SEooC开发步骤 03 SEooC开发示例 04 SEooC问答 01 SEooC定义 缩写： SEooC：Safety Element out of Context独立于环境的安全要素 SEooC出处：GB/T34590.10—2022，第9章节 SEooC与相关项什么关系？ SEooC可以是系统、系统组合、子系统、软件组件、…
阅读更多...
EXCELL中如何两条线画入一张图中，标记坐标轴标题？

EXCELL中如何两条线画入一张图中，标记坐标轴标题？

1&#xff0c;打开excel&#xff0c;左击选中两列&#xff0c; 2&#xff0c;菜单栏>“插入”>”二维折线图”选中一个 3&#xff0c;选中出现的两条线中的一条右击>最下一行&#xff0c;“设置数据系列格式” 4&#xff0c;右测“系列选项中”>点击“次坐标轴” 5…
阅读更多...
龙蟠科技业绩压力显著：资产负债率持续攀升，产能利用率也不乐观

龙蟠科技业绩压力显著：资产负债率持续攀升，产能利用率也不乐观

《港湾商业观察》施子夫 黄懿 去年十月至今两度递表后&#xff0c;10月17日&#xff0c;江苏龙蟠科技股份有限公司(以下简称&#xff0c;龙蟠科技&#xff1b;603906.SH&#xff0c;02465.HK)通过港交所主板上市聆讯。 很快&#xff0c;龙蟠科技发布公告称&#xff0c;公司全…
阅读更多...
低代码开发详解与行业应用指南

低代码开发详解与行业应用指南

低代码开发简化软件开发&#xff0c;助力企业数字化转型。ZohoCreator应用于零售、制造、教育、IT、医疗、房地产等行业&#xff0c;提升效率、降低成本。灵活定价&#xff0c;支持免费试用&#xff0c;助力企业快速实现数字化。 一、低代码开发是什么&#xff1f; 低代码开发…
阅读更多...
栈（数据结构）——C语言

栈（数据结构）——C语言

1 概念与结构 栈&#xff1a;⼀种特殊的线性表&#xff0c;其只允许在固定的⼀端进⾏插⼊和删除元素操作。进⾏数据插⼊和删除操作 的⼀端称为栈顶&#xff0c;另⼀端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&#…
阅读更多...
如何动态改变本地的ip

如何动态改变本地的ip

在当今数字化时代&#xff0c;网络连接已成为我们日常生活和工作中不可或缺的一部分。无论是出于隐私保护、突破地域限制&#xff0c;还是为了测试和优化网络应用&#xff0c;动态改变本地IP地址的需求日益增多。本文将详细介绍如何安全、有效地实现这一目标&#xff0c;旨在帮…
阅读更多...
Linux巡检利器xsos的安装和使用

Linux巡检利器xsos的安装和使用

一、 一般项目基本完成的时候&#xff0c;后期运维工作的重点就是及时的&#xff0c;合理的频率巡检了&#xff0c;巡检的目的主要是及时发现各种各样的问题 那么&#xff0c;自己编写shell脚本是大部分人的第一选择&#xff0c;这里有个比较麻烦的地方&#xff0c;shell脚本…
阅读更多...
Aatrox-Bert-VITS2部署指南

Aatrox-Bert-VITS2部署指南

一、模型介绍 【AI 剑魔 ①】在线语音合成&#xff08;Bert-Vits2&#xff09;&#xff0c;将输入文字转化成暗裔剑魔亚托克斯音色的音频输出。 作者&#xff1a;Xz 乔希 https://space.bilibili.com/5859321 声音归属&#xff1a;Riot Games《英雄联盟》暗裔剑魔亚托克斯 …
阅读更多...
分布式IO模拟量模块：多领域应用的高效能解决方案

分布式IO模拟量模块：多领域应用的高效能解决方案

分布式IO模拟量模块是分布式IO系统中的重要组件&#xff0c;用于实现现场设备或过程的模拟量信号的采集、监视和控制。该模块通常与现场总线耦合器配合使用&#xff0c;能够接收来自现场设备的模拟量信号&#xff08;如电流、电压等&#xff09;&#xff0c;并将其转换为数字信…
阅读更多...
YOLOv11在目标检测中的应用及其与PaddleDetection的对比

YOLOv11在目标检测中的应用及其与PaddleDetection的对比

近年来&#xff0c;目标检测模型在诸如自动驾驶、安全监控等应用中发挥了关键作用。众多模型中&#xff0c;YOLO&#xff08;You Only Look Once&#xff09; 系列凭借其在速度和精度之间的良好平衡脱颖而出。YOLOv11 作为该系列的最新版本之一&#xff0c;凭借其多项创新&…
阅读更多...
FPGA秋招必看基础 | FPGA设计流程

FPGA秋招必看基础 | FPGA设计流程

关注&#x1f446; 望森FPGA &#x1f446; 查看更多FPGA资讯 这是望森的第 30 期分享 作者 | 望森 来源 | 望森FPGA 目录 摘要 1 明确需求、设计系统架构 2 RTL 输入 3 功能仿真&#xff08;Behavioral Simulation&#xff09; 4 综合&#xff08;Synthesis&#xff09;…
阅读更多...
Qgis 开发初级 《符号化》

Qgis 开发初级 《符号化》

本章主要简介Qgis 的矢量图层的符号化。Qgis的符号化具体作用于每个图层&#xff0c;图层通过具体的方法设置符号化样式。 1、QgsFeatureRenderer Qgs的符号化类主要是QgsFeatureRenderer&#xff0c;这是一个抽象类&#xff0c;它派生出了许多类&#xff0c;如下所示。常用的…
阅读更多...
self-supervised learning(BERT和GPT)

self-supervised learning(BERT和GPT)

1芝麻街与NLP模型 我們接下來要講的主題呢叫做Self-Supervised Learning&#xff0c;在講self-supervised learning之前呢&#xff0c;就不能不介紹一下芝麻街&#xff0c;為什麼呢因為不知道為什麼self-supervised learning的模型都是以芝麻街的人物命名。 因為Bert是一個非常…
阅读更多...
使用Bert+BiLSTM+CRF训练 NER任务

使用Bert+BiLSTM+CRF训练 NER任务

使用的数据集在这里E-Commercial NER Dataset / 电商NER数据集_数据集-阿里云天池 针对面向电商的命名实体识别研究&#xff0c;我们通过爬取搜集了淘宝商品文本的标题&#xff0c;并标注了4大类&#xff0c;9小类的实体类别。具体类型及实体数量如下 针对面向电商的命名实体…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023