前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕
📚💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始
⬇️·🎥😊🎓📩😺🌈🤝🤖📜📖📋🔍✅🧰❓📄📢📈 🙋
📚一、效果
📚二、信息
💡1.简介:
三元轮回珠,一款源自修真界的独特兵器,由三个圆形珠子组成,这三个珠子分别代表着天、地、人三元,象征着宇宙的三大基本力量。每个珠子都有自己的灵力,但它们又相互关联,共同构成了三元轮回珠的完整力量。
💡2.外观描述:
外观描述:三元轮回珠的每一个珠子都闪耀着不同的光芒,第一个珠子代表天,散发着明亮的金色光芒,象征着天的无边无际和无上权威;第二个珠子代表地,散发着沉稳的绿色光芒,象征着地的广阔和生命的孕育;第三个珠子代表人,散发着温暖的红色光芒,象征着人的智慧和勇气。
💡3.使用方式:
使用方式:在使用三元轮回珠时,使用者需将三个珠子握在手中,集中精神,与珠子中的灵力产生共鸣。当共鸣达到一定程度时,第一个珠子会开始变大,吸收周围的灵气,增强其灵力。随着第一个珠子的变大,第二个和第三个珠子则会慢慢变小,它们的灵力会被第一个珠子吸收。当第一个珠子达到最大时,第二个珠子开始变大,而第一个和第三个珠子则会慢慢变小,以此类推,形成了一个循环的轮回过程。
💡4.战斗方式:
战斗方式:在战斗中,三元轮回珠可以释放出强大的灵力,形成各种攻击方式。例如,当第一个珠子变大时,可以释放出金色的天雷,攻击敌人;当第二个珠子变大时,可以释放出绿色的地裂,破坏敌人的防御;当第三个珠子变大时,可以释放出红色的人火,燃烧敌人的元神。同时,三元轮回珠的轮回过程,也可以让使用者在战斗中保持灵力的平衡,避免过度消耗。
总的来说,三元轮回珠是一款独特的修真界兵器,它不仅具有强大的攻击能力,更具有独特的轮回机制,让使用者在战斗中保持灵力的平衡,是一款极其珍贵的法宝。
因环境变化,修真界已不存在,只留下
残影
存世,望各位道友笑纳
,代码如下
📚三、上代码,可以直接复制使用
🗂️目录
✍️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>000011</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>
000011 三元轮回珠
</h1>
<div class="wrapper">
<div class="ball-pulse">
<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 scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; }
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7; }
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }
@keyframes scale {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; }
45% {
-webkit-transform: scale(0.1);
transform: scale(0.1);
opacity: 0.7; }
80% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1; } }
.ball-pulse > div:nth-child(1) {
-webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div:nth-child(2) {
-webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-pulse > div:nth-child(3) {
-webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }
.ball-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;
}
到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章,创作不易,如果能帮助到大家,希望大家多多支持宝码香车~💕
更多专栏订阅推荐:
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象(Date())操作