一个流行音乐视频单域名展示html - 大佬论坛
大佬论坛

一个流行音乐视频单域名展示html

Hao  (UID: 5666) 鉴漏官 [复制链接]
帖子链接已复制到剪贴板
帖子已经有人评论啦，不支持删除！
820 8

刚才吃饱了没事干雇老奶奶写域名展示页面，逗大家一乐表情

各位皇上啥也别说了，昨天下五子棋把硬币输光了，先用壁纸交易两币，助我重回巅峰表情

html演示地址 山林小驿站 

代码在底部，可自行替换音乐视频文件，原视频直接F12即可获取表情

一个流行音乐视频单域名展示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"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>山林小驿站</title>
<!-- 预加载字体和音视频，提升性能 -->
<!-- <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> -->
<link rel="preload" href="css2.css" as="style">
<link rel="preload" as="video" href="bg.mp4">
<link rel="preload" as="audio" href="ltx.mp3">
<style>
  /* 性能优化：减少重绘重排，统一盒模型 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
  }

  html, body {
    height: 100%;
    overflow: hidden;
  }

  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: "Ma Shan Zheng", "Noto Serif SC", serif;
    position: relative;
    background: #f8f9fa; /* 兜底背景，优化加载体验 */
    /* 关键：body作为全屏容器时，层级高于视频 */
    z-index: 1;
    position: relative;
  }

  /* 视频背景 - 性能优化：硬件加速，懒加载 */
  .video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.8s ease;
    transform: translateZ(0); /* 开启硬件加速 */
  }
  .video-bg.active {
    opacity: 1;
  }
  .video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* 优化视频居中显示 */
  }

  /* 核心修复：全屏状态下保持body可见 */
  :fullscreen body,
  :-webkit-full-screen body,
  :-ms-fullscreen body {
    z-index: 10;
    position: relative;
  }

  :fullscreen .video-bg,
  :-webkit-full-screen .video-bg,
  :-ms-fullscreen .video-bg {
    z-index: -1;
  }

  /* 引导遮罩 - 优雅布局，适配全端 */
  .guide-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px; /* 移动端内边距 */
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* 更丝滑的过渡 */
  }
  .guide-mask.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(1.05);
  }
  

  /* 确认进入按钮 - 优雅样式，全端适配 */
  .enter-btn {
    padding: clamp(12px, 3vw, 15px) clamp(30px, 6vw, 40px);
    background: #4a7c59;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: "Noto Serif SC", serif;
    font-size: clamp(16px, 2.5vw, 18px);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: clamp(15px, 3vw, 20px);
    touch-action: manipulation; /* 优化移动端点击 */
  }
  .enter-btn:hover {
    background: #386042;
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(74, 124, 89, 0.3);
  }
  .enter-btn:active {
    transform: translateY(-1px); /* 点击反馈 */
  }

  /* 遮罩文案 - 响应式适配，更优雅 */
  .mask-tip {
    font-size: clamp(14px, 2vw, 16px);
    color: #4a7c59;
    margin-bottom: clamp(8px, 2vw, 10px);
    font-family: "Noto Serif SC", serif;
    max-width: 90%; /* 移动端换行 */
    line-height: 1.5;
  }
  .mask-title {
    font-size: clamp(1.8rem, 5vw, 3rem);
    color: #4a7c59;
    margin-bottom: clamp(20px, 4vw, 30px);
    font-family: "Ma Shan Zheng", cursive;
    letter-spacing: 0.1em; /* 增加书法字间距，更优雅 */
  }

  /* 主文案 - 优雅布局，分层渐显，全端适配 */
  .content-wrapper {
    padding: 0 20px; /* 移动端左右内边距 */
    max-width: 800px; /* 电脑端最大宽度，避免拉伸 */
    width: 100%;
    /* 关键：确保文案在全屏状态下层级最高 */
    position: relative;
    z-index: 2;
  }

  .title {
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    margin-bottom: clamp(8px, 2vw, 12px);
    color: #4a7c59;
    opacity: 0;
    transition: opacity 0.8s ease 0.3s;
    line-height: 1.2; /* 优化行高，避免文字重叠 */
  }
  .title.active {
    opacity: 1;
  }

  .domain {
    font-family: "Noto Serif SC", serif;
    font-size: clamp(1rem, 3.5vw, 1.8rem);
    margin-bottom: clamp(20px, 3vw, 26px);
    color: #4a7c59;
    opacity: 0;
    transition: opacity 0.8s ease 0.4s;
  }
  .domain.active {
    opacity: 1;
  }

  .slogan {
    font-family: "Noto Serif SC", serif;
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
    margin-bottom: clamp(25px, 3.5vw, 30px);
    color: #4a7c59;
    opacity: 0;
    transition: opacity 0.8s ease 0.5s;
    line-height: 1.6;
  }
  .slogan.active {
    opacity: 1;
  }

  .mail {
    font-family: "Noto Serif SC", serif;
    font-size: clamp(0.85rem, 2.2vw, 1.1rem);
    color: #4a7c59;
    opacity: 0;
    transition: opacity 0.8s ease 0.6s;
  }
  .mail.active {
    opacity: 1;
  }
  .mail a {
    color: #4a7c59;
    text-decoration: none;
    border-bottom: 1px solid #4a7c59;
    padding-bottom: 2px;
    transition: all 0.3s ease;
  }
  .mail a:hover {
    color: #386042;
    border-bottom: 1px solid #386042;
  }

  /* 隐藏不必要元素，优化性能 */
  audio {
    display: none;
  }

  /* 性能优化：减少动画开销 */
  @media (prefers-reduced-motion) {
    * {
      transition: none !important;
    }
  }
</style>
<!-- 引入书法字体：马善政（优化加载） -->
<link href="css2.css" rel="stylesheet">
</head>

<body>
<!-- 引导遮罩 - 覆盖整个页面 -->
<div class="guide-mask" id="guideMask">
  <h2 class="mask-title">山林小驿站</h2>
  <div class="mask-tip">点击下方按钮进入，域名展示页面（可能会有音乐哦）</div>
  <button class="enter-btn" id="enterBtn">确认进入</button>
</div>

<!-- 视频背景 -->
<div class="video-bg" id="videoBg">
  <video id="bg-video" loop muted playsinline preload="metadata"> <!-- 预加载元数据，优化性能 -->
    <source src="bg.mp4" type="video/mp4">
  </video>
</div>


<div class="content-wrapper" style="color: white !important;">
  <h1 class="title" id="title" style="color: white !important;">山林小驿站</h1>
  <div class="domain" id="domain" style="color: white !important;">303333.XYZ</div>
  <div class="slogan" id="slogan" style="color: white !important;">若有归意，不妨一叙</div>
  <div class="mail" id="mail" style="color: white !important;">咨询邮箱：<a href="https://123456.xyz" target="_blank" rel="noopener noreferrer" style="color: white !important;">[email protected]</a></div>
</div>
<!-- 音乐外链 -->
<audio id="bgm" loop preload="metadata"> <!-- 预加载元数据 -->
  <source src="ltx.mp3" type="audio/mpeg">
</audio>

<script>
  // 性能优化：延迟加载非核心逻辑，减少首屏阻塞
  document.addEventListener('DOMContentLoaded', () => {
    // 核心元素获取（缓存DOM节点，减少重复查询）
    const bgm = document.getElementById('bgm');
    const video = document.getElementById('bg-video');
    const enterBtn = document.getElementById('enterBtn');
    const guideMask = document.getElementById('guideMask');
    const videoBg = document.getElementById('videoBg');
    const body = document.body;
    
    // 缓存文字元素，避免重复DOM查询
    const textElements = [
      document.getElementById('title'),
      document.getElementById('domain'),
      document.getElementById('slogan'),
      document.getElementById('mail')
    ];

    // 性能优化：防抖处理，避免重复触发
    let isTriggered = false;
    async function triggerAll() {
      if (isTriggered) return;
      isTriggered = true;

      try {
        // 1. 隐藏引导遮罩
        guideMask.classList.add('hidden');
        
        // 2. 修复全屏逻辑：对body全屏而非视频，确保文案可见
        if (body.requestFullscreen) {
          await body.requestFullscreen();
        } else if (body.webkitRequestFullscreen) {
          await body.webkitRequestFullscreen();
        } else if (body.msRequestFullscreen) {
          await body.msRequestFullscreen();
        }
        
        // 3. 同步播放视频和音乐
        await video.play();
        await bgm.play();
        
        // 4. 显示视频背景和主文案
        videoBg.classList.add('active');
        textElements.forEach(el => el.classList.add('active'));
        
      } catch (e) {
        console.log("全屏/播放异常：", e);
        // 兼容降级：即使全屏失败，仍播放音视频+显示文案
        video.play().catch(() => {});
        bgm.play().catch(() => {});
        videoBg.classList.add('active');
        textElements.forEach(el => el.classList.add('active'));
        // 优化提示：移动端友好
        const isMobile = /Mobile|Android|iOS/.test(navigator.userAgent);
        const tip = isMobile ? "全屏请求被拒绝，已正常播放音视频（可手动全屏）" : "全屏请求被拒绝，已正常播放音视频";
        alert(tip);
      }
    }

    // 绑定按钮点击事件（唯一触发方式）
    enterBtn.addEventListener('click', triggerAll);

    // 页面加载完成确保视频初始暂停
    video.pause();

    // 性能优化：视频加载完成后再加载音频，减少带宽竞争
    video.addEventListener('loadedmetadata', () => {
      bgm.load();
    });

    // 优化：监听全屏退出事件，不重复触发
    document.addEventListener('fullscreenchange', () => {
      if (!document.fullscreenElement) {
        isTriggered = false; // 退出全屏后可重新触发
      }
    });
  });
</script>
</body>
</html>
这家伙太懒了，什么也没留下。
已有评论 ( 8 )
提示：您必须 登录 才能查看此内容。
域名市场
   域名载入中...
创建新帖
自助推广 （点击空位或 这里 添加）
确认删除
确定要删除这篇帖子吗？删除后将无法恢复。
删除成功
帖子已成功删除，页面将自动刷新。
删除失败
删除帖子时发生错误，请稍后再试。