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%;
left: 50%;
transform: translate(-50%, -50%);
animation: lineFloat 8s ease-in-out infinite;
background: var(--line-color);
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 {
width: 60%;
@@ -105,21 +116,18 @@
.vertical-line {
width: 2px;
height: 60%;
animation-delay: 2s;
}
.diagonal-line-1 {
width: 70%;
height: 2px;
transform: translate(-50%, -50%) rotate(45deg);
animation-delay: 4s;
}
.diagonal-line-2 {
width: 70%;
height: 2px;
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); }
25% { transform: translate(-50%, -50%) rotate(5deg); }
25% { transform: translate(-50%, -50%) rotate(6deg); }
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 {

30
html/500.html
View File

@@ -125,9 +125,24 @@
position: absolute;
background: var(--line-color);
transform-origin: center;
animation: lineMove 8s ease-in-out infinite;
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 {
width: 2px;
@@ -144,7 +159,7 @@
top: 40%;
right: 30%;
transform: translateY(-50%) rotate(-45deg);
animation-delay: 2s;
animation-delay: 0s;
}
.dot {
@@ -226,9 +241,16 @@
to { transform: rotate(360deg); }
}
@keyframes lineMove {
@keyframes lineMove1 {
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 {