【 html+css 绚丽Loading 】 000052 璇玑转轮

前言:哈喽,大家好,今天给大家分享今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕

共同探索软件研发!敬请关注【宝码香车】
csdngif标识

目录

  • 📚一、效果
  • 📚二、信息
    • 💡1.简介:
    • 💡2.外观描述:
    • 💡3.使用方式:
    • 💡4.战斗应用:
    • 💡5.提升:
    • 💡6.传说:
  • 📚三、源代码,上代码,可以直接复制使用
    • 🎥效果
    • 🗂️目录
    • ✍️html
    • ✍️css
  • 📚四、更多案例,上代码,可以直接复制使用
    • 🎥效果
    • 🗂️目录
    • ✍️html
    • ✍️css


📚💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📖📋🔍✅🧰❓📄📢📈 🙋1️⃣2️⃣3️⃣

📚一、效果

描述


📚二、信息

💡1.简介:

璇玑转轮,一款源自修真界的玄妙兵器,由一个圆形主体构造而成,象征着宇宙中的璇玑之理,蕴含着星辰轨迹、自然韵律以及永不停歇的宇宙运动之秘。这款兵器的特别之处,在于它的运行机制:使用时,会从原先的一个圆形主体自动生成两个较小的圆形,这两个小圆依次围绕在大圆的四周。它们开始时进行顺时针方向的圆周运动,营造出星汉灿烂般的壮观景象;而在逆时针方向运动时,其速度变化独具特色——从上方至下方逐渐减速,反之则加速上升。然而,不同于其他兵器的是,璇玑转轮并不局限于简单的循环往复,而是始终保持顺时针的圆周运动,持续不断地运转,仿佛恒星在夜空中永无休止地巡游,展现出一种永恒的宇宙旋律。

💡2.外观描述:

外观描述:璇玑转轮的整体设计简约却不失庄重,核心大圆选用千年寒铁精炼而成,表面嵌有璀璨的宝石碎片,映射出迷人的星光。两个小圆则由相同材质制作,尺寸略小于主体,悬浮于大圆周边,如同卫星围绕行星运转。当兵器激活后,小圆们便开始了它们那永不止步的旅程,顺时针方向的圆周运动如同银河系中的星球轨迹一般,给人以浩瀚星空下的宁静与壮丽之感。

💡3.使用方式:

使用方式:要启动璇玑转轮,使用者需要将兵器置于丹田处,聚气凝神,通过内心的呼唤与兵器建立起深层次的灵力链接。随着精神力的注入,璇玑转轮便会从单一的大圆中衍生出两个较小的圆形,随即展开它们那永无止境的顺时针圆周运动。在这一过程中,使用者能够感受到宇宙间万物生长、消亡、再生的循环规律,进一步领悟璇玑之道的深层含义。

💡4.战斗应用:

战斗应用:在实战场景中,璇玑转轮凭借其独特的运动规律,能够展现出令人瞩目的攻防能力。当小圆进行顺时针圆周运动时,能够汇聚周围环境中的灵气,构建出一层几乎无法穿透的防御壁障;而在逆时针减速阶段,虽然表面上看似乎减弱了兵器的效能,但实际上却为使用者创造了绝佳的反击机会,因为正是在这个时刻,敌人往往会放松警惕,从而给予致命一击的最佳时机。最重要的是,由于璇玑转轮始终保持顺时针方向的运动状态,这就意味着它能够在任何情况下保持稳定输出,无需担心因改变方向而导致的能量损失或操作失误。

💡5.提升:

提升效用:除了作为一把战无不胜的神器,璇玑转轮同时也是修真者修炼道路上必不可少的良伴。在日常修炼中,持续不断的顺时针圆周运动能够引导使用者的心绪趋于平和,帮助他们排除杂念,聚焦于当前任务之上。此外,通过长时间观察小圆们的运动轨迹,修真者还可以逐渐洞悉宇宙间万事万物发展的内在逻辑,增强对自然规律的认识与理解,进而在修行之路上迈出坚实步伐。

💡6.传说:

传说故事:关于璇玑转轮的起源,流传着这样一个古老的神话。在混沌初开之时,天帝为了维持宇宙秩序,派遣九位星君下凡寻找能够代表宇宙真理的宝物。经过数百年艰苦卓绝的努力,星君们最终发现了璇玑转轮的存在。据说,这件神器是由天宫中最为神圣的星辰碎片打造而成,蕴含着宇宙诞生之初的原始力量。自从被发现以来,璇玑转轮便成为了修真者梦寐以求的目标,拥有它就意味着掌握了通向更高层次的钥匙。然而,由于其背后蕴含的强大力量过于巨大,只有真正理解了璇玑之道,且心存敬畏与慈悲的修真者才配得以其为主,否则必将招致毁灭性的后果。

总结概述:璇玑转轮,作为修真界中备受推崇的传奇兵器,不仅因其独特的外形设计与卓越的实战表现而闻名遐迩,更在于其所承载的深沉哲思与宇宙智慧。通过永不停息的顺时针圆周运动,使用者能够深刻体会到自然界的奥秘与规律,同时也获得了在危机四伏的修真世界中立足的根本保障。无论是面对强敌还是自我挑战,璇玑转轮都是值得信赖的盟友,陪伴每一位勇者踏上了追寻真我、超越极限的伟大征程。

因环境变化,修真界已不在,只留下残影存世,望各位道友笑纳,代码如下


📚三、源代码,上代码,可以直接复制使用

🎥效果

描述

🗂️目录

描述

✍️html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" type="text/css" href="./style.css"/><title>000052</title></head>
<body>
<div class="container"><h1 style="text-align: center;color:#fff;margin-bottom: 20px;padding-top: 100px; text-shadow: 0 3px 3px #4c6ed3;">【 html+css 绚丽Loading 】<br>000052  璇玑转轮</h1><div class="wrapper"><div class="load000052"></div></div></div>
</body>
</html>

✍️css

* {margin: 0;padding: 0;box-sizing: border-box;
}.container {min-height: 100vh;background-color: #0e1538;
}.wrapper {display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 40px;margin-top: 50px;margin-bottom: 50px;
}/*main loading*/
.load000052 {width: 17px;aspect-ratio: 1;        /*控制大小比例*/border-radius: 50%;background: #fff;       /*控制颜色*/display: grid;animation: load000052Ani-0 2s infinite linear;
}
.load000052:before,
.load000052:after {content: "";grid-area: 1/1;margin: 15%;border-radius: 50%;background: inherit;transform: rotate(0deg) translate(150%);animation: load000052Ani 1s infinite;
}.load000052:after {animation-delay: -.5s;
}
@keyframes load000052Ani-0 {100% {transform: rotate(1turn)}
}
@keyframes load000052Ani {100% {transform: rotate(1turn) translate(150%)}
}

📚四、更多案例,上代码,可以直接复制使用

🎥效果

描述

🗂️目录

描述

✍️html

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" type="text/css" href="./style.css"/><title>000052</title></head>
<body>
<div class="container"><h1 style="text-align: center;color:#fff;margin-bottom: 20px;padding-top: 100px; text-shadow: 0 3px 3px #4c6ed3;">【 html+css 绚丽Loading 】<br>000052  璇玑转轮  更多案例</h1><div class="loadType"><div class="loadCard"><div class="loadTop"><div class="load000052"></div><div class="loadMsg">加载中•••</div></div><div class="loadTitle">loading 在<span>上边</span></div></div><!--            loading在下--><div class="loadCard"><div class="loadBottom"><div class="load000052"></div><div class="loadMsg">加载中•••</div></div><div class="loadTitle">loading 在<span>下边</span></div></div><!--            loading在左--><div class="loadCard"><div class="loadLeft"><div class="load000052"></div><div class="loadMsg">加载中•••</div></div><div class="loadTitle">loading 在<span>左边</span></div></div><!--            loading在右--><div class="loadCard"><div class="loadRight"><div class="load000052"></div><div class="loadMsg">加载中•••</div></div><div class="loadTitle">loading 在<span>右边</span></div></div></div><div class="tip">若有大小、颜色、位置不合适的,使用的时候自行调节一下即可</div></div>
</body>
</html>

✍️css

* {margin: 0;padding: 0;box-sizing: border-box;
}.container {min-height: 100vh;background-color: #0e1538;
}/*demo*/
.loadType{display: flex;justify-content: center;gap:20px;color:#fff;
}.loadType .loadCard{display: flex;flex-direction: column;align-items: center;background:#4c6ed3;padding:15px;
}.loadCard>div:first-child{height:100px; /**/
}
.loadTitle{margin-top: 30px;padding:10px;background: #4fa7dd;}
.loadTitle span{color: #bb4429;font-weight: 600;
}/*loading在下*/
.loadTop,.loadBottom,.loadLeft,.loadRight{display: flex;align-items: center;gap:10px;justify-content: center;width: 200px;
}
.tip {text-align: center;color: #fff;font-size: 20px;margin-top: 30px;
}/*上*/
.loadTop{flex-direction: column;
}
/*下*/
.loadBottom{flex-direction: column-reverse;
}/*左*/
.loadLeft{flex-direction: row;
}
/*右*/
.loadRight{flex-direction: row-reverse;
}/*调节间距*/
.loadTop,.loadBottom{gap:30px;
}.loadLeft,.loadRight{gap:40px;
}/*加载文字*/
.loadMsg{width: fit-content;font-size: 16px;font-family: monospace;clip-path: inset(0 3ch 0 0);animation: loadMsgAni 1s steps(4) infinite;
}
/*加载文字动画*/
@keyframes loadMsgAni {to{clip-path: inset(0 -1ch 0 0)}}/*main loading*/
.load000052 {width: 17px;aspect-ratio: 1;        /*控制大小比例*/border-radius: 50%;background: #fff;       /*控制颜色*/display: grid;animation: load000052Ani-0 2s infinite linear;
}
.load000052:before,
.load000052:after {content: "";grid-area: 1/1;margin: 15%;border-radius: 50%;background: inherit;transform: rotate(0deg) translate(150%);animation: load000052Ani 1s infinite;
}
.load000052:after {animation-delay: -.5s
}
@keyframes load000052Ani-0 {100% {transform: rotate(1turn)}
}
@keyframes load000052Ani {100% {transform: rotate(1turn) translate(150%)}
}

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家多多支持宝码香车~💕


整理不易,点赞关注宝码香车

更多专栏订阅推荐:
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象(Date())操作

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

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

相关文章

[网络]http的简单认识

文章目录 一. 什么是http二. http协议工作过程三. http协议格式1. 抓包工具fiddler2. http请求报文3. http响应报文 一. 什么是http HTTP (全称为 “超⽂本传输协议”) 是⼀种应⽤⾮常⼴泛的 应⽤层协议 HTTP 诞⽣与1991年. ⽬前已经发展为最主流使⽤的⼀种应⽤层协议 HTTP 往…

MyBatis中多对一关系的三种处理方法

目录 MyBatis中多对一关系的三种处理方法 1.通过级联属性赋值 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 2.通过标签 1&#xff09;mapper 2&#xff09;mapper.xml 3&#xff09;测试代码 4&#xff09;测试结果 3.分步查询 …

【C++二叉树】102.二叉树的层序遍历

107. 二叉树的层序遍历 II - 力扣&#xff08;LeetCode&#xff09; 思路分析&#xff1a; 层序遍历&#xff0c;但是要注意输出的结果是一个二维数组&#xff0c;不是一层一个值一个值的输出&#xff0c;而是要一层一层的输出。可以通过一个循环控制每一层的数据个数&#xff…

PyCharm 安装教程

传送门 PyCharm 是一款由 JetBrains 开发的强大的 Python 集成开发环境&#xff08;IDE&#xff09;。它支持多种功能&#xff0c;包括调试、代码补全、智能代码分析、版本控制集成等&#xff0c;特别适合开发 Python 项目。接下来&#xff0c;我们将详细介绍如何在不同操作系…

【C++高阶】解锁C++的深层魅力——探索特殊类的奥秘

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;C 类型转换 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀C特殊类 &#x1f4d2;1. 不能被拷贝…

文字loading加载

效果 1. 导入库 import sys from PyQt5.QtCore import QTimer, Qt, QThread, pyqtSignal from PyQt5.QtGui import QPainter, QFont, QColor, QBrush from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton, QProgressBar, QLabel 代码首先导入了P…

C++ | Leetcode C++题解之第409题最长回文串

题目&#xff1a; 题解&#xff1a; class Solution { public:int longestPalindrome(string s) {unordered_map<char, int> count;int ans 0;for (char c : s)count[c];for (auto p : count) {int v p.second;ans v / 2 * 2;if (v % 2 1 and ans % 2 0)ans;}retur…

【设计模式-外观】

这里写自定义目录标题 定义UML图角色作用代码使用场景 定义 为子系统中一组相关接口提供一致界面&#xff0c;定义一个高级接口&#xff0c;使得子系统更加容易使用。 UML图 角色作用 外观&#xff08;Facade&#xff09;角色&#xff1a;这是外观模式的核心&#xff0c;它知…

macOS上谷歌浏览器的十大隐藏功能

谷歌浏览器&#xff08;Google Chrome&#xff09;在macOS上拥有一系列强大而隐蔽的特性&#xff0c;这些功能能显著提高您的浏览体验。从多设备同步到提升安全性和效率&#xff0c;这些被低估的功能等待着被发掘。我们将逐步探索这些功能&#xff0c;帮助您最大化利用谷歌浏览…

力扣题解815

大家好&#xff0c;欢迎来到无限大的频道。祝大家中秋节快乐​。 今日继续给大家带来力扣题解。 题目描述&#xff08;困难&#xff09;​&#xff1a; 公交路线 给你一个数组 routes &#xff0c;表示一系列公交线路&#xff0c;其中每个 routes[i] 表示一条公交线路&…

Python logging库(python日志库)Logger(记录器、收集器、采集器)、Handler(处理器)、Formatter(格式化器)、Log Level(日志级别)

文章目录 Python Logging库详解简介日志记录的基本概念1. Logger&#xff08;记录器&#xff09;&#xff1a;这是日志系统的入口点。每个记录器都有一个名称&#xff0c;并且记录器之间可以存在父子关系。2. Handler&#xff08;处理器&#xff09;&#xff1a;记录器将日志消…

网络安全-intigriti-0422-XSS-Challenge Write-up

目录 一、环境 二、解题 2.1看源码 一、环境 Intigriti April Challenge 二、解题 要求&#xff1a;弹出域名就算成功 2.1看源码 我们看到marge方法&#xff0c;肯定是原型链污染题目 接的是传参&#xff0c;我们可控的点在于qs.config和qs.settings&#xff0c;这两个可…

Java设计模式—面向对象设计原则(四) ----->接口隔离原则(ISP) (完整详解,附有代码+案例)

文章目录 3.4 接口隔离原则(ISP)3.4.1 概述3.4.2 案列 3.4 接口隔离原则(ISP) 接口隔离原则&#xff1a;Interface Segregation Principle&#xff0c;简称ISP 3.4.1 概述 客户端测试类不应该被迫依赖于它不使用的方法&#xff1b;一个类对另一个类的依赖应该建立在最小的接…

Invoke-Maldaptive:一款针对LDAP SearchFilter的安全分析工具

关于Invoke-Maldaptive MaLDAPtive 是一款针对LDAP SearchFilter的安全分析工具&#xff0c;旨在用于对LDAP SearchFilter 执行安全解析、混淆、反混淆和安全检测。 其基础是 100% 定制的 C# LDAP 解析器&#xff0c;该解析器处理标记化和语法树解析以及众多自定义属性&#x…

Excel图片批量插入单元格排版处理插件【图片大师】

为了方便大家在图片的插入排版的重复工作中解放出来&#xff0c;最近发布了一款批量插入图片的插件&#xff0c;欢迎大家下载&#xff0c;免费试用。 这是图片的文件夹&#xff1a; 主要功能如下: 1&#xff0c;匹配单元格名称的多张图批量插入到一个单元格 该功能支持设置图…

腾讯百度阿里华为常见算法面试题TOP100(4):双指针、哈希、滑动窗口

之前总结过字节跳动TOP50算法面试题&#xff1a; 字节跳动常见算法面试题top50整理_沉迷单车的追风少年-CSDN博客_字节算法面试题 目录 双指针 42.接雨水 283.移动零 11.盛最多水的容器 15.三数之和 哈希 1. 两数之和 49.字母异位词分组 128.最长连续序列 滑动窗…

网络协议全景:Linux环境下的TCP/IP、UDP

目录 1.UDP协议解析1.1.定义1.2.UDP报头1.3.特点1.4.缓冲区 2.TCP协议解析2.1.定义2.2.报头解析2.2.1.首部长度&#xff08;4位&#xff09;2.2.2.窗口大小2.2.3.确认应答机制2.2.4.6个标志位 2.3.超时重传机制2.4.三次握手四次挥手2.4.1.全/半连接队列2.4.2.listen2.4.3.TIME_…

SQL进阶的技巧:如何实现某列的累计乘积?

目录 0 场景描述 1 数据准备 2 问题分析 3 完全情况查询 4 小结 0 场景描述 在做数据处理的时候,尤其是复利累积的时候,有时候会有这样一场景,通过某种条件找到一列数据[X1,X2,X3...Xn],然后想要求y=X1X2X3...Xn。下面给出一个具体案例来详细解释这一问题,如下图所示…

学成在线练习(HTML+CSS)

准备工作 项目目录 内部包含当前网站的所有素材&#xff0c;包含 HTML、CSS、图片、JavaScript等等 1.由于元素具有一些默认样式&#xff0c;可能是我们写网页过程中根本不需要的&#xff0c;所有我们可以在写代码之前就将其清除 base.css /* 基础公共样式&#xff1a;清除…

大模型入门3:理解LLAMA

LLama在transformers库中的代码&#xff0c;以及各部分原理Llama3.1技术报告LLama 33b 微调尝试 Model a stack of DecoderBlocks(SelfAttention, FeedForward, and RMSNorm) decoder block 整体结构&#xff1a;最大的区别在pre-norm x -> norm(x) -> attention() -…