如何在网站里面展示开屏特效特效

最近木木做单子在做特效
顺便出个教程吧

实现方式：用 JavaScript 判断设备类型，动态切换视频源

✅ 效果确认：
✅ 每次访问首页，自动播放视频

✅ 视频播放完后自动淡出（隐藏）

✅ 页面不会跳转，不会闪屏

✅ 不使用 Cookie，确保“每次”都播放

✅ 移动端兼容（使用 playsinline + muted）

✅ 功能升级版按钮（黄绿色 + 图标 + 加载动效）
🔧 效果：
按钮始终黄绿色

带图标（音量 / 静音，跳过箭头）

进入页面时有淡入加载动效

Hover 有缩放发光效果

<!-- 引入图标（Font Awesome CDN） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-a2P6wh2YxY2OWD5lIGwK+jrfipFl9rVmq+kfrjKyT+FTclvLb4fFy+iGLjvWY4zRcPVnT05OytQ1eFAZbs5U9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Splash Video Container -->
<div id="splash-video" style="
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: black;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-direction: column;
">
  <video id="introVideo" autoplay playsinline style="width: 100%; height: 100%; object-fit: cover;">
    <!-- 视频源由 JS 控制 -->
  </video>

  <!-- 按钮区域 -->
  <div style="
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100000;
    display: flex;
    gap: 12px;
    opacity: 0;
    animation: fadeIn 1s ease-in-out 0.3s forwards;
  ">
    <button id="muteToggle" style="
      padding: 10px 20px;
      background: linear-gradient(45deg, #c3f500, #a2f100);
      background-color: #bfff00;
      color: #000;
      border: none;
      border-radius: 30px;
      font-weight: bold;
      font-size: 15px;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(195, 245, 0, 0.5);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    ">
      <i id="muteIcon" class="fas fa-volume-up"></i>
      Mute
    </button>

    <button onclick="document.getElementById('splash-video').style.display='none'" style="
      padding: 10px 20px;
      background: linear-gradient(45deg, #c3f500, #a2f100);
      background-color: #bfff00;
      color: #000;
      border: none;
      border-radius: 30px;
      font-weight: bold;
      font-size: 15px;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(195, 245, 0, 0.5);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    ">
      <i class="fas fa-forward"></i>
      Skip
    </button>
  </div>
</div>

<!-- 加载动画 CSS -->
<style>
  @keyframes fadeIn {
    to { opacity: 1; }
  }
  button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(195, 245, 0, 0.6);
  }
</style>

<!-- 视频控制脚本 -->
<script>
  window.addEventListener("DOMContentLoaded", function () {
    const video = document.getElementById("introVideo");
    const muteBtn = document.getElementById("muteToggle");
    const muteIcon = document.getElementById("muteIcon");
    const splash = document.getElementById("splash-video");

    // 设备判断
    const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
    const desktopVideo = "PC视频";
    const mobileVideo = "移动端视频";

    const source = document.createElement("source");
    source.src = isMobile ? mobileVideo : desktopVideo;
    source.type = "video/mp4";
    video.appendChild(source);

    video.muted = false;

    const playPromise = video.play();
    if (playPromise !== undefined) {
      playPromise.catch(() => {
        video.muted = true;
        video.play();
        muteBtn.innerHTML = '<i id="muteIcon" class="fas fa-volume-mute"></i> Unmute';
      });
    }

    video.onended = () => {
      splash.style.display = "none";
    };

    muteBtn.addEventListener("click", function () {
      video.muted = !video.muted;
      muteBtn.innerHTML = video.muted
        ? '<i id="muteIcon" class="fas fa-volume-mute"></i> Unmute'
        : '<i id="muteIcon" class="fas fa-volume-up"></i> Mute';
      if (video.paused) video.play();
    });
  });
</script>