mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-04-10 16:13:14 +08:00
style(loading): 将熊猫加载动画替换为星球主题动画
更新加载页面的CSS和HTML结构，使用新的星球旋转动画替代原有熊猫动画，提升视觉新鲜感并保持加载功能不变。
This commit is contained in:
dap
@@ -49,236 +49,238 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/** 下面是自定义 **/
|
/** 下面是自定义 **/
|
||||||
/* From Uiverse.io by Danishrehman786 */
|
/* From Uiverse.io by Admin12121 */
|
||||||
.panda-container {
|
.content {
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 290px;
|
display: flex;
|
||||||
height: 250px;
|
justify-content: center;
|
||||||
perspective: 1000px;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panda-head {
|
.content .planet {
|
||||||
|
width: 65%;
|
||||||
|
height: 65%;
|
||||||
|
background-color: #546c8c;
|
||||||
|
border-radius: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 200px;
|
display: flex;
|
||||||
height: 180px;
|
align-items: center;
|
||||||
background: white;
|
transform-origin: center center;
|
||||||
border: 4px solid #222;
|
box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
|
||||||
border-radius: 50%;
|
animation: planet 5s ease infinite alternate;
|
||||||
top: 50px;
|
/* planet ring */
|
||||||
left: 50px;
|
/* to cover the back of the ring */
|
||||||
z-index: 4;
|
/* planet spots */
|
||||||
box-shadow:
|
|
||||||
0 3px 10px rgba(0, 0, 0, 0.1),
|
|
||||||
inset 0 -5px 20px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ear {
|
@keyframes planet {
|
||||||
position: absolute;
|
0% {
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
background: #222;
|
|
||||||
border: 4px solid #222;
|
|
||||||
border-radius: 50%;
|
|
||||||
z-index: 3;
|
|
||||||
box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ear-left {
|
|
||||||
top: 30px;
|
|
||||||
left: 40px;
|
|
||||||
transform: rotate(-15deg);
|
|
||||||
animation: ear-twitch-left 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ear-right {
|
|
||||||
top: 30px;
|
|
||||||
left: 190px;
|
|
||||||
transform: rotate(15deg);
|
|
||||||
animation: ear-twitch-right 3.5s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eye-patch {
|
|
||||||
position: absolute;
|
|
||||||
width: 60px;
|
|
||||||
height: 70px;
|
|
||||||
background: #222;
|
|
||||||
border-radius: 50%;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eye-patch-left {
|
|
||||||
top: 60px;
|
|
||||||
left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eye-patch-right {
|
|
||||||
top: 60px;
|
|
||||||
left: 110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eye {
|
|
||||||
position: absolute;
|
|
||||||
width: 25px;
|
|
||||||
height: 30px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
z-index: 6;
|
|
||||||
animation: blink 4s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eye-left {
|
|
||||||
top: 75px;
|
|
||||||
left: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eye-right {
|
|
||||||
top: 75px;
|
|
||||||
left: 125px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pupil {
|
|
||||||
position: absolute;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
background: #222;
|
|
||||||
border-radius: 50%;
|
|
||||||
z-index: 7;
|
|
||||||
animation: look-around 8s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pupil-left {
|
|
||||||
top: 82px;
|
|
||||||
left: 53px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pupil-right {
|
|
||||||
top: 82px;
|
|
||||||
left: 133px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nose {
|
|
||||||
position: absolute;
|
|
||||||
width: 30px;
|
|
||||||
height: 25px;
|
|
||||||
background: #222;
|
|
||||||
border-radius: 50%;
|
|
||||||
top: 110px;
|
|
||||||
left: 85px;
|
|
||||||
z-index: 8;
|
|
||||||
box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mouth {
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 8px solid transparent;
|
|
||||||
border-right: 8px solid transparent;
|
|
||||||
border-top: 12px solid #222;
|
|
||||||
border-radius: 50%;
|
|
||||||
top: 135px;
|
|
||||||
left: 92px;
|
|
||||||
z-index: 7;
|
|
||||||
transform: rotate(180deg);
|
|
||||||
animation: smile 5s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes wave {
|
|
||||||
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
transform: rotate(-20deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: rotate(10deg);
|
transform: rotate(10deg);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes blink {
|
|
||||||
|
|
||||||
0%,
|
|
||||||
45%,
|
|
||||||
55%,
|
|
||||||
100% {
|
100% {
|
||||||
height: 30px;
|
transform: rotate(-10deg);
|
||||||
}
|
|
||||||
|
|
||||||
48%,
|
|
||||||
52% {
|
|
||||||
height: 5px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes look-around {
|
.content .planet .ring {
|
||||||
|
position: absolute;
|
||||||
|
width: 300px;
|
||||||
|
height: 300px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: #bacbd9;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transform-origin: 33% center;
|
||||||
|
box-shadow: 2px -10px 0px rgba(0, 0, 0, 0.1), inset -5px -10px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
animation: ring 3s ease infinite;
|
||||||
|
/* small ball */
|
||||||
|
/* inner ring */
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ring {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(110deg) rotateZ(0deg) translate(-50px, 5px);
|
||||||
|
}
|
||||||
|
|
||||||
0%,
|
|
||||||
100% {
|
100% {
|
||||||
transform: translate(0, 0);
|
transform: rotateX(110deg) rotateZ(360deg) translate(-50px, 5px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .planet .ring:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 10px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: #7ea1bf;
|
||||||
|
z-index: 2;
|
||||||
|
left: calc(0px - 5px);
|
||||||
|
box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .planet .ring:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 240px;
|
||||||
|
height: 240px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background-color: #7ea1bf;
|
||||||
|
box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .planet .cover-ring {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
border-bottom-left-radius: 80%;
|
||||||
|
border-bottom-right-radius: 80%;
|
||||||
|
border-top-left-radius: 100px;
|
||||||
|
border-top-right-radius: 100px;
|
||||||
|
transform: translate(0px, -17px);
|
||||||
|
background-color: #546c8c;
|
||||||
|
z-index: 2;
|
||||||
|
box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .planet .spots {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .planet .spots span {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: #3c4359;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 100%;
|
||||||
|
box-shadow: inset -2px 3px 0px rgba(0, 0, 0, 0.3);
|
||||||
|
animation: dots 5s ease infinite alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dots {
|
||||||
|
0% {
|
||||||
|
box-shadow: inset -3px 3px 0px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .planet .spots span:nth-child(1) {
|
||||||
|
top: 20px;
|
||||||
|
right: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .planet .spots span:nth-child(2) {
|
||||||
|
top: 40px;
|
||||||
|
left: 50px;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .planet .spots span:nth-child(3) {
|
||||||
|
top: 80px;
|
||||||
|
left: 20px;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .planet .spots span:nth-child(4) {
|
||||||
|
top: 80px;
|
||||||
|
left: 90px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .planet .spots span:nth-child(5) {
|
||||||
|
top: 160px;
|
||||||
|
left: 70px;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .planet .spots span:nth-child(6) {
|
||||||
|
top: 165px;
|
||||||
|
left: 125px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content .planet .spots span:nth-child(7) {
|
||||||
|
top: 90px;
|
||||||
|
left: 150px;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content p {
|
||||||
|
color: #bacbd9;
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 2;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -20px;
|
||||||
|
font-family: "Roboto Mono", monospace;
|
||||||
|
animation: text 4s ease infinite;
|
||||||
|
width: 100px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes text {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-30px);
|
||||||
|
letter-spacing: 0px;
|
||||||
|
color: #bacbd9;
|
||||||
}
|
}
|
||||||
|
|
||||||
25% {
|
25% {
|
||||||
transform: translate(3px, 3px);
|
letter-spacing: 3px;
|
||||||
|
color: #7ea1bf;
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
transform: translate(0, -3px);
|
transform: translateX(30px);
|
||||||
|
letter-spacing: 0px;
|
||||||
|
color: #bacbd9;
|
||||||
}
|
}
|
||||||
|
|
||||||
75% {
|
75% {
|
||||||
transform: translate(-3px, 2px);
|
letter-spacing: 3px;
|
||||||
|
color: #7ea1bf;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes smile {
|
|
||||||
|
|
||||||
0%,
|
|
||||||
100% {
|
100% {
|
||||||
transform: rotate(180deg) scale(1);
|
transform: translateX(-30px);
|
||||||
}
|
letter-spacing: 0px;
|
||||||
|
color: #bacbd9;
|
||||||
50% {
|
|
||||||
transform: rotate(180deg) scale(1.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes ear-twitch-left {
|
|
||||||
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
transform: rotate(-15deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: rotate(-25deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes ear-twitch-right {
|
|
||||||
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
transform: rotate(15deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: rotate(25deg);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="loading" id="__app-loading__">
|
<div class="loading" id="__app-loading__">
|
||||||
<div class="panda-container">
|
<div class="content">
|
||||||
<div class="ear ear-left"></div>
|
<div class="planet">
|
||||||
<div class="ear ear-right"></div>
|
<div class="ring"></div>
|
||||||
<div class="panda-head">
|
<div class="cover-ring"></div>
|
||||||
<div class="eye-patch eye-patch-left"></div>
|
<div class="spots">
|
||||||
<div class="eye-patch eye-patch-right"></div>
|
<span></span>
|
||||||
<div class="eye eye-left"></div>
|
<span></span>
|
||||||
<div class="eye eye-right"></div>
|
<span></span>
|
||||||
<div class="pupil pupil-left"></div>
|
<span></span>
|
||||||
<div class="pupil pupil-right"></div>
|
<span></span>
|
||||||
<div class="nose"></div>
|
<span></span>
|
||||||
<div class="mouth"></div>
|
<span></span>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user