网站维护停运通知源码
一个 HTML 单页网站停运源码，页面简洁美观，自适应手机和电脑端。首页内容在 index 文件里面修改，无后台。
点下面的运行可以查看演示！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>服务已停止</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap">
<style>
body {
font-family: 'Noto Sans SC', sans-serif;
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
color: #fff;
min-height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem 1rem;
}
.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
overflow: hidden;
transition: all 0.5s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
.service-icon {
position: relative;
width: 120px;
height: 120px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
box-shadow: 0 0 30px rgba(255, 59, 48, 0.5);
}
.service-icon::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid rgba(255, 59, 48, 0.8);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.95);
opacity: 0.8;
}
70% {
transform: scale(1.1);
opacity: 0;
}
100% {
transform: scale(0.95);
opacity: 0;
}
}
.slide-up {
animation: slideUp 0.8s ease forwards;
opacity: 0;
transform: translateY(30px);
}
@keyframes slideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.particle {
position: absolute;
border-radius: 50%;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.1) 100%);
}
.shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
10%, 90% {transform: translateX(-1px);}
20%, 80% {transform: translateX(2px);}
30%, 50%, 70% {transform: translateX(-4px);}
40%, 60% {transform: translateX(4px);}
}
.animate-pulse {
animation: pulse-fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-fade {
0%, 100% {opacity: 1;}
50% {opacity: .5;}
}
.badge {
position: relative;
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 1.5rem;
background: rgba(255, 59, 48, 0.2);
border: 1px solid rgba(255, 59, 48, 0.5);
color: #ff3b30;
}
.timeline {
position: relative;
padding-left: 2rem;
}
.timeline::before {
content: '';
position: absolute;
left: 0;
top: 6px;
height: calc(100% - 12px);
width: 2px;
background: rgba(156, 163, 175, 0.5);
}
.timeline-item {
position: relative;
padding-bottom: 1.5rem;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-dot {
position: absolute;
left: -2rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #4f46e5;
border: 2px solid #fff;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}
.service-status-badge {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
border-radius: 9999px;
background: rgba(255, 59, 48, 0.2);
border: 1px solid rgba(255, 59, 48, 0.5);
color: #ff3b30;
font-weight: 500;
margin-bottom: 1.5rem;
}
.status-pulse {
width: 10px;
height: 10px;
background-color: #ff3b30;
border-radius: 50%;
margin-right: 0.5rem;
position: relative;
}
.status-pulse::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
background-color: rgba(255, 59, 48, 0.5);
animation: status-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes status-ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
.service-feature {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
}
.feature-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(79, 70, 229, 0.2);
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
flex-shrink: 0;
color: #818cf8;
}
</style>
</head>
<body>
<div class="container mx-auto px-4 py-8">
<div class="card p-6 md:p-8 slide-up" style="animation-delay: 0.1s;">
<div>
<h1 class="text-3xl md:text-4xl font-bold mb-2 bg-gradient-to-r from-red-400 to-pink-600 bg-clip-text text-transparent">服务已停止</h1>
<p class="text-gray-300 mb-6">感谢您一直以来的支持与信任</p>
<div>
<span></span>
服务已永久关闭
</div>
<div>
<i class="fas fa-power-off text-5xl text-red-500"></i>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-5 mb-6 max-w-2xl mx-auto">
<h2 class="text-xl font-bold mb-3 text-yellow-300">
<i class="fas fa-exclamation-triangle mr-2"></i>重要通知
</h2>
<p class="text-gray-300 mb-4">
我们非常遗憾地通知您，本服务已于 <span class="font-semibold text-red-400">2026年02月10日</span> 永久停止运营。
</p>
<p>
请注意，所有账户数据将按照我们的数据处理规定进行安全处理。如您需要导出个人数据，请在 <span class="font-semibold text-yellow-300">30天内</span> 通过下方联系方式与我们联系。
</p>
</div>
<div class="timeline mx-auto text-left max-w-lg mb-6">
<h3 class="font-bold text-xl mb-4 text-center text-purple-300">服务关闭时间线</h3>
<div>
<div></div>
<div class="font-medium text-purple-300">2026-01-01</div>
<div>服务关闭预告公告</div>
</div>
<div>
<div></div>
<div class="font-medium text-purple-300">2026-02-10</div>
<div>服务完全停止</div>
</div>
<div>
<div></div>
<div class="font-medium text-purple-300">2026-02-10</div>
<div>用户数据删除</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto">
<div>
<div>
<i class="fas fa-database"></i>
</div>
<div>
<h3 class="font-medium text-blue-300">数据备份</h3>
<p class="text-sm text-gray-400">所有用户可申请个人数据备份导出</p>
</div>
</div>
<div>
<div>
<i class="fas fa-coins"></i>
</div>
<div>
<h3 class="font-medium text-blue-300">退款申请</h3>
<p class="text-sm text-gray-400">未使用的服务将按比例退款</p>
</div>
</div>
<div>
<div>
<i class="fas fa-headset"></i>
</div>
<div>
<h3 class="font-medium text-blue-300">客户支持</h3>
<p class="text-sm text-gray-400">服务关闭后30天内仍可获得支持</p>
</div>
</div>
<div>
<div>
<i class="fas fa-arrow-right"></i>
</div>
<div>
<h3 class="font-medium text-blue-300">替代服务</h3>
<p class="text-sm text-gray-400">我们将提供替代服务推荐</p>
</div>
</div>
</div>
</div>
</div>
<div class="card p-6 md:p-8 mt-6 slide-up" style="animation-delay: 0.3s;">
<h2 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-question-circle mr-2 text-yellow-400"></i>
常见问题
</h2>
<div>
<div class="p-4 bg-gray-800 bg-opacity-50 rounded-lg">
<h3 class="font-medium text-yellow-300 mb-2">我的数据会怎么处理？</h3>
<p>所有用户数据将根据隐私政策进行安全处理，您可以联系我们申请导出个人数据。请注意，所有数据将在服务停止30天后被永久删除。</p>
</div>
<div class="p-4 bg-gray-800 bg-opacity-50 rounded-lg">
<h3 class="font-medium text-yellow-300 mb-2">有替代服务推荐吗？</h3>
<p>是的，我们已经准备了相关替代服务推荐清单，将通过邮件发送给已注册用户。您也可以通过下方联系方式向我们索取这份清单。</p>
</div>
<div class="p-4 bg-gray-800 bg-opacity-50 rounded-lg">
<h3 class="font-medium text-yellow-300 mb-2">如何申请退款？</h3>
<p>如您有未消费的会员服务，请通过下方联系方式与我们联系，并提供您的购买凭证，我们将在7个工作日内为您处理退款事宜。</p>
</div>
<div class="p-4 bg-gray-800 bg-opacity-50 rounded-lg">
<h3 class="font-medium text-yellow-300 mb-2">为什么服务被关闭？</h3>
<p>由于业务战略调整和运营成本考虑，我们不得不做出关闭服务的决定。我们对此给您带来的不便深表歉意，并感谢您一直以来的支持。</p>
</div>
</div>
</div>
<footer class="mt-8 text-center text-gray-400 text-sm slide-up" style="animation-delay: 0.6s;">
<div class="flex justify-center space-x-4 mb-4">
<a href="#" class="hover:text-white transition-colors" title="微信">
<i class="fab fa-weixin text-xl"></i>
</a>
<a href="#" class="hover:text-white transition-colors" title="QQ">
<i class="fab fa-qq text-xl"></i>
</a>
<a href="#" class="hover:text-white transition-colors" title="微博">
<i class="fab fa-weibo text-xl"></i>
</a>
<a href="#" class="hover:text-white transition-colors" title="邮箱">
<i class="fas fa-envelope text-xl"></i>
</a>
</div>
<p>© 2026 服务停止通知页面 | 技术支持: <a href="https://www.cjw123.com/t" class="text-blue-400 hover:underline">追求完美</a></p>
</footer>
</div>
<script>
// 粒子效果
function createParticles() {
const container = document.body;
const particleCount = 50;
for (let i = 0; i < particleCount; i++) {
const size = Math.random() * 5 + 1;
const particle = document.createElement('div');
particle.classList.add('particle');
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.opacity = Math.random() * 0.5 + 0.1;
// 随机位置
particle.style.left = `${Math.random() * 100}vw`;
particle.style.top = `${Math.random() * 100}vh`;
// 添加动画
particle.style.animation = `moveParticle ${Math.random() * 60 + 30}s linear infinite`;
// 随机漂浮动画
const keyframes = `
@keyframes moveParticle {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px);
}
50% {
transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px);
}
75% {
transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px);
}
100% {
transform: translate(0, 0);
}
}
`;
const styleSheet = document.createElement('style');
styleSheet.textContent = keyframes;
document.head.appendChild(styleSheet);
container.appendChild(particle);
}
}
// 创建粒子
window.addEventListener('load', () => {
createParticles();
// 添加滑动动画
const elements = document.querySelectorAll('.slide-up');
elements.forEach(element => {
element.style.animationPlayState = 'running';
});
});
</script>
</body>
</html>