源界面 源界面 8天前

一个跳转链接清新页面样式

html/css

XN7TI-jh

一个跳转链接的页面展示效果。
偶然访问一个网站，发现的这个，清新风格。好看，记录下来了。
源代码如下：

  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <title>即将离开本站</title>
  7.     <meta name="robots" content="noindex, nofollow">
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  14.         body {
  15.             background: #f8f9fa;
  16.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  17.             color: #495057;
  18.             display: flex;
  19.             justify-content: center;
  20.             align-items: center;
  21.             height: 100vh;
  22.         }
  24.         .container {
  25.             background: #ffffff;
  26.             padding: 30px;
  27.             border-radius: 8px;
  28.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  29.             max-width: 500px;
  30.             width: 100%;
  31.             text-align: center;
  32.         }
  34.         .title {
  35.             font-size: 24px;
  36.             font-weight: 600;
  37.             color: #007bff;
  38.             margin-bottom: 15px;
  39.         }
  41.         .message {
  42.             font-size: 16px;
  43.             margin-bottom: 20px;
  44.             line-height: 1.6;
  45.             color: #6c757d;
  46.         }
  48.         .url {
  49.             font-size: 18px;
  50.             color: #007bff;
  51.             word-wrap: break-word;
  52.             margin-bottom: 25px;
  53.             display: flex;
  54.             justify-content: center;
  55.             align-items: center;
  56.         }
  58.         .url img {
  59.             margin-right: 10px;
  60.             width: 20px;
  61.             height: 20px;
  62.         }
  64.         .button {
  65.             background-color: #007bff;
  66.             color: white;
  67.             border: none;
  68.             padding: 12px 25px;
  69.             font-size: 16px;
  70.             border-radius: 30px;
  71.             cursor: pointer;
  72.             transition: background-color 0.3s;
  73.         }
  75.         .button:hover {
  76.             background-color: #0056b3;
  77.         }
  79.         .footer {
  80.             margin-top: 20px;
  81.             font-size: 14px;
  82.             color: #adb5bd;
  83.         }
  85.         .footer a {
  86.             color: #007bff;
  87.             text-decoration: none;
  88.         }
  90.         .footer a:hover {
  91.             text-decoration: underline;
  92.         }
  93.     </style>
  94. </head>
  95. <body>
  96.     <div class="container">
  97.            <img class="loading-img" src="https://wx2.vv1234.cn/sh-os1/2025/08/6abf205c2fa385fa3a91c7ef31eec8e6.png" alt="!">
  98.         <div class="title">即将离开本站</div>
  99.         <div class="message">
  100.        您即将离开本站，请注意您的帐号和财产安全。
  101.         </div>
  102.         <div class="url">
  103.             <!-- 只显示域名的 favicon，保持协议和端口 -->
  104.             <img src="https://favicon.cccyun.cc/https%3A%2F%2Fconsole.upyun.com" alt="网站图标">
  105.             <strong>https://console.upyun.com/register/?invite=HyNLthSEM</strong>
  106.         </div>
  107.         <a href="https://console.upyun.com/register/?invite=HyNLthSEM" >
  108.             <button class="button">继续访问</button>
  109.         </a>
  110.         <div class="footer">
  111.             <p>如果您没有操作，链接将在 5 秒后自动跳转。</p>
  112.         </div>
  113.     </div>
  114. </body>
  115. </html>

演示地址：