【 html+css 绚丽Loading 】 000036 三环流云镜

bin91532024-09-04 22:28

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


目录

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

📚一、效果

📚二、信息

💡1.简介：

三环流云镜，一款源自修真界的神秘兵器，由一个圆形组成，象征着宇宙中的三环之道，蕴含着天、地、人三环的流动与变化。这款兵器的独特之处在于其运行方式，会从原先的一个圆形自动生成两个一样的圆形，第一个圆形靠近接触中间的圆形时，第三个圆形离开，当离开一段距离后，又向中间的圆形靠近，当接触中间的圆形时，第一个圆形离开，当第一个圆形离开一段距离时又向中间的圆形靠近，如此循环往复，象征着三环之道的流动与变化。

💡2.外观描述：

外观描述：三环流云镜的圆形由纯净的灵石雕刻而成，表面镶嵌着象征天、地、人的神秘符文，这些符文蕴含着修真者对三环之道的理解。在使用时，从原先的一个圆形自动生成两个一样的圆形，第一个圆形靠近接触中间的圆形时，第三个圆形离开，当离开一段距离后，又向中间的圆形靠近，当接触中间的圆形时，第一个圆形离开，当第一个圆形离开一段距离时又向中间的圆形靠近，如此循环往复，如同三环之道的流动与变化，形成一种神秘的流云模式。

💡3.使用方式：

使用方式：在使用三环流云镜时，使用者需将流云镜握在手中，集中精神，与流云镜中的灵力产生共鸣。当共鸣达到一定程度时，从原先的一个圆形自动生成两个一样的圆形，第一个圆形靠近接触中间的圆形时，第三个圆形离开，当离开一段距离后，又向中间的圆形靠近，当接触中间的圆形时，第一个圆形离开，当第一个圆形离开一段距离时又向中间的圆形靠近，如此循环往复，形成一种神秘的流云模式，象征着三环之道的流动与变化。

💡4.战斗方式：

战斗方式：在战斗中，三环流云镜可以释放出三环之道的力量，形成各种攻击方式。例如，当某个圆形靠近中间圆形时，可以释放出靠近的力量，攻击敌人；当某个圆形离开中间圆形时，可以释放出离开的力量，稳固自身。同时，三环流云镜的循环往复过程，也可以让使用者在战斗中保持灵力的平衡，避免过度消耗，从而达到持续战斗的效果。

此外，三环流云镜还具有强大的防御能力。在使用者遭受攻击时，三环流云镜会自动运转，形成一个由三环之道力量组成的护盾，抵挡敌人的攻击。这种护盾不仅能够抵挡物理攻击，还能够抵挡灵力攻击，甚至能够抵挡一些特殊攻击，如灵魂攻击、诅咒攻击等。

💡5.提升：

三环流云镜的提升：三环流云镜不仅是一件强大的兵器，更是一件修炼的法宝。使用者可以通过修炼与流云镜的共鸣，提升自身的修为。在修炼过程中，三环流云镜会以三环之道流动的方式，引导使用者吸收和转化三环之道的力量，提升自身的灵力和元素掌控能力。同时，这种三环之道流动方式也能够引导使用者理解三环之道的流动与变化，提升自身的智慧和境界。

💡6.传说：

三环流云镜的传说：据传，三环流云镜是由修真界的大能者所创，融合了三环之道的力量和修真者的智慧，是一件极其珍贵的法宝。拥有三环流云镜的修真者，不仅能够获得强大的力量，还能够获得宇宙万物的祝福，成为修真界的大能者。但是，三环流云镜也有其危险性，如果使用者的修为不足，或者心性不纯，就有可能被流云镜中的灵力反噬，甚至被流云镜的三环之道流动过程所控制，成为流云镜的奴隶。

总的来说，三环流云镜是一款强大的修真界兵器，它不仅具有强大的攻击和防御能力，更具有独特的三环之道流动机制，让使用者在战斗和修炼中保持灵力的平衡，是一款极其珍贵的法宝。同时，三环流云镜的三环之道流动过程也象征着三环之道的流动与变化，让使用者在修炼中理解宇宙的奥秘，提升自身的智慧和境界。

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

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

🎥效果

🗂️目录

✍️html

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>000036</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>
        000036 三环流云镜
    </h1>

    <div class="wrapper">
        <div class="load000036"></div>
    </div>






</div>
</body>
</html>

✍️css

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;
}

/*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:50px; /**/
}
.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;
}
.tip {
    text-align: center;
    color: #fff;
    font-size: 20px;
}
/*上*/
.loadTop{
    flex-direction: column;
}
/*下*/
.loadBottom{
    flex-direction: column-reverse;
}

/*左*/
.loadRight{
    flex-direction: row;
}
/*右*/
.loadRight{
    flex-direction: row-reverse;
}

/*加载文字*/
.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*/
.load000036 {
    width: 15px;
    aspect-ratio: 1;    /*控制圆球大小*/
    background: #fff;   /*控制颜色*/
    border-radius: 50%;
    animation: load000036Ani 1s infinite linear alternate;
}
@keyframes load000036Ani {
    0%  {box-shadow: 15px 0 0 #fff,-25px 0 0 #fff}
    50% {box-shadow: 15px 0 0 #fff,-15px 0 0 #fff}
    100%{box-shadow: 25px 0 0 #fff,-15px 0 0 #fff}
}

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

🎥效果

🗂️目录

✍️html

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>000036</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>
        000036 三环流云镜 更多案例
    </h1>



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

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

        <!--            loading在右-->
        <div class="loadCard">
            <div class="loadRight">
                <div class="loadStyle load000036"></div>
                <div class="loadMsg">
                    加载中•••
                </div>
            </div>
            <div class="loadTitle">
                loading 在<span>右边</span>
            </div>
        </div>

    </div>

    <div class="tip">
        若有大小、颜色、位置不太合适的，使用的时候调节一下即可
    </div>


</div>
</body>
</html>

✍️css

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;
}

/*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: 50px; /**/
}

.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;
}

.tip {
    text-align: center;
    color: #fff;
    font-size: 20px;
    margin-top: 30px;
}

/*上*/
.loadTop {
    flex-direction: column;
}

/*下*/
.loadBottom {
    flex-direction: column-reverse;
}

/*左*/
.loadRight {
    flex-direction: row;
}

/*右*/
.loadRight {
    flex-direction: row-reverse;
}

/*加载文字*/
.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*/
.load000036 {
    width: 15px;
    aspect-ratio: 1; /*控制圆球大小*/
    background: #fff; /*控制颜色*/
    border-radius: 50%;
    animation: load000036Ani 1s infinite linear alternate;
}

@keyframes load000036Ani {
    0% {
        box-shadow: 15px 0 0 #fff, -25px 0 0 #fff
    }
    50% {
        box-shadow: 15px 0 0 #fff, -15px 0 0 #fff
    }
    100% {
        box-shadow: 25px 0 0 #fff, -15px 0 0 #fff
    }
}

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

更多专栏订阅推荐：

👍 html+css+js 绚丽效果

💕 vue

✈️ Electron

⭐️ js

📝 字符串

✍️ 时间对象（Date()）操作

相关推荐
带娃的IT创业者1 小时前
《Python Web部署应知应会》Flask网站隐藏或改变浏览器URL：从Nginx反向代理到URL重写技术
前端·python·flask
Json____1 小时前
使用vue2 开发一个纯静态的校园二手交易平台-前端项目练习
前端·vue2·前端模板·vue脚手架·校园二手交易平台·项目项目练习
小二·1 小时前
前端技巧——性能优化篇
前端·性能优化
agenIT2 小时前
micro-app前端微服务原理解析
前端·微服务·架构
小宁爱Python2 小时前
深入理解CSS显示模式与盒子模型
前端·css
只可远观3 小时前
Git 忽略文件配置 .gitignore
android·前端·git
我是大头鸟3 小时前
SpringMVC 通过ajax 前后端数据交互
前端·javascript·ajax
北观止3 小时前
批量删除OpenStack实例
linux·前端·chrome·openstack
BillKu4 小时前
Vue3中AbortController取消请求的用法详解
前端·javascript·vue.js
heroboyluck5 小时前
rust 全栈应用框架dioxus
前端·rust·dioxus
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03西电B测-计算机网络综合实验(含验收问题)04YOLOv8目标检测在RK3588部署全过程05Coze扣子平台完整体验和实践（附国内和国际版对比）06DeepSeek各版本说明与优缺点分析07YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】08YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU09我决定放弃搞 Java 了10【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！