mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-03-08 07:31:09 +08:00
style(loading): 将熊猫加载动画替换为星球主题动画
更新加载页面的CSS和HTML结构，使用新的星球旋转动画替代原有熊猫动画，提升视觉新鲜感并保持加载功能不变。
This commit is contained in:
dap
@@ -49,236 +49,238 @@
|
||||
}
|
||||
|
||||
/** 下面是自定义 **/
|
||||
/* From Uiverse.io by Danishrehman786 */
|
||||
.panda-container {
|
||||
/* From Uiverse.io by Admin12121 */
|
||||
.content {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
width: 290px;
|
||||
height: 250px;
|
||||
perspective: 1000px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.panda-head {
|
||||
.content .planet {
|
||||
width: 65%;
|
||||
height: 65%;
|
||||
background-color: #546c8c;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 180px;
|
||||
background: white;
|
||||
border: 4px solid #222;
|
||||
border-radius: 50%;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
z-index: 4;
|
||||
box-shadow:
|
||||
0 3px 10px rgba(0, 0, 0, 0.1),
|
||||
inset 0 -5px 20px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transform-origin: center center;
|
||||
box-shadow: inset 2px -10px 0px rgba(0, 0, 0, 0.1);
|
||||
animation: planet 5s ease infinite alternate;
|
||||
/* planet ring */
|
||||
/* to cover the back of the ring */
|
||||
/* planet spots */
|
||||
}
|
||||
|
||||
.ear {
|
||||
position: absolute;
|
||||
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% {
|
||||
@keyframes planet {
|
||||
0% {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
|
||||
0%,
|
||||
45%,
|
||||
55%,
|
||||
100% {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
48%,
|
||||
52% {
|
||||
height: 5px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
}
|
||||
|
||||
@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% {
|
||||
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% {
|
||||
transform: translate(3px, 3px);
|
||||
letter-spacing: 3px;
|
||||
color: #7ea1bf;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(0, -3px);
|
||||
transform: translateX(30px);
|
||||
letter-spacing: 0px;
|
||||
color: #bacbd9;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(-3px, 2px);
|
||||
letter-spacing: 3px;
|
||||
color: #7ea1bf;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes smile {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(180deg) scale(1);
|
||||
}
|
||||
|
||||
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);
|
||||
transform: translateX(-30px);
|
||||
letter-spacing: 0px;
|
||||
color: #bacbd9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="loading" id="__app-loading__">
|
||||
<div class="panda-container">
|
||||
<div class="ear ear-left"></div>
|
||||
<div class="ear ear-right"></div>
|
||||
<div class="panda-head">
|
||||
<div class="eye-patch eye-patch-left"></div>
|
||||
<div class="eye-patch eye-patch-right"></div>
|
||||
<div class="eye eye-left"></div>
|
||||
<div class="eye eye-right"></div>
|
||||
<div class="pupil pupil-left"></div>
|
||||
<div class="pupil pupil-right"></div>
|
||||
<div class="nose"></div>
|
||||
<div class="mouth"></div>
|
||||
<div class="content">
|
||||
<div class="planet">
|
||||
<div class="ring"></div>
|
||||
<div class="cover-ring"></div>
|
||||
<div class="spots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user