zhan.im域名停靠展示页代码|不死鸟资源网

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>zhan.im 域名出售页</title>
  <style>
    /* 整体页面样式，设置渐变背景并添加动画使其动起来 */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      background: linear-gradient(45deg, #ffe4e1, #98fb98);
      background-size: 400% 400%;
      animation: gradientAnimation 15s ease infinite;
    }

    /* 定义关键帧动画 gradientAnimation */
    @keyframes gradientAnimation {
      0% {
        background: linear-gradient(to right, #FFE6E6, #D6E6F2, #E8E8E8);
      }
      25% {
        background: linear-gradient(to right, #D6E6F2, #E8E8E8, #FFE6E6);
      }
      50% {
        background: linear-gradient(to right, #E8E8E8, #FFE6E6, #D6E6F2);
      }
      75% {
        background: linear-gradient(to right, #D6E6F2, #FFE6E6, #E8E8E8);
      }
      100% {
        background: linear-gradient(to right, #FFE6E6, #D6E6F2, #E8E8E8);
      }
    }

    /* 主要内容容器，将背景改为透明，增加最细虚线边框并设置跑马灯效果 */
    #main-container {
      width: 600px;
      background-color: transparent;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      padding: 20px;
      border-radius: 10px;
      border: 1px dashed #D6E6F2;
      /* 增加最细的虚线边框，颜色选取渐变色中的一种颜色示例 */
      overflow: hidden;
      /* 隐藏超出容器的内容 */
      animation: marquee 5s ease-in-out infinite alternate;
      /* 设置跑马灯动画，时长5秒，缓动进出，无限循环并交替方向 */
    }

    /* 跑马灯效果关键帧动画，让容器左右小范围跑动 */
    @keyframes marquee {
      0% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(-20%);
        /* 向左移动容器宽度的20% */
      }
      100% {
        transform: translateX(0);
      }
    }

    /* logo 样式，增强发光效果并添加动画 */
  .logo {
      width: 280px;
      height: auto;
      display: block;
      margin: 0 auto 10px;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
      animation: glow 5s ease-in-out infinite alternate;
      transition: transform 0.5s ease;
      /* 添加过渡效果，控制旋转时的过渡时间和缓动方式 */
    }

    /* 添加鼠标悬停时旋转的效果 */
  .logo:hover {
      transform: rotate(360deg);
      /* 鼠标悬停时应用旋转动画，旋转一圈（360度） */
    }

    @keyframes glow {
      from {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
      }
      to {
        box-shadow: 0 0 120px rgba(255, 255, 255, 1);
      }
    }

    /* logo 包裹容器样式 */
  .logo-wrapper {
      width: 320px;
      height: 320px;
      border-radius: 50%;
      display: block;
      margin: 0 auto 10px;
    }

    /* 定义旋转动画关键帧 */
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    /* 标题样式，为中文单独设置艺术字体 */
    h1 {
      text-align: center;
      color: #333;
      font-size: 28px;
      margin-bottom: 15px;
      font-family: 'YouYuan', Arial, sans-serif;
    }

    /* 段落样式，为中文单独设置艺术字体 */
    p {
      text-align: center;
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 10px;
      font-family: 'YouYuan', Arial, sans-serif;
    }

    /* 站名列表样式，为中文单独设置艺术字体并加粗、居中 */
  .station-list {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-top: 40px;
    }

  .station-list p {
      width: 120px;
      background-color: #f9f9f9;
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 15px;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
      position: relative;
      font-family: 'YouYuan', Arial, sans-serif;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    /* 让站名中的中文和英文都能在各自区域内水平居中 */
  .station-list p span {
      display: inline-block;
      text-align: center;
      width: 350px;
    }

    /* 鼠标悬停变色效果，只针对中文，确保中文字体样式 */
  .station-list p span {
      display: inline-block;
      transition: color 0.3s ease;
      font-family: 'YouYuan', Arial, sans-serif;
    }

    /* 链接样式 */
    a {
      text-decoration: none;
      color: #007BFF;
      transition: color 0.3s ease;
      font-family: Arial, sans-serif;
    }

    a:hover {
      color: #0056b3;
    }

    /* 弹出层样式，模拟问答形状（简单示意，可按需进一步优化） */
  .popup {
      display: none;
      position: absolute;
      top: -150px;
      left: 50%;
      transform: translateX(-50%);
      width: 180px;
      padding: 15px;
      background-color: white;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      border-radius: 10px 10px 0 0;
      z-index: 10;
    }

  .popup p {
      margin: 0;
      text-align: left;
      font-family: Arial, sans-serif;
    }
  .link-container {
      display: flex;
      justify-content: center; /* 让内部元素在主轴（水平方向，默认情况）上居中 */
      align-items: center; /* 让内部元素在交叉轴（垂直方向）上居中 */
    }
  </style>
</head>

<body>
  <div id="main-container">
    <div class="logo-wrapper">
      <img src="https://zhan.im/logo.svg" alt="zhan.im logo" class="logo">
    </div>
    <p style="margin-top: -20px;">在数字的星河中，zhan.im 宛如一颗璀璨的启明星</p>
    <p>引领着知识与创意的航船，穿越信息的浩瀚海洋，驶向无尽的智慧彼岸</p>
    <div class="station-list">
      <p><span> 站.im  </span></p>
    </div>
 </div>
</body>
</html>
演示：https://zhan.im
本站资源均为作者提供和网友推荐收集整理而来，仅供学习和研究使用，请在下载后24小时内删除，谢谢合作!