空痕博客

邮箱验证码html模板

KongHen02
KongHen02
4天前发布 /正在检测是否收录...
0 5 0

适配大屏和小屏

问题：fa图标在邮件中不显示，请自行替换成图片

演示图片

大屏演示

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户注册 - Xcode验证码</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* 基础样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #e4edfb 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px;
      letter-spacing: 0.5px;
    }

    /* 亮色毛玻璃效果容器 */
    .glass-container {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.8);
      box-shadow: 0 12px 40px rgba(98, 131, 252, 0.15), 
                  0 4px 20px rgba(98, 131, 252, 0.08);
      width: 100%;
      max-width: 780px;
      overflow: hidden;
      padding: 50px 40px;
      position: relative;
      transition: all 0.4s ease;
    }

    .glass-container:hover {
      box-shadow: 0 15px 50px rgba(98, 131, 252, 0.2), 
                  0 6px 25px rgba(98, 131, 252, 0.12);
      transform: translateY(-5px);
    }

    /* 装饰元素 */
    .decoration {
      position: absolute;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(67, 203, 255, 0.15) 0%, rgba(151, 8, 204, 0.1) 100%);
      z-index: -1;
      opacity: 0.7;
    }

    .decoration-1 {
      width: 180px;
      height: 180px;
      top: -60px;
      left: -60px;
      animation: float 8s infinite ease-in-out;
    }

    .decoration-2 {
      width: 120px;
      height: 120px;
      bottom: 30px;
      right: 30px;
      animation: float 10s infinite ease-in-out;
      animation-delay: 1s;
    }

    .decoration-3 {
      width: 90px;
      height: 90px;
      top: 30%;
      right: -30px;
      animation: float 12s infinite ease-in-out;
      animation-delay: 2s;
    }

    @keyframes float {
      0%, 100% { transform: translate(0, 0); }
      25% { transform: translate(-10px, 15px); }
      50% { transform: translate(5px, -10px); }
      75% { transform: translate(10px, 5px); }
    }

    /* 头部样式 */
    .header {
      text-align: center;
      margin-bottom: 40px;
      position: relative;
    }

    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 25px;
    }

    .logo-icon {
      width: 65px;
      height: 65px;
      background: linear-gradient(135deg, #43CBFF 0%, #9708CC 100%);
      border-radius: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 18px;
      box-shadow: 0 8px 20px rgba(151, 8, 204, 0.25);
      transition: all 0.3s ease;
    }

    .logo-icon:hover {
      transform: rotate(10deg) scale(1.05);
    }

    .logo-icon img {
      margin: 20%;
      width: 60%;
      height: 60%;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }

    .logo-text {
      font-size: 32px;
      font-weight: 700;
      background: linear-gradient(135deg, #2c3e50 0%, #4a6491 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      letter-spacing: 1.2px;
    }

    .title {
      font-size: 28px;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 30px;
      position: relative;
      display: inline-block;
    }

    .title::after {
      content: "";
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background: linear-gradient(135deg, #43CBFF 0%, #9708CC 100%);
      border-radius: 2px;
    }

    .subtitle {
      font-size: 18px;
      color: #5a6a85;
      line-height: 1.7;
      margin: 0 auto;
      /* max-width: 600px; */
      padding: 0 20px;
    }

    /* 验证码区域 - 亮色系突出 */
    .verification-section {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      padding: 40px 30px;
      margin: 40px 0;
      text-align: center;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 10px 30px rgba(98, 131, 252, 0.1), 
                  inset 0 0 15px rgba(151, 8, 204, 0.05);
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .verification-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(135deg, #43CBFF 0%, #9708CC 100%);
    }

    .verification-section:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(98, 131, 252, 0.15), 
                  inset 0 0 20px rgba(151, 8, 204, 0.08);
    }

    .verification-label {
      font-size: 18px;
      color: #5a6a85;
      margin-bottom: 20px;
      font-weight: 500;
    }

    .verification-code {
      width: 100%;
      font-size: 56px;
      font-weight: 800;
      letter-spacing: 10px;
      background: linear-gradient(135deg, #2c3e50 0%, #4a6491 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      padding: 20px 40px;
      border-radius: 16px;
      margin: 20px 0;
      display: inline-block;
      box-shadow: inset 0 0 25px rgba(98, 131, 252, 0.1), 
                  0 8px 20px rgba(98, 131, 252, 0.1);
      border: 1px solid rgba(98, 131, 252, 0.15);
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }

    .verification-code:hover {
      letter-spacing: 12px;
      box-shadow: inset 0 0 30px rgba(98, 131, 252, 0.15), 
                  0 10px 25px rgba(98, 131, 252, 0.15);
    }

    .expiration {
      font-size: 16px;
      color: #7a8ca5;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .expiration i {
      color: #ff6b6b;
    }

    /* 操作区域 */
    .action-section {
      text-align: center;
      margin-top: 50px;
    }

    .action-button {
      background: linear-gradient(135deg, #43CBFF 0%, #9708CC 100%);
      color: white;
      border: none;
      padding: 18px 50px;
      font-size: 20px;
      font-weight: 600;
      border-radius: 60px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 8px 25px rgba(151, 8, 204, 0.3);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      position: relative;
      overflow: hidden;
    }

    .action-button::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: 0.5s;
    }

    .action-button:hover::before {
      left: 100%;
    }

    .action-button:hover {
      transform: translateY(-5px) scale(1.05);
      box-shadow: 0 12px 35px rgba(151, 8, 204, 0.4);
    }

    .action-button:active {
      transform: translateY(0) scale(0.98);
    }

    .copyright-link {
      color: #7a8ca5;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .copyright-link:hover {
      color: #9708CC;
      text-decoration: underline;
    }

    /* 底部信息 */
    .footer {
      text-align: center;
      margin-top: 50px;
      color: #7a8ca5;
      font-size: 15px;
      line-height: 1.7;
    }

    .footer p {
      margin-bottom: 8px;
    }

    .social-icons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 25px;
    }

    .social-icons a {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: rgba(98, 131, 252, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #5a6a85;
      font-size: 18px;
      transition: all 0.3s ease;
    }

    .social-icons a:hover {
      background: linear-gradient(135deg, #43CBFF 0%, #9708CC 100%);
      color: white;
      transform: translateY(-5px);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .glass-container {
        padding: 40px 30px;
        max-width: 100%;
      }

      .logo-icon {
        width: 55px;
        height: 55px;
      }

      .logo-text {
        font-size: 28px;
      }

      .title {
        font-size: 24px;
      }

      .subtitle {
        font-size: 16px;
      }

      .verification-section {
        padding: 30px 20px;
      }

      .verification-code {
        font-size: 42px;
        padding: 15px 30px;
        letter-spacing: 8px;
      }

      .action-button {
        padding: 16px 40px;
        font-size: 18px;
      }
    }

    @media (max-width: 480px) {
      .glass-container {
        padding: 30px 20px;
      }

      .logo {
        flex-direction: column;
        gap: 15px;
      }

      .logo-icon {
        margin-right: 0;
      }

      .logo-text {
        font-size: 26px;
      }

      .title {
        font-size: 22px;
      }

      .verification-section {
        padding: 25px 15px;
      }

      .verification-code {
        font-size: 36px;
        padding: 12px 20px;
        letter-spacing: 6px;
      }

      .action-button {
        padding: 14px 35px;
        font-size: 16px;
      }
    }
  </style>
</head>

<body>
  <div class="glass-container">
    <!-- 装饰元素 -->
    <div class="decoration decoration-1"></div>
    <div class="decoration decoration-2"></div>
    <div class="decoration decoration-3"></div>

    <div class="header">
      <div class="logo">
        <div class="logo-icon">
          <img src="http://xma.dev.khkj.xyz/static/images/logo.png" alt="Xcode Logo">
        </div>
        <div class="logo-text">Xcode - X码</div>
      </div>
      <h1 class="title">用户注册验证码</h1>
      <p class="subtitle">感谢您注册Xcode平台！请使用以下验证码完成账户验证，验证码将在 <text style="color:red;">6</text> 分钟后失效。</p>
    </div>

    <div class="verification-section">
      <div class="verification-label">您的验证码</div>
      <div class="verification-code">843721</div>
      <div class="expiration">
        <i class="fas fa-clock"></i>有效期至: 2025年6月27日 15:30
      </div>
    </div>

    <div class="action-section">
      <a href="https://xma.run" class="action-button">
        <i class="fas fa-arrow-right"></i>前往 X码 平台
      </a>
    </div>

    <div class="footer">
      <p>此邮件由系统自动发送，请勿直接回复</p>
      <p>如果您未进行此操作，请忽略此邮件</p>
      <p>© 2025 <a href="https://xma.run" class="copyright-link">Xcode - X码</a> 版权所有</p>
      
      <div class="social-icons">
        <a href="#"><i class="fab fa-weixin"></i></a>
        <a href="#"><i class="fab fa-qq"></i></a>
        <a href="#"><i class="fab fa-weibo"></i></a>
        <a href="#"><i class="fab fa-github"></i></a>
      </div>
    </div>
  </div>

  <script>
    // 添加简单的交互效果
    document.addEventListener('DOMContentLoaded', function() {
      const verificationCode = document.querySelector('.verification-code');
      
      // 添加点击复制功能
      verificationCode.addEventListener('click', function() {
        const text = this.innerText;
        const tempInput = document.createElement('input');
        tempInput.value = text;
        document.body.appendChild(tempInput);
        tempInput.select();
        document.execCommand('copy');
        document.body.removeChild(tempInput);
        alert("复制成功");
      });
    });
  </script>
</body>
</html>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
其他
# 模板# 邮箱
喜欢就支持一下吧
点赞 0 分享 收藏
本站用户发帖仅代表本站用户个人观点，并不代表本站赞同其观点和对其真实性负责。
本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
本站资源大多存储在云盘，如发现链接失效，请及时与站长联系，我们会第一时间更新。
转载本网站任何内容，请按照转载方式正确书写本站原文地址。
版权属于：KongHen02
本文链接：http://khkj6.com/archives/email-html.html
作品采用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
评论 抢沙发
取消
易航博客