【html+css 绚丽Loading】 000020 三才流转盘

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

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

目录

  • 📚一、效果
  • 📚二、信息
    • 💡1.简介:
    • 💡2.外观描述:
    • 💡3.使用方式:
    • 💡4.战斗方式:
    • 💡5.提升:
    • 💡6.传说:
  • 📚三、上代码,可以直接复制使用
    • 🗂️目录
    • ✍️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>000020</title>
</head>
<body>
<div class="container"><h1 style="font-size:33px;text-align: center;color:#fff;margin-bottom: 80px;padding-top: 100px;text-shadow: 0 3px 3px #4c6ed3;">【html+css 绚丽Loading】 000020 三才流转盘</h1><div class="wrapper"><!--        loading begin 不要这个loadWrapper也行,就是少了透视感,一般人不易发觉--><div class="loadWrapper"><div class="ball-triangle-path"><div></div><div></div><div></div></div></div><!--        loading end--></div><!--        loading的位置--><div class="loadType"><!--            loading在上--><div class="loadCard">
<!--            main begin--><div class="loadTop"><div class="loadWrapper"><div class="ball-triangle-path"><div></div><div></div><div></div></div></div><div class="loadMsg">加载中•••</div></div>
<!--            main end--><div class="loadTitle">loading 在<span>上边</span></div></div><!--            loading在下--><div class="loadCard">
<!--            main begin--><div class="loadDown"><div class="loadWrapper"><div class="ball-triangle-path"><div></div><div></div><div></div></div></div><div class="loadMsg">加载中•••</div></div>
<!--            main end--><div class="loadTitle">loading 在<span>下边</span></div></div><!--            loading在左--><div class="loadCard">
<!--            main begin--><div class="loadLeft"><div class="loadWrapper"><div class="ball-triangle-path"><div></div><div></div><div></div></div></div><div  class="loadMsg">加载中•••</div></div>
<!--            main end--><div class="loadTitle">loading 在<span>左边</span></div></div><!--            loading在右--><div class="loadCard">
<!--            main begin--><div class="loadRight"><div class="loadWrapper"><div class="ball-triangle-path"><div></div><div></div><div></div></div></div><div class="loadMsg">加载中•••</div></div>
<!--            main end--><div class="loadTitle">loading 在<span>右边</span></div></div></div></div>
</body>
</html>

✍️css

* {margin: 0;padding: 0;box-sizing: border-box;
}:root {--btn-bg-color: #fff;--font-color-black: #000;--btn-bg-color-hover: #FF5833;
}
.container {min-height: 100vh;background-color: #0e1538;
}.wrapper {margin-top: 30px;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 40px;
}.loadType{display: flex;justify-content: center;gap:20px;color:#fff;margin-top: 50px;
}.loadType .loadCard{display: flex;flex-direction: column;align-items: center;background:#4c6ed3;padding:15px;width: 180px;
}
.loadTitle{margin-top: 30px;padding:10px;background: #4fa7dd;}
.loadTitle span{color: var(--btn-bg-color-hover);font-weight: 600;
}
/*loading在上 默认的,不用样式*/
/*loading在下*/
.loadTop,.loadDown{display: flex;flex-direction: column;align-items: center;gap:24px;height: 100px;
}
.loadDown{display: flex;flex-direction: column-reverse;
}/*loading在左*/
.loadLeft,.loadRight{display: flex;gap:24px;align-items: center;height: 100px;
}/*loading在右*/
.loadRight{flex-direction: row-reverse;
}.loadMsg{width: 100px;text-align: center;
}
/*main loading*/
.loadWrapper {box-sizing: border-box;display: flex;flex: 0 1 auto;flex-direction: column;flex-grow: 1;flex-shrink: 0;flex-basis: 25%;max-width: 25%;height: 200px;align-items: center;justify-content: center;perspective: 500px;
}@-webkit-keyframes ball-triangle-path-1 {33% {-webkit-transform: translate(25px, -50px);transform: translate(25px, -50px); }66% {-webkit-transform: translate(50px, 0px);transform: translate(50px, 0px); }100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px); } }@keyframes ball-triangle-path-1 {33% {-webkit-transform: translate(25px, -50px);transform: translate(25px, -50px); }66% {-webkit-transform: translate(50px, 0px);transform: translate(50px, 0px); }100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px); } }@-webkit-keyframes ball-triangle-path-2 {33% {-webkit-transform: translate(25px, 50px);transform: translate(25px, 50px); }66% {-webkit-transform: translate(-25px, 50px);transform: translate(-25px, 50px); }100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px); } }@keyframes ball-triangle-path-2 {33% {-webkit-transform: translate(25px, 50px);transform: translate(25px, 50px); }66% {-webkit-transform: translate(-25px, 50px);transform: translate(-25px, 50px); }100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px); } }@-webkit-keyframes ball-triangle-path-3 {33% {-webkit-transform: translate(-50px, 0px);transform: translate(-50px, 0px); }66% {-webkit-transform: translate(-25px, -50px);transform: translate(-25px, -50px); }100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px); } }@keyframes ball-triangle-path-3 {33% {-webkit-transform: translate(-50px, 0px);transform: translate(-50px, 0px); }66% {-webkit-transform: translate(-25px, -50px);transform: translate(-25px, -50px); }100% {-webkit-transform: translate(0px, 0px);transform: translate(0px, 0px); } }.ball-triangle-path {position: relative;-webkit-transform: translate(-29.994px, -37.50938px);transform: translate(-29.994px, -37.50938px); }
.ball-triangle-path > div:nth-child(1) {-webkit-animation-name: ball-triangle-path-1;animation-name: ball-triangle-path-1;-webkit-animation-delay: 0;animation-delay: 0;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite; }
.ball-triangle-path > div:nth-child(2) {-webkit-animation-name: ball-triangle-path-2;animation-name: ball-triangle-path-2;-webkit-animation-delay: 0;animation-delay: 0;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite; }
.ball-triangle-path > div:nth-child(3) {-webkit-animation-name: ball-triangle-path-3;animation-name: ball-triangle-path-3;-webkit-animation-delay: 0;animation-delay: 0;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite; }
.ball-triangle-path > div {-webkit-animation-fill-mode: both;animation-fill-mode: both;position: absolute;width: 10px;height: 10px;border-radius: 100%;border: 1px solid #fff; }
.ball-triangle-path > div:nth-of-type(1) {top: 50px; }
.ball-triangle-path > div:nth-of-type(2) {left: 25px; }
.ball-triangle-path > div:nth-of-type(3) {top: 50px;left: 50px;
}

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


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

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

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

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

相关文章

AList嵌入动态验证码实现动态校验

前言 晓杰利用ALists创建了个网盘资源站&#xff0c;想着如何增加个动态验证码进行验证后才能进行访问下载&#xff0c;刚开始利用了固定的验证码&#xff0c;用户可以通过JS代码中进行绕过或直接拿到验证码&#xff0c;经过晓杰多次优化&#xff0c;最终版本支持动态获取验证…

Redis 实现哨兵模式

目录 1 哨兵模式介绍 1.1 什么是哨兵模式 1.2 sentinel中的三个定时任务 2 配置哨兵 2.1 实验环境 2.2 实现哨兵的三条参数&#xff1a; 2.3 修改配置文件 2.3.1 MASTER 2.3.2 SLAVE 2.4 将 sentinel 进行备份 2.5 开启哨兵模式 2.6 故障模拟 3 在整个架构中可能会出现的问题 …

一道关于php文件包含的CTF题

一、源码 这是index.php的页面。 点击login后会发现url里多了action的参数&#xff0c;那么我们就可以通过它来获取源码。 ?actionphp://filter/readconvert.base64-encode/resourcelogin.php 再通过base64的解码可以查看源码。 index.php源码&#xff1a; <?php erro…

可拖拽表单设计器都有哪些突出特点?

为了提高效率、降低开发成本&#xff0c;利用低代码技术平台的优势特点可以实现这一目标。究竟什么是低代码技术平台&#xff1f;都有哪些值得夸耀的特点和优势&#xff1f;今天&#xff0c;我们就带着这些问题&#xff0c;一起来了解低代码技术平台、可拖拽表单设计器的多个优…

第一周学习--联邦学习

OUC读研--第一周 目录 1、课程学习 2、fedavg的算法实现 关于代码详解 1、client __init__ 方法 local_train 方法 2、server 3、get_dataset 函数定义 数据集加载 MNIST 数据集 CIFAR-10 数据集 返回值 使用示例 4、 main 代码解释 可能的改进点 5、models …

【项目实用】SpringBoot整合日志功能插件

​分享不易&#xff0c;耗时耗力&#xff0c;麻烦给个不要钱的关注和赞吧 承接毕设指导&#xff0c;技术答疑&#xff0c;学习路上缺少导师的同学可以私信我 更多学习资料&#xff0c;公众号&#xff1a;墨轩学习网&#xff0c;B站&#xff1a;墨轩大楼 一、日志概述 日志记录…

安装WMware和Ubuntu并使用xShell连接

0、我的电脑配置 设备名称 hello 处理器 Intel(R) Core(TM) i7-10700K CPU 3.80GHz 3.79 GHz 机带 RAM 16.0 GB (15.9 GB 可用) 设备 ID 541EC230-9910-418C-9043-5FBBF8ED320C 产品 ID 00330-80000-00000-AA846 系统类型 64 位操作系统, 基于 x64 的处理器 笔和触控 没有可…

网络服务器及IO模型

网络服务器 单循环服务器&#xff1a;服务器在同一时刻只能响应一个客户端的请求 并发服务器模型&#xff1a;服务器在同一时刻可以响应多个客户端的请求 实现TCP并发服务器 1.多进程 2.多线程 3.IO多路复用&#xff1a; 为了解决进程或线程阻塞到某个 I/O 系统调用而出现的…

计算机视觉编程 3(图片处理)

目录 图像差分 高斯差分 形态学-物体计数 ​编辑 图片降噪 图像差分 # -*- coding: utf-8 -*- from PIL import Image from pylab import * from scipy.ndimage import filters import numpy# 添加中文字体支持 from matplotlib.font_manager import FontProperties font…

算法学习:一维数组的排序算法

【排序算法】八种排序算法可视化过程_哔哩哔哩_bilibili 1&#xff0c;冒泡排序&#xff1a; 冒泡排序(Bubble Sort): 冒泡排序是一种简单的排序算法,它通过重复地交换相邻的元素,直到整个序列有序。算法思路是:从第一个元素开始,依次比较相邻的两个元素,如果前者大于后者,就交…

51单片机最快能生成多高频率的方波?

前言 在嵌入式系统开发中&#xff0c;51 单片机作为一种非常非常非常经典&#xff0c;贯穿上下几十年的微控制器&#xff0c;被广泛应用于各种电子项目中。其中&#xff0c;生成特定频率的方波信号是一项常见的需求。 那么&#xff0c;51 单片机究竟能以多快的速度生成方波呢&…

c++类的继承

1.直接继承父类的方法 #include <iostream> #include <string>using namespace std; class Person{ public:void eat(){cout<<"在吃饭"<<endl;} }; class Student : public Person{ private:int age; public:string name;Student() {cout &…

Spring security 密码加密使用

一、密码加密 2011年12月21日&#xff0c;有人在网络上公开了一个包含600万个CSDN 用户资料的数据库&#xff0c;数据全部为明文储存&#xff0c;包含用户名、密码以及注册邮箱。事件发生后CSDN 在微博、官方网站等渠道发出了声明、解释说此数据库系2009 年备份所用&#xff0c…

外包干了2年,女朋友跑了...

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 简单的说下&#xff0c;我大学的一个同学&#xff0c;毕业后我自己去了自研的公司&#xff0c;他去了外包&#xff0c;快两年了我薪资、技术各个方面都有了很大的…

Salesforce篇——如何在lightning页面添加ListviewButton使用lwc组件

1.创建lwc组件&#xff0c;用于展示listview已选数据&#xff1a; html&#xff1a; <template><lightning-card title"Selected Records"><p>Selected Record IDs: {selectedIds}</p><lightning-button label"返回" onclick…

Spring中Bean的生命周期管理

Spring框架中的Bean生命周期是指从创建到销毁的整个过程。在这个过程中&#xff0c;Spring容器会负责管理Bean的状态和行为。以下是Spring中Bean生命周期的详细解释&#xff1a; 实例化&#xff1a;Spring容器根据Bean的定义信息&#xff0c;通过反射机制创建Bean对象。 设置属…

“阉割版”ADS还能遥遥领先吗?

文/王俣祺 导语&#xff1a;随着特斯拉FSD一次又一次的“入华无门”&#xff0c; 让国内车企智能驾驶的“内卷”之争迎来了喘息的余地&#xff0c;而“端到端”也成为现如今市场上的首要研发目标。早在今年4月份&#xff0c;华为就宣布其研发的HUAWEI ADS 3.0已经采用了最新的端…

Java-数据结构-包装类和认识泛型 !!!∑(゚Д゚ノ)ノ

目录&#xff1a; 一、包装类&#xff1a; 1、基本数据类型所对应的包装类&#xff1a; 2、装箱和拆箱&#xff1a; 二、 泛型&#xff1a; 1、什么是泛型&#xff1a; 2、语法&#xff1a; 三、泛型类的使用&#xff1a; 四、裸类型&#xff1a; 五、泛型的擦除机制&…

[oeasy]python031_[趣味拓展]unix起源_Ken_Tompson_Ritchie_multics

[趣味拓展]unix起源_Ken_Tompson_Ritchie_multics &#x1f94b; 回忆上次内容 上次 动态设置了 断点 断点 可以把代码 切成一段一段的可以 更快地调试 调试的目的 是 去除 bug 别害怕 bug 一步步 总能找到 bug这 就是 程序员基本功 调试 debug 在bug出现的时候 甚至…

Python 变量类型

Python 变量类型 变量赋值 多个变量赋值 标准数据类型 Python 数字 Python字符串 Python列表 Python 元组 Python 字典 Python数据类型转换 Python 变量类型 变量是存储在内存中的值&#xff0c;这就意味着在创建变量时会在内存中开辟一个空间。 基于变量的数据类型…