【html+css 绚丽Loading】000015 九转轮回珠_前端实现的文字loading动画-CSDN博客

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

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

共同探索软件研发！敬请关注【宝码香车】
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>000015</title>
</head>
<body>
<div class="container">
    <h1 style="text-align: center;color:#fff;margin-bottom: 160px;padding-top: 20px; text-shadow: 0 3px 3px #4c6ed3;">
        【html+css 绚丽Loading】
        <br>
        000015 九转轮回珠
    </h1>

    <div class="wrapper">
        <div class="ball-grid-pulse">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></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;
}

/*main loading*/
@-webkit-keyframes ball-grid-pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1); }
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.7; }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1; } }

@keyframes ball-grid-pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1); }
    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.7; }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1; } }

.ball-grid-pulse {
    width: 57px; }
.ball-grid-pulse > div:nth-child(1) {
    -webkit-animation-delay: 0.22s;
    animation-delay: 0.22s;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s; }
.ball-grid-pulse > div:nth-child(2) {
    -webkit-animation-delay: 0.64s;
    animation-delay: 0.64s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s; }
.ball-grid-pulse > div:nth-child(3) {
    -webkit-animation-delay: -0.15s;
    animation-delay: -0.15s;
    -webkit-animation-duration: 0.63s;
    animation-duration: 0.63s; }
.ball-grid-pulse > div:nth-child(4) {
    -webkit-animation-delay: -0.03s;
    animation-delay: -0.03s;
    -webkit-animation-duration: 1.24s;
    animation-duration: 1.24s; }
.ball-grid-pulse > div:nth-child(5) {
    -webkit-animation-delay: 0.08s;
    animation-delay: 0.08s;
    -webkit-animation-duration: 1.37s;
    animation-duration: 1.37s; }
.ball-grid-pulse > div:nth-child(6) {
    -webkit-animation-delay: 0.43s;
    animation-delay: 0.43s;
    -webkit-animation-duration: 1.55s;
    animation-duration: 1.55s; }
.ball-grid-pulse > div:nth-child(7) {
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s; }
.ball-grid-pulse > div:nth-child(8) {
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
    -webkit-animation-duration: 0.97s;
    animation-duration: 0.97s; }
.ball-grid-pulse > div:nth-child(9) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.63s;
    animation-duration: 0.63s; }
.ball-grid-pulse > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    float: left;
    -webkit-animation-name: ball-grid-pulse;
    animation-name: ball-grid-pulse;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}