i/script
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(404.html, 500.html): 更新动画效果，添加新的线条动画和调整现有动画参数

Browse Source
This commit is contained in:
牡蛎
2025-09-12 12:44:35 +08:00
parent ae3aa66498
commit c9e4dc2c16
2 changed files with 57 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
html/404.html
View File

@@ -92,10 +92,21 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
animation: lineFloat 8s ease-in-out infinite;
background: var(--line-color); background: var(--line-color);
transition: background 0.3s ease; transition: background 0.3s ease;
} }
.horizontal-line {
animation: lineFloatH 8s ease-in-out infinite;
}
.vertical-line {
animation: lineFloatV 10s ease-in-out infinite;
}
.diagonal-line-1 {
animation: lineFloatD1 12s ease-in-out infinite;
}
.diagonal-line-2 {
animation: lineFloatD2 14s ease-in-out infinite;
}
.horizontal-line { .horizontal-line {
width: 60%; width: 60%;
@@ -105,21 +116,18 @@
.vertical-line { .vertical-line {
width: 2px; width: 2px;
height: 60%; height: 60%;
animation-delay: 2s;
} }
.diagonal-line-1 { .diagonal-line-1 {
width: 70%; width: 70%;
height: 2px; height: 2px;
transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
animation-delay: 4s;
} }
.diagonal-line-2 { .diagonal-line-2 {
width: 70%; width: 70%;
height: 2px; height: 2px;
transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
animation-delay: 6s;
} }
/* 漂浮的点 */ /* 漂浮的点 */
@@ -239,11 +247,27 @@
} }
/* 动画 */ /* 动画 */
@keyframes lineFloat { @keyframes lineFloatH {
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
25% { transform: translate(-50%, -50%) rotate(5deg); } 25% { transform: translate(-50%, -50%) rotate(6deg); }
50% { transform: translate(-50%, -50%) rotate(0deg); } 50% { transform: translate(-50%, -50%) rotate(0deg); }
75% { transform: translate(-50%, -50%) rotate(-5deg); } 75% { transform: translate(-50%, -50%) rotate(-6deg); }
}
@keyframes lineFloatV {
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
20% { transform: translate(-50%, -50%) rotate(5deg); }
50% { transform: translate(-50%, -50%) rotate(0deg); }
80% { transform: translate(-50%, -50%) rotate(-5deg); }
}
@keyframes lineFloatD1 {
0%, 100% { transform: translate(-50%, -50%) rotate(20deg); }
30% { transform: translate(-50%, -50%) rotate(25deg); }
60% { transform: translate(-50%, -50%) rotate(15deg); }
}
@keyframes lineFloatD2 {
0%, 100% { transform: translate(-50%, -50%) rotate(-20deg); }
40% { transform: translate(-50%, -50%) rotate(-15deg); }
70% { transform: translate(-50%, -50%) rotate(-25deg); }
} }
@keyframes floatDot { @keyframes floatDot {

30
html/500.html
View File

@@ -125,9 +125,24 @@
position: absolute; position: absolute;
background: var(--line-color); background: var(--line-color);
transform-origin: center; transform-origin: center;
animation: lineMove 8s ease-in-out infinite;
transition: background 0.3s ease; transition: background 0.3s ease;
} }
.line-1 {
width: 2px;
height: 200px;
top: 50%;
left: 30%;
transform: translateY(-50%) rotate(45deg);
animation: lineMove1 9s ease-in-out infinite;
}
.line-2 {
width: 2px;
height: 150px;
top: 40%;
right: 30%;
transform: translateY(-50%) rotate(-45deg);
animation: lineMove2 11s ease-in-out infinite;
}
.line-1 { .line-1 {
width: 2px; width: 2px;
@@ -144,7 +159,7 @@
top: 40%; top: 40%;
right: 30%; right: 30%;
transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg);
animation-delay: 2s; animation-delay: 0s;
} }
.dot { .dot {
@@ -226,9 +241,16 @@
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }
@keyframes lineMove {
@keyframes lineMove1 {
0%, 100% { transform: translateY(-50%) rotate(45deg); } 0%, 100% { transform: translateY(-50%) rotate(45deg); }
50% { transform: translateY(-50%) rotate(135deg); } 30% { transform: translateY(-50%) rotate(60deg); }
60% { transform: translateY(-50%) rotate(30deg); }
}
@keyframes lineMove2 {
0%, 100% { transform: translateY(-50%) rotate(-45deg); }
40% { transform: translateY(-50%) rotate(-30deg); }
80% { transform: translateY(-50%) rotate(-60deg); }
} }
@keyframes pulse { @keyframes pulse {