Skip to content

Commit 17af46f

Browse files
authored
Merge pull request #16 from JavaZeroo/codex/enhance-webpage-design-with-animations
Add entry fade-in and animated gradient header
2 parents 4b2d85f + 21a8e98 commit 17af46f

File tree

2 files changed

+45
-2
lines changed

2 files changed

+45
-2
lines changed

src/App.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ function App() {
187187
}, [handleGlobalDragEnter, handleGlobalDragOver, handleGlobalDragLeave, handleGlobalDrop]);
188188

189189
return (
190-
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 relative">
190+
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 relative page-fade-in">
191191
{/* 全页面拖拽覆盖层 */}
192192
{globalDragOver && (
193193
<div
@@ -263,7 +263,7 @@ function App() {
263263
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
264264
</svg>
265265
</div>
266-
<h1 className="text-lg font-bold text-gray-800">
266+
<h1 className="text-lg font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-purple-500 to-indigo-600 animate-gradient-slow">
267267
Log Analyzer
268268
</h1>
269269
<button

src/index.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,3 +224,46 @@ input[type="checkbox"]:focus {
224224
animation: none !important;
225225
}
226226
}
227+
228+
/* 页面入场动画 */
229+
@keyframes pageFadeIn {
230+
from {
231+
opacity: 0;
232+
transform: translateY(10px);
233+
}
234+
to {
235+
opacity: 1;
236+
transform: translateY(0);
237+
}
238+
}
239+
240+
.page-fade-in {
241+
animation: pageFadeIn 0.5s ease-out;
242+
}
243+
244+
@media (prefers-reduced-motion: reduce) {
245+
.page-fade-in {
246+
animation: none !important;
247+
}
248+
}
249+
250+
/* 渐变文字动画 */
251+
@keyframes gradientShift {
252+
0%, 100% {
253+
background-position: 0% 50%;
254+
}
255+
50% {
256+
background-position: 100% 50%;
257+
}
258+
}
259+
260+
.animate-gradient-slow {
261+
background-size: 200% 200%;
262+
animation: gradientShift 8s ease infinite;
263+
}
264+
265+
@media (prefers-reduced-motion: reduce) {
266+
.animate-gradient-slow {
267+
animation: none !important;
268+
}
269+
}

0 commit comments

Comments
 (0)