63 lines
1.5 KiB
SCSS
63 lines
1.5 KiB
SCSS
#app-loading {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #f8f9fa;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999;
|
|
|
|
/* 立方体的容器（让方块水平排列） */
|
|
.cube-container {
|
|
display: flex;
|
|
gap: 15px; /* 方块之间的间距 */
|
|
}
|
|
|
|
/* 立体小方块 */
|
|
.cube {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(145deg, #3498db, #2980b9); /* 渐变颜色 */
|
|
border-radius: 5px;
|
|
position: relative;
|
|
animation: jump 1.2s infinite ease-in-out;
|
|
}
|
|
|
|
/* 给不同的方块加不同颜色 */
|
|
.cube1 { background: linear-gradient(145deg, #e74c3c, #c0392b); animation-delay: 0s; }
|
|
.cube2 { background: linear-gradient(145deg, #f1c40f, #d4ac0d); animation-delay: 0.2s; }
|
|
.cube3 { background: linear-gradient(145deg, #2ecc71, #27ae60); animation-delay: 0.4s; }
|
|
|
|
/* 方块跳跃动画 */
|
|
@keyframes jump {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
|
|
}
|
|
50% {
|
|
transform: translateY(-30px);
|
|
box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
/* 加载文字 */
|
|
.loading-text {
|
|
margin-top: 20px;
|
|
font-size: 18px;
|
|
color: #555;
|
|
font-weight: bold;
|
|
letter-spacing: 2px;
|
|
animation: fade 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
/* 文字淡入淡出动画 */
|
|
@keyframes fade {
|
|
0%, 100% { opacity: 0.2; }
|
|
50% { opacity: 1; }
|
|
}
|
|
}
|