【 html+css 绚丽Loading 】000051 方寸轮回矩

宝码香车

于 2024-09-17 21:02:37 发布

阅读量613

点赞数 18

分类专栏： # html+css 绚丽Loading 文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_33650655/article/details/142318709

版权

html+css 绚丽Loading 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

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

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

📚一、效果

📚二、信息

💡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>000051</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>
        000051  方寸轮回矩
    </h1>

    <div class="wrapper">
        <div class="load000051"></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*/
.load000051 {
    color: #000;
    width: 4px;
    aspect-ratio: 1;         /*控制大小比例*/
    --c:#fff;                /*控制颜色*/
    border-radius: 50%;
    box-shadow: 19px 0 0 7px var(--c), 38px 0 0 3px var(--c), 57px 0 0 0 var(--c);
    transform: translateX(-38px);
    animation: load000051Ani .5s infinite alternate linear;
}

@keyframes load000051Ani {
    50%  {box-shadow: 19px 0 0 3px var(--c), 38px 0 0 7px var(--c), 57px 0 0 3px var(--c)}
    100% {box-shadow: 19px 0 0 0   var(--c), 38px 0 0 3px var(--c), 57px 0 0 7px var(--c)}
}

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

🎥效果

🗂️目录

✍️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>000051</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>
        000051  方寸轮回矩  更多案例
    </h1>

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

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

        <!--            loading在右-->
        <div class="loadCard">
            <div class="loadRight">
                <div class="load000051"></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*/
.load000051 {
    color: #000;
    width: 4px;
    aspect-ratio: 1;         /*控制大小比例*/
    --c:#fff;                /*控制颜色*/
    border-radius: 50%;
    box-shadow: 19px 0 0 7px var(--c), 38px 0 0 3px var(--c), 57px 0 0 0 var(--c);
    transform: translateX(-38px);
    animation: load000051Ani .5s infinite alternate linear;
}

@keyframes load000051Ani {
    50%  {box-shadow: 19px 0 0 3px var(--c), 38px 0 0 7px var(--c), 57px 0 0 3px var(--c)}
    100% {box-shadow: 19px 0 0 0   var(--c), 38px 0 0 3px var(--c), 57px 0 0 7px var(--c)}
}