【 html+css 绚丽Loading 】000047 玄武流转盘

news2024/11/24 20:04:54

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

共同探索软件研发!敬请关注【宝码香车】
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>000047</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>
        000047 玄武流转盘
    </h1>

    <div class="wrapper">
        <div class="load000047"></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*/
.load000047 {
    width: 60px;
    aspect-ratio: 1;              /*控制大小比例*/
    --_cb: #fff 90%,transparent;  /*控制颜色和背景色*/
    --_g: no-repeat radial-gradient(farthest-side,var(--_cb));
    background: var(--_g), var(--_g), var(--_g);
    background-size: 25% 25%;
    animation: load000047Ani 1s infinite;
}
@keyframes load000047Ani{
    0%     {background-position: 0% -100%,50% -100%,100% -100%}
    16.67% {background-position: 0%   50%,50% -100%,100% -100%}
    33.33% {background-position: 0%   50%,50%   50%,100% -100%}
    45%,55%{background-position: 0%   50%,50%   50%,100%   50%}
    66.67% {background-position: 0%  200%,50%   50%,100%   50%}
    83.33% {background-position: 0%  200%,50%  200%,100%   50%}
    100%   {background-position: 0%  200%,50%  200%,100%  200%}
}


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

🎥效果

描述

🗂️目录

描述

✍️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>000047</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>
        000047   玄武流转盘   更多案例
    </h1>

    <div class="loadType">
        <div class="loadCard">
            <div class="loadTop">
                <div class="load000047"></div>
                <div class="loadMsg">
                    加载中•••
                </div>
            </div>
            <div class="loadTitle">
                loading 在<span>上边</span>
            </div>
        </div>
        <!--            loading在下-->
        <div class="loadCard">
            <div class="loadBottom">
                <div class="load000047"></div>
                <div class="loadMsg">
                    加载中•••
                </div>
            </div>
            <div class="loadTitle">
                loading 在<span>下边</span>
            </div>
        </div>

        <!--            loading在左-->
        <div class="loadCard">
            <div class="loadLeft">
                <div class="load000047"></div>
                <div class="loadMsg">
                    加载中•••
                </div>
            </div>
            <div class="loadTitle">
                loading 在<span>左边</span>
            </div>
        </div>

        <!--            loading在右-->
        <div class="loadCard">
            <div class="loadRight">
                <div class="load000047"></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*/
.load000047 {
    width: 60px;
    aspect-ratio: 1;              /*控制大小比例*/
    --_cb: #fff 90%,transparent;  /*控制颜色和背景色*/
    --_g: no-repeat radial-gradient(farthest-side,var(--_cb));
    background: var(--_g), var(--_g), var(--_g);
    background-size: 25% 25%;
    animation: load000047Ani 1s infinite;
}
@keyframes load000047Ani{
    0%     {background-position: 0% -100%,50% -100%,100% -100%}
    16.67% {background-position: 0%   50%,50% -100%,100% -100%}
    33.33% {background-position: 0%   50%,50%   50%,100% -100%}
    45%,55%{background-position: 0%   50%,50%   50%,100%   50%}
    66.67% {background-position: 0%  200%,50%   50%,100%   50%}
    83.33% {background-position: 0%  200%,50%  200%,100%   50%}
    100%   {background-position: 0%  200%,50%  200%,100%  200%}
}

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


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

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

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

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

相关文章

有关 Element-ui 的一些思考

本篇文章是基于 element-ui 的 主题样式修改 曾经为了修改组件风格,一个项目用了上百个样式穿透,后来才发现定制一个主题就够了! 第一步,在官网的主题页面,修改背景色、字体颜色及边框颜色 第二步,下载主题 第三步,用下载的css文件替换掉默认的css文件

得物超级品质保障中心,助力电商品质保障迈向新高度

近期记者走进国内知名潮流电商平台——得物App的超级品质保障中心。该中心位于上海市嘉定区&#xff0c;总建筑面积达到约12万平方米&#xff0c;是集查验鉴别、鉴别研究、质量管理、仓储流转等功能于一体的综合性服务设施&#xff0c;全面覆盖了服装、配饰、奢侈品等多个业务品…

关于java学习基础路线的分享【javaSE】

成长路上不孤单&#x1f60a;【14后&#xff0c;C爱好者&#xff0c;持续分享所学&#xff0c;如有需要欢迎收藏转发&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#xff01;&#xff01;&#xff01;&#xff01;&#xff…

计算一批集合中包含指定成员的次数

有一个用Excel表格表示的赛事分组图&#xff0c;从C1:V13&#xff0c;每6列表示四个选手的一桌比赛&#xff0c;1-16表示16位选手的编号。 ABCDEFGHIJKLMNOPQRSTUV118141112214313101516652231579111315246810123311814153691213165214449131548121637101426553211161471015161…

fmql之ubuntu移植

官方资料&#xff1a;ubuntu18的压缩包 目的&#xff1a;放到SD卡中启动ubuntu&#xff08;官方是放在emmc中&#xff09; 教程&#xff1a;99_FMQL45_大黄蜂开发板跑ubuntu18.04.docx 所需文件 其中&#xff0c;format_emmc_ext4.txt对emmc的分区是512M&#xff08;放上述文…

基于STM32C8T6的CubeMX:HAL库点亮LED

三个可能的问题和解决方法&#xff1a; 大家完成之后回来看&#xff0c;每一种改错误都是一种成长&#xff0c;不要畏惧&#xff0c;要快乐&#xff0c;积极面对&#xff0c;要耐心对待 STMCuBeMX新建项目的两种匪夷所思的问题https://mp.csdn.net/mp_blog/creation/editor/1…

2024年增强现实(AR)的现状

自从2017年苹果和安卓推出SDK&#xff0c;让移动设备上的增强现实构建变得容易以来&#xff0c;AR已经获得了显著的受欢迎程度。现在&#xff0c;它已成为一种广为人知的常见技术&#xff0c;但随着时间的推移&#xff0c;它取代我们所有电子产品、成为我们可以每天长时间佩戴的…

点餐|基于java的电子点餐系统小程序(源码+数据库+文档)

电子点餐系统|小程序|在线点餐 目录 基于java的电子点餐系统小程序 一、前言 二、系统设计 三、系统功能设计 系统功能实现 前台&#xff1a; 后台&#xff1a; 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; …

yolov8+deepsort+botsort+bytetrack车辆检测和测速系统

结合YOLOv8、DeepSORT、BoTSORT和ByteTrack等技术&#xff0c;可以实现一个高效的车辆检测和测速系统。这样的系统适用于交通监控、智能交通管理系统&#xff08;ITS&#xff09;等领域&#xff0c;能够实时识别并跟踪车辆&#xff0c;并估算其速度。 项目介绍 本项目旨在开发…

<<编码>> 第 6 章 发报机与继电器(Telegraphs and Relays) 示例电路

##继电器 info::操作说明 注: 此处输入处未添加电源及开关, 因此不能控制继电器的开合 读者可自行添加电源及开关, 或查看后续可操作的例子 primary::在线交互操作链接 https://cc.xiaogd.net/?startCircuitLinkhttps://book.xiaogd.net/code-hlchs-examples/assets/circuit/c…

LOOKUP函数和VLOOKUP函数知识讲解与案例演示

〇、需求 在 Excel 文档中&#xff0c;根据查找值从查找域和结果域构成的数组中&#xff0c;找到对应的结果值。 一、知识点讲解 LOOKUP函数&#xff08;比较常用&#xff0c;推荐&#xff09;和VLOOKUP函数 两个公式都可以实现上述需求。 1. LOOKUP 函数 1.1 单个查询条件…

混合整数规划及其MATLAB实现

目录 引言 混合整数规划的基本模型 混合整数规划的求解方法 MATLAB中的混合整数规划实现 示例&#xff1a;多变量系统的混合整数规划 表格总结&#xff1a;混合整数规划的求解方法与适用场景 结论 引言 混合整数规划&#xff08;Mixed Integer Programming, MIP&#xf…

大象机器人------2、坐标控制

坐标控制 主要用于实现智能规划路线让机械臂从一个位置到另一个指定位置。分为[x,y,z,rx,ry,rz]&#xff0c;其中[x,y,z]表示的是机械臂头部在空间中的位置&#xff08;该坐标系为直角坐标系&#xff09;&#xff0c;[rx,ry,rz]表示的是机械臂头部在该点的姿态&#xff08;该坐…

如何将镜像推送到docker hub

前言 这一篇应该是最近最后一篇关于docker的博客了&#xff0c;咱来个有始有终&#xff0c;将最后一步——上传镜像给他写完&#xff0c;废话不多说&#xff0c;直接进入正题。 登录 首先需要确保登录才能推送到你的仓库中去&#xff0c;在终端输入docker login,输入用户名和…

通信工程学习:什么是HSS归属用户服务器

HSS&#xff1a;归属用户服务器 HSS&#xff08;归属用户服务器&#xff0c;Home Subscriber Server&#xff09;是IP多媒体子系统&#xff08;IMS&#xff09;中控制层的一个重要组成部分&#xff0c;它扮演着存储和管理用户相关信息的核心角色。以下是关于HSS归属用户服务器的…

中断映射及相关函数例程的控制流

GPIO 和 EXTIx 的映射关系 GPIOx0&#xff08;xA~G&#xff09;对应 EXTI0 &#xff1b; GPIOx1&#xff08;xA~G&#xff09;对应 EXTI1 &#xff1b; GPIOx2&#xff08;xA~G&#xff09;对应 EXTI2 &#xff1b; GPIOx15&#xff08;xA~G&#xff09;对应 EXTI15 &…

java重点学习-集合

七 集合 7.1 复杂度分析 7.2 数组 1.数组(Array)是一种用连续的内存空间存储相同数据类型 数据的线性数据结构。 2.数组下标为什么从0开始 寻址公式是:baseAddressi*dataTypeSize&#xff0c;计算下标的内存地址效率较高 3.查找的时间复杂度 随机(通过下标)查询的时间复杂度是O…

通信工程学习:什么是CSCF会话控制功能、P-CSCF代理会话控制功能、I-CSCF询问会话控制功能、S-CSCF服务会话控制功能

一、CSCF会话控制功能 CSCF&#xff08;Call Session Control Function&#xff09;会话控制功能是IP多媒体子系统&#xff08;IMS&#xff09;内部的核心功能实体&#xff0c;主要负责处理多媒体呼叫会话过程中的信令控制。CSCF在整个IMS网络中起着至关重要的作用&#xff0c;…

第 9 章图像分割

图像分割是将一幅图像分割成有意义区域的过程。区域可以是图像的前景与背景或图像中一些单独的对象。这些区域可以利用一些诸如颜色、边界或近邻相似性等特征进行构建。本章中&#xff0c;我们将看到一些不同的分割技术。 9.1 图割&#xff08;Graph Cut&#xff09; 图论中的…

STL和C++11

1 补充知识点 c与c区别 c语言和C不能说一个面向过程&#xff0c;一个面向对象&#xff1a; 面向过程和面向对象只是一种编程思想&#xff0c;不是针对某一种语言的。Linux内核中的C语言就是运用面向对象的思想编写的。只是说&#xff0c;在实现面向对象编程时&#xff0c;C提…