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

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 {