《站点维护页面分享-非原创》

点击即可转跳至在线预览~

在网站开发与维护过程中，常常会遇到需要对网站进行迁移升级的情况。为了给用户一个良好的提示，告知他们网站正在进行迁移维护，同时提供一些必要的信息，我们可以创建一个美观且功能丰富的网站迁移维护页面。下面就来介绍一个这样的项目示例。

一、项目概述

这个项目是一个用于展示网站迁移维护状态的单页面应用，采用 HTML、CSS 和 JavaScript 构建。页面设计简洁大方，同时运用了动画效果，让用户在等待的过程中也能有较好的视觉体验。

二、页面设计

1. 整体布局

页面主要分为几个部分：粒子背景、中心内容区域和页脚。粒子背景营造出一种动态的视觉效果，中心内容区域包含网站标志、提示信息、域名展示、进度条和社交图标，页脚则显示备案号。

2. 样式设计

• 背景效果：使用了渐变背景，并通过 CSS 动画实现了背景的动态变化，给人一种科技感和时尚感。

body {
    background: linear-gradient(-45deg, #1a2a6c, #b21f1f, #2d388a, #4a00e0);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

• 卡片样式：中心的提示信息区域采用了卡片式设计，具有模糊效果和阴影，增加了层次感。

.card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

• 动画效果：页面中运用了多种动画效果，如标志的脉冲动画、卡片的淡入动画、进度条的动态变化等，增强了页面的交互性和趣味性。

三、功能实现

1. 粒子效果

通过 JavaScript 动态创建多个粒子元素，并为每个粒子设置随机的大小、位置、动画延迟和时长，实现了粒子在页面中随机漂浮的效果。

document.addEventListener('DOMContentLoaded', function() {
    const particlesContainer = document.getElementById('particles');
    const particleCount = 50;
  
    for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
      
        const size = Math.random() * 10 + 2;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
      
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = `${Math.random() * 100}%`;
      
        const delay = Math.random() * 15;
        const duration = 15 + Math.random() * 20;
        particle.style.animationDelay = `${delay}s`;
        particle.style.animationDuration = `${duration}s`;
      
        particle.style.opacity = Math.random() * 0.5 + 0.1;
      
        particlesContainer.appendChild(particle);
    }
});

2. 进度条展示

进度条通过 CSS 动画实现了动态变化，模拟网站迁移的进度。当前显示的进度为 30%，并会在 30% - 40% 之间动态变化。

.progress-bar {
    height: 100%;
    width: 30%;
    background: linear-gradient(to right, #00c9ff, #92fe9d);
    border-radius: 10px;
    animation: progress 2s infinite alternate;
}

@keyframes progress {
    0% { width: 30%; }
    100% { width: 40%; }
}

四、响应式设计

为了确保页面在不同设备上都能有良好的显示效果，项目采用了响应式设计。通过媒体查询，当屏幕宽度小于 768px 时，会调整页面元素的字体大小和布局。

@media (max-width: 768px) {
    .logo { font-size: 2.5rem; }
    h1 { font-size: 2rem; }
    .card { padding: 30px 20px; width: 95%; }
    .domain { font-size: 1.4rem; padding: 12px 20px; }
    p { font-size: 1rem; }
}

五、总结

这个网站迁移维护页面项目通过 HTML、CSS 和 JavaScript 实现了一个美观、功能丰富且响应式的页面。它不仅能有效地向用户传达网站正在迁移维护的信息，还能提供一些必要的链接和进度展示，同时通过动画效果提升了用户体验。在实际应用中，我们可以根据需要对页面的内容和样式进行定制，以满足不同网站的需求。