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:
@@ -92,9 +92,22 @@ if (!($conn instanceof mysqli)) {
|
||||
background-color: #f4f4f4;
|
||||
padding: 20px 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="container mt-5 col-md-4">
|
||||
<h2>开发者登录</h2>
|
||||
<?php if (isset($success)): ?>
|
||||
@@ -119,5 +132,10 @@ if (!($conn instanceof mysqli)) {
|
||||
</div>
|
||||
</div>
|
||||
<script src="/js/bootstrap.bundle.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.classList.add('page-transition');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user