feat(UI): 为多个页面添加页面过渡动画效果
为router.php、admin/addapp.php、app.php、error_pages/404.html、error_pages/500.html、admin/login.php、developer/login.php、developer/profile.php和developer/dashboard.php添加fadeIn动画效果,提升用户体验
This commit is contained in:
@@ -30,14 +30,32 @@
|
||||
font-size: 1.2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.page-transition {
|
||||
animation: fadeIn 0.5s ease-in-out;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body class="page-transition">
|
||||
<div class="error-container">
|
||||
<h1>404</h1>
|
||||
<h2>页面未找到</h2>
|
||||
<p>您请求的页面不存在或已被移动。</p>
|
||||
<a href="/" class="btn btn-primary mt-3">返回首页</a>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.classList.add('page-transition');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user