【html+css 绚丽Loading】 - 000009 五行逆流珠

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

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

目录

  • 📚一、效果
  • 📚二、信息
    • 💡1.简介:
    • 💡2.外观描述:
    • 💡3.使用方式:
    • 💡4.战斗方式:
    • 💡5.提升:
    • 💡6.传说:
  • 📚三、上代码,可以直接复制使用
    • 🗂️目录
    • ✍️html
    • ✍️css


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

📚一、效果

效果

📚二、信息

💡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>000009</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】 - 000009 五行逆流珠</h1><div class="wrapper">
<!--        loading--><div class="loadWrapper"><div class="ball-pulse-rise"><div></div><div></div><div></div><div></div><div></div></div></div></div></div>
</body>
</html>

✍️css

html,body {margin: 0;padding: 0;
}: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-pulse-rise-even {0% {-webkit-transform: scale(1.1);transform: scale(1.1); }25% {-webkit-transform: translateY(-30px);transform: translateY(-30px); }50% {-webkit-transform: scale(0.4);transform: scale(0.4); }75% {-webkit-transform: translateY(30px);transform: translateY(30px); }100% {-webkit-transform: translateY(0);transform: translateY(0);-webkit-transform: scale(1);transform: scale(1); } }@keyframes ball-pulse-rise-even {0% {-webkit-transform: scale(1.1);transform: scale(1.1); }25% {-webkit-transform: translateY(-30px);transform: translateY(-30px); }50% {-webkit-transform: scale(0.4);transform: scale(0.4); }75% {-webkit-transform: translateY(30px);transform: translateY(30px); }100% {-webkit-transform: translateY(0);transform: translateY(0);-webkit-transform: scale(1);transform: scale(1); } }@-webkit-keyframes ball-pulse-rise-odd {0% {-webkit-transform: scale(0.4);transform: scale(0.4); }25% {-webkit-transform: translateY(30px);transform: translateY(30px); }50% {-webkit-transform: scale(1.1);transform: scale(1.1); }75% {-webkit-transform: translateY(-30px);transform: translateY(-30px); }100% {-webkit-transform: translateY(0);transform: translateY(0);-webkit-transform: scale(0.75);transform: scale(0.75); } }@keyframes ball-pulse-rise-odd {0% {-webkit-transform: scale(0.4);transform: scale(0.4); }25% {-webkit-transform: translateY(30px);transform: translateY(30px); }50% {-webkit-transform: scale(1.1);transform: scale(1.1); }75% {-webkit-transform: translateY(-30px);transform: translateY(-30px); }100% {-webkit-transform: translateY(0);transform: translateY(0);-webkit-transform: scale(0.75);transform: scale(0.75); } }.ball-pulse-rise > 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;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-delay: 0;animation-delay: 0; }
.ball-pulse-rise > div:nth-child(2n) {-webkit-animation-name: ball-pulse-rise-even;animation-name: ball-pulse-rise-even; }
.ball-pulse-rise > div:nth-child(2n-1) {-webkit-animation-name: ball-pulse-rise-odd;animation-name: ball-pulse-rise-odd;
}

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


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

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

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

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

相关文章

[000-01-018].第3节:Linux环境下ElasticSearch环境搭建

我的后端学习笔记大纲 我的ElasticSearch学习大纲 1.Linux系统搭建ES环境&#xff1a; 1.1.单机版&#xff1a; a.安装ES-7.8版本 1.下载ES: 2.上传与解压&#xff1a;将下载的tar包上传到服务器software目录下&#xff0c;然后解压缩&#xff1a;tar -zxvf elasticsearch-7…

Excel求和方法之

一 SUM&#xff08;&#xff09;&#xff0c;选择要相加的数,回车即可 二 上面的方法还不够快。用下面这个 就成功了 三 还有一种一样快的 选中之后&#xff0c;按下Alt键和键&#xff08;即Alt&#xff09;

深度学习------------------卷积神经网络(LeNet)

目录 LeNet网络手写的数字识别MNIST总结卷积神经网络&#xff08;LeNet&#xff09; 问题 LeNet网络 手写的数字识别 MNIST ①输入的是&#xff1a;3232的image ②放到一个55的卷积层里面&#xff08;为什么是5&#xff1f;因为32-x128&#xff0c;∴x5&#xff09;&#xff0c…

计算机毕业设计PySpark+Flask bilibili弹幕情感分析 B站视频数据可视化 B站爬虫 机器学习 深度学习 NLP自然语言处理 大数据毕业设计

### 开题报告&#xff1a;基于PySpark和Flask的B站弹幕情感分析系统 #### 一、研究背景 在网络视频平台的用户互动中&#xff0c;弹幕&#xff08;Danmaku&#xff09;作为一种实时评论的形式&#xff0c;已经成为观众表达观点和情感的重要方式。尤其是在B站&#xff08;哔哩…

MySQL 数据库管理

在 MySQL 中&#xff0c;数据库管理是非常基础但又至关重要的技能。无论是创建新的数据库、选择当前使用的数据库&#xff0c;还是查看数据库的相关信息&#xff0c;这些操作都是日常数据库管理中不可或缺的一部分。本文将详细介绍 MySQL 数据库管理的基本操作&#xff0c;包括…

Go Roadmap-Basics中文笔记

Go Roadmap-Basics 地址&#xff1a;https://roadmap.sh/golang 简介&#xff1a;Github star No.6 学习路线 Go 中译版 Learn the Basics Go特点&#xff1a;静态类型&#xff0c;运行速度快&#xff0c;编译语言&#xff0c;编译速度快&#xff0c;自动垃圾回收&#xff…

【GH】【EXCEL】P4: Chart

文章目录 data and chartdonut chart (radial chart)Radial Chart bar chartBar Chart line chartLine Chart Scatter ChartScatter Chart Surface ChartSurface Chart Chart DecoratorsChart Decorators Chart GraphicsChart Graphics data and chart donut chart (radial cha…

C语言04--数组超详解

1.基本概念 逻辑&#xff1a;一次性定义多个相同类型的变量&#xff0c;并存储到一片连续的内存中语法&#xff1a; 数据类型 数组名字 [ 数据的量 ] ; 示例&#xff1a; int a[5]; int Num ; 语法释义&#xff1a; a 是数组名&#xff0c;即这片连续内存的名称[5] …

一文入门:使用 Python的requests 库

简介 requests 是 Python 中一个简单易用的 HTTP 库&#xff0c;用于发送各种 HTTP 请求。它建立在 Python 标准库 urllib 之上&#xff0c;提供了更人性化的接口。 安装 requests 库 在开始之前&#xff0c;确保你已经安装了 requests 库。如果还没有安装&#xff0c;可以通…

基于WEB的旅游推荐系统设计与实现

TOC springboot280基于WEB的旅游推荐系统设计与实现 第1章 绪论 1.1选题动因 当前的网络技术&#xff0c;软件技术等都具备成熟的理论基础&#xff0c;市场上也出现各种技术开发的软件&#xff0c;这些软件都被用于各个领域&#xff0c;包括生活和工作的领域。随着电脑和笔…

(七)Flink Watermark

Flink 的 Watermark 是用来标识数据流中的一个时间点。Watermark 的设计是为了解决乱序数据处理的问题,尤其是涉及到多个分区的 Kafka 消费者时。在 Watermark 的作用下,即使某些数据出现了延迟到达的情况,也不会导致整个处理流程的中断。此外,Watermark 还能防止过期的数据…

五、2 移位操作符赋值操作符

1、移位操作符 2、赋值操作符 “ ”赋值&#xff0c;“ ”判断是否相等 1&#xff09;连续赋值 2&#xff09;复合赋值符

驾驭时间之舟:SQL中时序数据处理的深度探索

标题&#xff1a;驾驭时间之舟&#xff1a;SQL中时序数据处理的深度探索 在数据的长河中&#xff0c;时间序列数据以其独特的流动性和连续性&#xff0c;记录着世界的每一次脉动。SQL作为数据查询的通用语言&#xff0c;在处理时序数据时&#xff0c;也展现出了其独特的魅力和…

VS Code开发C#(.NET)之快速入门

本篇快速介绍在VS Code中开发C#的完整说明和示例&#xff1a; 环境准备 安装VS Code&#xff1a; 前往Visual Studio Code官网 下载并安装VS Code。 安装.NET SDK&#xff1a; C#是基于.NET框架的&#xff0c;因此需要安装 .NET SDK。 前往 .NET官网 下载并安装适用于操…

每天一个数据分析题(四百九十一)- 主成分分析与因子分析

因子载荷矩阵是主成分载荷矩阵&#xff08;&#xff09;的结果 A. 最小方差斜交旋转 B. 最大方差斜交旋转 C. 最小方差正交旋转 D. 最大方差正交旋转 数据分析认证考试介绍&#xff1a;点击进入 题目来源于CDA模拟题库 点击此处获取答案 数据分析专项练习题库 内容涵盖…

成为Python砖家(4): 装饰器的简单理解

第一次理解 Python 中的装饰器&#xff08;decorator&#xff09;&#xff0c;是Python中一个非常强大的工具&#xff0c;它是一个返回函数的函数。 上面这个定义很简洁&#xff0c;但是没说清楚。 第二次理解 装饰器&#xff0c;是一个接收函数 func、返回封装后的函数 wr…

编译器揭秘

从上世纪50年代开始&#xff0c;编程语言五花八门&#xff0c;编译器和解释器层出不穷。此处只列出常见编程语言的编译器和解释器信息&#xff0c;不常见的编程语言有单独文章介绍。 C/C cc 此处代表Unix C编译器&#xff0c;其他平台可能借用cc软链接到真正的C编译器。MSVC 微…

【生日视频制作】路虎劳斯莱斯中控改名字AE模板修改文字软件生成器教程特效素材【AE模板】

路虎劳斯莱斯中控改名字生日视频制作教程AE模板改文字软件特效 怎么如何做的【生日视频制作】路虎劳斯莱斯中控改名字AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤&#xff1a; 安装AE软件下载AE模板把AE模板导入AE软件修改图片或文字渲染出视频

Element-UI Table实现列表筛选数据及列表嵌套选择框

VUE 框架在 Element UI 的基础上&#xff0c;Table 组件中实现了列表数据的修改功能&#xff0c;支持单选和多选功能&#xff0c;并且列表具备筛选功能。样式如图所示。 功能介绍 点击table列名实现筛选查询功能相关性判断点击列表中的正方形实现选择框功能&#xff0c;同时修…

Qt5 编译 Qt creator 源码中的 designer 模块

文章目录 下载 Qt Creator 源码 下载 Qt Creator 源码 Github: https://github.com/qt/qttools 笔记打算用 Qt 5.12.12 来编译 qt creator-designer 所以笔者下载的是 tag - 5.12.12 &#xff0c;解压后如下&#xff0c;先删除多余的文件&#xff0c;后续还要删除更多文件方便…