这个网站维护倒计时界面具有以下特点：
视觉设计特点
- 现代化UI设计：采用毛玻璃效果（backdrop-filter）和渐变背景，营造高级感
- 响应式布局：适配不同屏幕尺寸，确保在移动端和桌面端都有良好显示效果
- 动态动画效果：包含弹跳图标、脉冲数字、进度条动画等多种视觉动效
功能特点
- 实时倒计时：精确到秒的倒计时显示，自动计算天、时、分、秒
- 进度可视化：底部进度条直观展示维护进度
- 自动维护完成处理：倒计时结束后自动更新界面状态
- 友好的用户体验：清晰的信息提示和联系方式
技术特点
- 纯HTML/CSS/JS实现：无需外部依赖，直接可运行
- CSS3动画：使用CSS动画和过渡效果，性能优异
- 响应式设计：使用flexbox布局，适配各种屏幕尺寸
- 现代CSS特性：使用rgba、渐变、毛玻璃效果等现代CSS特性
交互特点
- 平滑过渡：数字变化和进度条更新都有平滑过渡效果
- 视觉反馈：每个倒计时数字都有独立的动画效果
- 用户友好：提供联系方式和维护说明，提升用户体验
这个界面不仅功能完整，而且视觉效果出色，能够有效传达网站维护信息，同时保持良好的用户体验。
截图
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站维护倒计时</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.maintenance-container {
text-align: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
max-width: 600px;
width: 90%;
}
.maintenance-icon {
font-size: 64px;
margin-bottom: 20px;
animation: bounce 2s infinite;
}
.maintenance-title {
font-size: 2.5em;
margin-bottom: 10px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.maintenance-message {
font-size: 1.2em;
margin-bottom: 30px;
line-height: 1.6;
opacity: 0.9;
}
.countdown-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.countdown-item {
background: rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 20px;
min-width: 100px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.countdown-number {
font-size: 2.5em;
font-weight: bold;
display: block;
margin-bottom: 5px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.countdown-label {
font-size: 0.9em;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 1px;
}
.progress-container {
width: 100%;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
height: 10px;
margin: 30px 0;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
transition: width 1s ease;
}
.contact-info {
margin-top: 20px;
font-size: 0.9em;
opacity: 0.8;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.countdown-item {
animation: pulse 2s infinite;
}
.countdown-item:nth-child(2n) {
animation-delay: 0.5s;
}
.countdown-item:nth-child(3n) {
animation-delay: 1s;
}
.countdown-item:nth-child(4n) {
animation-delay: 1.5s;
}
@media (max-width: 768px) {
.maintenance-container {
padding: 30px 20px;
}
.maintenance-title {
font-size: 2em;
}
.countdown-item {
min-width: 80px;
padding: 15px;
}
.countdown-number {
font-size: 2em;
}
}
</style>
</head>
<body>
<div class="maintenance-container">
<div class="maintenance-icon">🔧</div>
<h1 class="maintenance-title">网站维护中</h1>
<p class="maintenance-message">我们正在努力改进服务体验，稍后将恢复正常访问。感谢您的耐心等待！</p>
<div class="countdown-container">
<div class="countdown-item">
<span class="countdown-number" id="days">00</span>
<span class="countdown-label">天</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="hours">00</span>
<span class="countdown-label">小时</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="minutes">00</span>
<span class="countdown-label">分钟</span>
</div>
<div class="countdown-item">
<span class="countdown-number" id="seconds">00</span>
<span class="countdown-label">秒</span>
</div>
</div>
<div class="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="contact-info">
如有紧急问题，请联系：admin@example.com
</div>
</div>
<script>
// 设置维护结束时间（这里设置为从现在开始24小时后）
const maintenanceEndTime = new Date();
maintenanceEndTime.setDate(maintenanceEndTime.getDate() + 1); // 1天后
maintenanceEndTime.setHours(18, 0, 0, 0); // 设置为当天18:00:00
// 如果当前时间已经超过了设置的维护结束时间，则设置为第二天的18点
if (maintenanceEndTime < new Date()) {
maintenanceEndTime.setDate(maintenanceEndTime.getDate() + 1);
}
function updateCountdown() {
const now = new Date();
const difference = maintenanceEndTime - now;
if (difference <= 0) {
document.getElementById('days').textContent = '00';
document.getElementById('hours').textContent = '00';
document.getElementById('minutes').textContent = '00';
document.getElementById('seconds').textContent = '00';
// 维护结束，可以在这里添加跳转逻辑
document.querySelector('.maintenance-title').textContent = '维护完成！';
document.querySelector('.maintenance-message').textContent = '网站已恢复正常访问，即将跳转...';
setTimeout(() => {
// 可以在这里添加跳转到主站的逻辑
// window.location.href = '/';
}, 3000);
return;
}
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
// 更新进度条
const totalTime = maintenanceEndTime - new Date(maintenanceEndTime.getTime() - (24 * 60 * 60 * 1000));
const elapsed = now - (maintenanceEndTime - (24 * 60 * 60 * 1000));
const progressPercent = Math.min(100, Math.max(0, (elapsed / totalTime) * 100));
document.getElementById('progress-bar').style.width = progressPercent + '%';
}
// 立即更新一次
updateCountdown();
// 每秒更新一次
setInterval(updateCountdown, 1000);
// 页面加载完成后的动画效果
document.addEventListener('DOMContentLoaded', function() {
const items = document.querySelectorAll('.countdown-item');
items.forEach((item, index) => {
setTimeout(() => {
item.style.opacity = '0';
item.style.transform = 'translateY(20px)';
setTimeout(() => {
item.style.transition = 'all 0.5s ease';
item.style.opacity = '1';
item.style.transform = 'translateY(0)';
}, 50);
}, index * 200);
});
});
</script>
</body>
感谢分享
@阿狸 没事看看