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

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

实现方式：用 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>

二次改版

1️⃣ 按钮呼吸发光动画（科技感）
2️⃣ 按钮滑入进入动画（右侧滑入）
3️⃣ 视频结束或点击 Skip 时淡出过渡，而不是瞬间消失

<!-- 引入图标（Font Awesome CDN） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" 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;
  opacity:1;
  transition: opacity 0.8s ease;
">
  <video id="introVideo" autoplay playsinline style="width: 100%; height: 100%; object-fit: cover;">
  </video>

  <!-- 按钮区域 -->
  <div id="btnContainer" style="
    position: absolute;
    top: 20px;
    right: -200px;
    z-index: 100000;
    display: flex;
    gap: 12px;
    opacity: 0;
  ">

    <button id="muteToggle" class="tech-btn">
      <i id="muteIcon" class="fas fa-volume-up"></i>
      Mute
    </button>

    <button id="skipBtn" class="tech-btn">
      <i class="fas fa-forward"></i>
      Skip
    </button>

  </div>
</div>

<style>

/* 按钮基础样式 */
.tech-btn{
  padding:10px 20px;
  background:linear-gradient(45deg,#4facfe,#00f2fe);
  color:#fff;
  border:none;
  border-radius:30px;
  font-weight:bold;
  font-size:15px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:all .3s ease;
  box-shadow:0 0 10px rgba(0,150,255,0.6);
  animation:glow 2.5s infinite ease-in-out;
}

/* hover效果 */
.tech-btn:hover{
  transform:scale(1.06);
}

/* 呼吸发光动画 */
@keyframes glow{
  0%{
    box-shadow:0 0 8px rgba(0,150,255,0.4);
  }
  50%{
    box-shadow:
      0 0 14px rgba(0,150,255,0.8),
      0 0 24px rgba(0,200,255,0.6);
  }
  100%{
    box-shadow:0 0 8px rgba(0,150,255,0.4);
  }
}

/* 按钮滑入动画 */
.slide-in{
  animation:slideIn 0.8s ease forwards;
}

@keyframes slideIn{
  from{
    right:-200px;
    opacity:0;
  }
  to{
    right:20px;
    opacity:1;
  }
}

</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 btnContainer=document.getElementById("btnContainer");
const skipBtn=document.getElementById("skipBtn");

/* 设备判断 */
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';
  });
}

/* 按钮滑入 */
setTimeout(()=>{
  btnContainer.classList.add("slide-in");
},400);

/* 视频结束淡出 */
video.onended=()=>{
  fadeOutSplash();
};

/* Skip按钮 */
skipBtn.onclick=()=>{
  fadeOutSplash();
};

/* 淡出函数 */
function fadeOutSplash(){

  splash.style.opacity="0";

  setTimeout(()=>{
    splash.style.display="none";
  },800);

}

/* 静音按钮 */
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>