![图片[1]-好看的网站停止服务单页源码-胖大海博客资源网](https://pdha.top/wp-content/uploads/pdha.top/2025/05/1748099012500.png)
HTML源码
<!DOCTYPE html><html lang="zh-CN"><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 class="text-center"><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 class="service-status-badge"><span class="status-pulse"></span>服务已永久关闭</div><div class="service-icon"><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">2025年05月06日</span> 永久停止运营。</p><p class="text-gray-300">请注意，所有账户数据将按照我们的数据处理规定进行安全处理。如您需要导出个人数据，请在 <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 class="timeline-item"><div class="timeline-dot"></div><div class="font-medium text-purple-300">2025-04-01</div><div class="text-gray-300">服务关闭预告公告</div></div><div class="timeline-item"><div class="timeline-dot"></div><div class="font-medium text-purple-300">2025-05-06</div><div class="text-gray-300">服务完全停止</div></div><div class="timeline-item"><div class="timeline-dot"></div><div class="font-medium text-purple-300">2025-06-06</div><div class="text-gray-300">用户数据删除</div></div></div><div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto"><div class="service-feature"><div class="feature-icon"><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 class="service-feature"><div class="feature-icon"><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 class="service-feature"><div class="feature-icon"><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 class="service-feature"><div class="feature-icon"><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 class="space-y-4"><div class="p-4 bg-gray-800 bg-opacity-50 rounded-lg"><h3 class="font-medium text-yellow-300 mb-2">我的数据会怎么处理？</h3><p class="text-gray-300">所有用户数据将根据隐私政策进行安全处理，您可以联系我们申请导出个人数据。请注意，所有数据将在服务停止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 class="text-gray-300">是的，我们已经准备了相关替代服务推荐清单，将通过邮件发送给已注册用户。您也可以通过下方联系方式向我们索取这份清单。</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 class="text-gray-300">如您有未消费的会员服务，请通过下方联系方式与我们联系，并提供您的购买凭证，我们将在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 class="text-gray-300">由于业务战略调整和运营成本考虑，我们不得不做出关闭服务的决定。我们对此给您带来的不便深表歉意，并感谢您一直以来的支持。</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>© 2025 服务停止通知页面 | 技术支持: <a href="#" 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><!DOCTYPE html> <html lang="zh-CN"> <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 class="text-center"> <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 class="service-status-badge"> <span class="status-pulse"></span> 服务已永久关闭 </div> <div class="service-icon"> <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">2025年05月06日</span> 永久停止运营。 </p> <p class="text-gray-300"> 请注意，所有账户数据将按照我们的数据处理规定进行安全处理。如您需要导出个人数据，请在 <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 class="timeline-item"> <div class="timeline-dot"></div> <div class="font-medium text-purple-300">2025-04-01</div> <div class="text-gray-300">服务关闭预告公告</div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="font-medium text-purple-300">2025-05-06</div> <div class="text-gray-300">服务完全停止</div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="font-medium text-purple-300">2025-06-06</div> <div class="text-gray-300">用户数据删除</div> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto"> <div class="service-feature"> <div class="feature-icon"> <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 class="service-feature"> <div class="feature-icon"> <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 class="service-feature"> <div class="feature-icon"> <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 class="service-feature"> <div class="feature-icon"> <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 class="space-y-4"> <div class="p-4 bg-gray-800 bg-opacity-50 rounded-lg"> <h3 class="font-medium text-yellow-300 mb-2">我的数据会怎么处理？</h3> <p class="text-gray-300">所有用户数据将根据隐私政策进行安全处理，您可以联系我们申请导出个人数据。请注意，所有数据将在服务停止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 class="text-gray-300">是的，我们已经准备了相关替代服务推荐清单，将通过邮件发送给已注册用户。您也可以通过下方联系方式向我们索取这份清单。</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 class="text-gray-300">如您有未消费的会员服务，请通过下方联系方式与我们联系，并提供您的购买凭证，我们将在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 class="text-gray-300">由于业务战略调整和运营成本考虑，我们不得不做出关闭服务的决定。我们对此给您带来的不便深表歉意，并感谢您一直以来的支持。</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>© 2025 服务停止通知页面 | 技术支持: <a href="#" 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><!DOCTYPE html> <html lang="zh-CN"> <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 class="text-center"> <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 class="service-status-badge"> <span class="status-pulse"></span> 服务已永久关闭 </div> <div class="service-icon"> <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">2025年05月06日</span> 永久停止运营。 </p> <p class="text-gray-300"> 请注意，所有账户数据将按照我们的数据处理规定进行安全处理。如您需要导出个人数据，请在 <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 class="timeline-item"> <div class="timeline-dot"></div> <div class="font-medium text-purple-300">2025-04-01</div> <div class="text-gray-300">服务关闭预告公告</div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="font-medium text-purple-300">2025-05-06</div> <div class="text-gray-300">服务完全停止</div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="font-medium text-purple-300">2025-06-06</div> <div class="text-gray-300">用户数据删除</div> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto"> <div class="service-feature"> <div class="feature-icon"> <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 class="service-feature"> <div class="feature-icon"> <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 class="service-feature"> <div class="feature-icon"> <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 class="service-feature"> <div class="feature-icon"> <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 class="space-y-4"> <div class="p-4 bg-gray-800 bg-opacity-50 rounded-lg"> <h3 class="font-medium text-yellow-300 mb-2">我的数据会怎么处理？</h3> <p class="text-gray-300">所有用户数据将根据隐私政策进行安全处理，您可以联系我们申请导出个人数据。请注意，所有数据将在服务停止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 class="text-gray-300">是的，我们已经准备了相关替代服务推荐清单，将通过邮件发送给已注册用户。您也可以通过下方联系方式向我们索取这份清单。</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 class="text-gray-300">如您有未消费的会员服务，请通过下方联系方式与我们联系，并提供您的购买凭证，我们将在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 class="text-gray-300">由于业务战略调整和运营成本考虑，我们不得不做出关闭服务的决定。我们对此给您带来的不便深表歉意，并感谢您一直以来的支持。</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>© 2025 服务停止通知页面 | 技术支持: <a href="#" 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>
感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
THE END
暂无评论内容