<!DOCTYPE html>
<html data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图演示 - 带发光效果</title>
<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* 全局样式 */
html {
height: 100vh;
}
body,
body.bg-dark {
--bg-color: rgb(23 24 25);
background: repeating-linear-gradient(
-25deg,
#0000 0 4px,
#0000000f 4px 5px,
#0000 5px 10px
),
var(--bg-color) !important;
font-family: "Fira Sans", sans-serif;
}
/* 标题字体设置 */
h1, h2, h3, h4, h5, h6 {
font-family: "Barlow Semi Condensed", sans-serif;
font-weight: 600;
}
/* 轮播图控制按钮图标颜色修复 */
[data-bs-theme="dark"] .carousel .carousel-control-next-icon,
[data-bs-theme="dark"] .carousel .carousel-control-prev-icon,
[data-bs-theme="dark"].carousel .carousel-control-next-icon,
[data-bs-theme="dark"].carousel .carousel-control-prev-icon {
filter: unset !important;
}
/* 轮播图文字阴影效果 */
.carousel p, .carousel h1, .carousel h2, .carousel h3, .carousel h4, .carousel h5, .carousel h6 {
text-shadow: 0 0.075em 0.15em rgb(0 0 0 / 20%),
0 0.125em 0.2em rgb(0 0 0 / 15%), 0 0.2em 0.4em rgb(0 0 0 / 5%),
0 0.2em 1em rgb(0 0 0 / 5%);
}
/* 轮播图控制按钮样式 */
.carousel button.carousel-control-next,
.carousel button.carousel-control-prev {
mix-blend-mode: luminosity;
transition: all 250ms ease-out !important;
z-index: 10; /* 确保按钮在最上层 */
width: 8%; /* 适当增加点击区域 */
opacity: 0.8; /* 默认透明度 */
}
.carousel button.carousel-control-next:active,
.carousel button.carousel-control-prev:active {
transition: all 100ms ease-out !important;
}
/* 下一张按钮悬停效果 */
.carousel button.carousel-control-next {
padding-left: 3%;
}
.carousel button.carousel-control-next:hover {
padding-left: 2.5%;
opacity: 1;
box-shadow: inset -4px 0 2px -3px #ffffff2b,
inset -20px 0 10px -14px #ffffff77, inset -8px 0 0px -0px #000000cc,
inset -13px 0px 2px -3px #ffffff14, inset -60px 0 60px -60px #ffffffbf,
inset -10vmin 0 15vmin -20vmin #ffffffbb,
inset -25vmin 0 15vmin -35vmin #dededeee;
}
.carousel button.carousel-control-next:active {
padding-left: 4%;
box-shadow: inset -3px 0 2px -3px #ffffff2b,
inset -20px 0 10px -20px #dedede66, inset -0px 0 0px -0px #000000ff,
inset -4px 0px 2px -3px #ffffff14, inset -60px 0 60px -60px #ffffff55,
inset -11vmin 0 18vmin -22vmin #dedede44,
inset -26vmin 0 18vmin -32vmin #dedede55;
}
/* 上一张按钮悬停效果 */
.carousel button.carousel-control-prev {
padding-right: 3%;
}
.carousel button.carousel-control-prev:hover {
padding-right: 2.5%;
opacity: 1;
box-shadow: inset 4px 0 2px -3px #ffffff2b, inset 20px 0 10px -14px #ffffff77,
inset 8px 0 0px -0px #000000cc, inset 13px 0px 2px -3px #ffffff14,
inset 60px 0 60px -60px #ffffffbf, inset 10vmin 0 15vmin -20vmin #ffffffbb,
inset 25vmin 0 15vmin -35vmin #dededeee;
}
.carousel button.carousel-control-prev:active {
padding-right: 4%;
box-shadow: inset 3px 0 2px -3px #ffffff2b, inset 20px 0 10px -20px #dedede66,
inset 0px 0 0px -0px #000000ff, inset 4px 0px 2px -3px #ffffff14,
inset 60px 0 60px -60px #ffffff55, inset 11vmin 0 18vmin -22vmin #dedede44,
inset 26vmin 0 18vmin -32vmin #dedede55;
}
/* 轮播图标题暗化效果 */
.carousel-caption.darken {
position: relative;
}
.carousel-caption.darken * {
z-index: 1 !important;
}
.carousel-caption.darken:before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(#0000 70%, #00000066 85%, #000000aa);
}
/* 模糊发光效果层 */
.blur-aura {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
.blur-aura:after {
content: "";
position: absolute;
opacity: 0.5;
backdrop-filter: saturate(160%) blur(8rem);
filter: saturate(175%);
--radius: var(--bs-border-radius-xl) !important;
--border: min(14rem, 40vmin);
--feather: min(7rem, 10vmin);
--offsetX: 0rem;
--offsetY: 1rem;
--inset: calc(var(--border) * -1);
--feather-clamp: min(var(--feather), var(--border));
inset: calc(var(--inset) + var(--offsetY) * 1)
calc(var(--inset) + var(--offsetX) * -1)
calc(var(--inset) + var(--offsetY) * -1)
calc(var(--inset) + var(--offsetX) * 1);
padding: calc(var(--border) - var(--offsetY))
calc(var(--border) + var(--offsetX)) calc(var(--border) + var(--offsetY))
calc(var(--border) - var(--offsetX));
--mask: linear-gradient(#000 0, #000 100%) exclude,
radial-gradient(
var(--radius) at var(--radius) var(--radius),
#000 99.5%,
#fff0 100%
)
0 0 / calc(var(--radius) * 2) calc(var(--radius) * 2) space content-box
fill-box,
linear-gradient(
90deg,
#fff0 var(--radius),
#000 0 calc(100% - var(--radius)),
#fff0 0
)
0 50% / 100% 100% no-repeat content-box,
linear-gradient(
#fff0 var(--radius),
#000 0 calc(100% - var(--radius)),
#fff0 0
)
50% 0 / 100% 100% no-repeat content-box,
linear-gradient(#000 0, #000 100%) exclude,
linear-gradient(
90deg,
#0000 0,
#000 var(--feather-clamp) calc(100% - var(--feather-clamp)),
#0000 100%
)
0 50% /100% calc(
100% - (var(--feather-clamp) * 2) - (var(--feather-clamp) * 2)
) repeat-x,
linear-gradient(
#0000,
#000 var(--feather-clamp) calc(100% - var(--feather-clamp)),
#0000 100%
)
50% 0 / calc(100% - (var(--feather-clamp) * 2) - (var(--feather-clamp) * 2))
100% repeat-y,
radial-gradient(
calc(var(--feather-clamp) * 2) at calc(var(--feather-clamp) * 2)
calc(var(--feather-clamp) * 2),
#000 50%,
#0000 100%
)
0px 0px / calc(var(--feather-clamp) * 4) calc(var(--feather-clamp) * 4)
space padding-box intersect,
linear-gradient(90deg, #000 calc(var(--feather-clamp) * 4), #0000 0)
calc(var(--feather-clamp) * -2) 50% / 100%
calc(100% - (var(--feather-clamp) * 4)) repeat-x exclude,
linear-gradient(#000 calc(var(--feather-clamp) * 4), #0000 0) 50%
calc(var(--feather-clamp) * -2) / calc(100% - (var(--feather-clamp) * 4))
100% repeat-y exclude,
linear-gradient(#000 0, #000 100%);
mask: var(--mask);
}
/* 第二层模糊效果 */
.blur-aura:nth-of-type(2n):after {
opacity: 0.5;
backdrop-filter: brightness(105%) saturate(215%) blur(3.75rem);
filter: saturate(175%) blur(1rem);
--offsetX: 0rem;
--offsetY: 1rem;
--border: min(4.5rem, 40vmin);
--feather: min(4.5rem, 6vmin);
}
/* 第三层模糊效果 */
.blur-aura:nth-of-type(3n-1):after {
opacity: 0.55;
backdrop-filter: saturate(175%) blur(8rem);
filter: blur(2rem);
--offsetX: 0rem;
--offsetY: 2rem;
--border: min(28rem, 40vmin);
--feather: min(13rem, 6vmin);
}
/* 渐变叠加效果 */
.gradient-overlay {
box-shadow: 0 4px 8px rgba(0 0 0 / 10%), 0 6px 16px rgba(0 0 0 / 10%),
0 8px 30px rgba(0 0 0 / 5%), inset -44px -44px 56px -16px rgb(0 0 0 / 2%),
inset -24px -24px 32px -12px rgb(0 0 0 / 5%),
inset -12px -12px 22px -12px rgb(0 0 0 / 8%),
inset -12px -12px 18px -18px rgb(0 0 0 / 18%),
inset 44px 44px 56px -16px rgb(255 255 255 / 0.5%),
inset 12px 12px 22px -12px rgb(255 255 255 / 0.5%),
inset 12px 12px 18px -18px rgb(255 255 255 / 3%);
}
.gradient-overlay:before,
.gradient-overlay:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
}
.gradient-overlay:before {
border-radius: inherit;
background: linear-gradient(150deg, #aaa7, #5555);
mix-blend-mode: overlay;
box-shadow: 0 4px 8px rgba(0 0 0 / 10%), 0 6px 16px rgba(0 0 0 / 10%),
0 8px 30px rgba(0 0 0 / 5%), inset -44px -44px 56px -16px rgb(0 0 0 / 5%),
inset -24px -24px 32px -12px rgb(0 0 0 / 8%),
inset -12px -12px 22px -12px rgb(0 0 0 / 10%),
inset -12px -12px 16px -12px rgb(0 0 0 / 18%),
inset 44px 44px 56px -16px rgb(255 255 255 / 5%),
inset 24px 24px 32px -12px rgb(255 255 255 / 6%),
inset 12px 12px 22px -12px rgb(255 255 255 / 7%),
inset 12px 12px 16px -12px rgb(255 255 255 / 8%);
}
.gradient-overlay:after {
content: "";
border-radius: inherit;
opacity: 0.35;
mix-blend-mode: hard-light;
box-shadow: 0 4px 8px rgba(0 0 0 / 30%), 0 6px 16px rgba(0 0 0 / 20%),
0 8px 30px rgba(0 0 0 / 15%), inset -44px -44px 56px -16px rgb(0 0 0 / 5%),
inset -24px -24px 32px -12px rgb(0 0 0 / 8%),
inset -12px -12px 22px -12px rgb(0 0 0 / 12%),
inset -12px -12px 16px -12px rgb(0 0 0 / 18%),
inset 44px 44px 56px -16px rgb(255 255 255 / 5%),
inset 24px 24px 32px -12px rgb(255 255 255 / 6%),
inset 12px 12px 22px -12px rgb(255 255 255 / 7%),
inset 12px 12px 16px -12px rgb(255 255 255 / 8%);
}
/* 导航栏模糊背景 */
.blur-bg {
background: unset !important;
}
.blur-bg:before {
content: "";
position: absolute;
inset: -1rem 0 0 0;
z-index: -1;
opacity: 0.99;
background: linear-gradient(rgba(42, 43, 45, 0.2), rgba(42, 43, 45, 0.2)),
url(https://grainy-gradients.vercel.app/noise.svg), rgba(42, 43, 45, 0.6);
background-blend-mode: saturation;
background: cross-fade(
url(https://grainy-gradients.vercel.app/noise.svg) 40%,
rgba(32, 33, 35, 1) 100%
);
background: -webkit-cross-fade(
url(https://grainy-gradients.vercel.app/noise.svg) 40%,
rgba(32, 33, 35, 1) 100%
);
backdrop-filter: contrast(125%) brightness(145%) blur(0.75rem) saturate(300%);
}
/* 彩色漩涡背景效果 */
.bg-swirl {
background-image: linear-gradient(
316deg,
#00a5ad,
#ff7e00,
#00ff00,
#ff00ab,
#89ff00,
#ff0000,
#fa00b2,
#0000ff
);
background-size: 1000% 1000%;
background-position: 0% 37%;
background-blend-mode: plus-lighter;
transition: background-position 250ms ease-in-out, box-shadow 200ms ease-in-out;
-webkit-animation: GradientAnimated 5s ease infinite;
-moz-animation: GradientAnimated 5s ease infinite;
animation: GradientAnimated 5s ease infinite;
}
@-webkit-keyframes GradientAnimated {
0% { background-position: 0% 37%; }
50% { background-position: 100% 64%; }
100% { background-position: 0% 37%; }
}
@-moz-keyframes GradientAnimated {
0% { background-position: 0% 37%; }
50% { background-position: 100% 64%; }
100% { background-position: 0% 37%; }
}
@keyframes GradientAnimated {
0% { background-position: 0% 37%; }
50% { background-position: 100% 64%; }
100% { background-position: 0% 37%; }
}
/* 启用Gamma/Luma滤镜时的特殊样式 */
body:has(#gamma-filter-toggle:checked) .carousel p,
body:has(#gamma-filter-toggle:checked) .carousel h1,
body:has(#gamma-filter-toggle:checked) .carousel h2,
body:has(#gamma-filter-toggle:checked) .carousel h3,
body:has(#gamma-filter-toggle:checked) .carousel h4,
body:has(#gamma-filter-toggle:checked) .carousel h5,
body:has(#gamma-filter-toggle:checked) .carousel h6 {
text-shadow: 0 0.075em 0.15em rgb(0 0 0 / 20%),
0 0.125em 0.2em rgb(0 0 0 / 15%), 0 0.2em 0.4em rgb(0 0 0 / 5%),
0 0.2em 1em rgb(0 0 0 / 5%);
width: fit-content;
padding: 0.1em 0.25em 0.125em;
background: rgb(0 0 0 / 30%);
margin-inline: auto;
}
/* 浅色主题样式 */
body:has(#light-theme-toggle:checked) {
--bg-color: rgb(213 214 215);
}
</style>
</head>
<body class='dark h-100 w-100 bg-dark m-0 overflow-x-hidden'>
<!-- 导航栏 -->
<nav class="navbar sticky-top navbar-expand-lg bg-secondary-subtle border-0 mb-5 blur-bg" data-bs-theme="dark">
<div class="container-fluid px-4 px-sm-3 px-xl-5">
<a class="navbar-brand ps-2 ps-sm-3 ps-lg-5" href="#">
<img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
</a>
<button class="navbar-toggler me-2 me-lg-5" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse pt-2 pt-lg-0 px-1 px-sm-4 px-lg-0" id="navbarColor02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item py-2 py-lg-2">
<a class="nav-link px-3 px-sm-4 px-lg-2 rounded-3 active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item py-2 py-lg-2">
<a class="nav-link px-3 px-sm-4 px-lg-2 rounded-3" href="#">功能</a>
</li>
<li class="nav-item py-2 py-lg-2">
<a class="nav-link px-3 px-sm-4 px-lg-2 rounded-3" href="#">价格</a>
</li>
<li class="nav-item py-2 py-lg-2">
<a class="nav-link px-3 px-sm-4 px-lg-2 rounded-3" href="#">关于</a>
</li>
</ul>
<form class="d-flex px-0 ps-lg-0 pe-lg-5" role="search">
<input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">
<button class="btn btn-outline-light" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
<!-- 轮播图区域 -->
<header class='container position-relative'>
<div class='row row-cols-auto justify-content-center pt-1 pt-lg-4 pb-3 pb-lg-4'>
<div class='col-12'>
<!-- 轮播图主体 -->
<div id="carouselExample" class="carousel slide rounded rounded-4">
<!-- 轮播指示器 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="bg-light active" aria-current="true" aria-label="Slide 1" title="图片演示"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" class="bg-light" aria-label="Slide 2" title="视频演示"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" class="bg-light" aria-label="Slide 3" title="视频演示"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="3" class="bg-light" aria-label="Slide 4" title="图片演示"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="4" class="bg-light" aria-label="Slide 5" title="图片演示"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="5" class="bg-light" aria-label="Slide 6" title="图片演示"></button>
</div>
<!-- 轮播内容 -->
<div class="carousel-inner rounded rounded-4">
<!-- 第一张 - 图片 -->
<div class="carousel-item ratio ratio-16x9 active">
<img src="https://project-contingency.com/assets/img/blog/R4PWV.jpg" class="d-block object-fit-cover w-100" alt="..." style="scale: 125%;translate: -4% 2%;rotate: -7deg;">
<div class="carousel-caption darken text-light d-none d-md-flex flex-column justify-content-end align-items-center pb-4">
<h5 class="fs-1 text-uppercase rounded-2">第一张幻灯片</h5>
<p class="mb-4 text-lowercase rounded-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- 第二张 - YouTube视频 -->
<div class="carousel-item ratio ratio-16x9">
<iframe id="demo-vid-1" width="560" height="315" class="d-block object-fit-cover w-100" src="https://www.youtube.com/embed/e1QD2dBkESE?enablejsapi=1&controls=0&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- 第三张 - YouTube视频(可更换) -->
<div class="carousel-item ratio ratio-16x9">
<iframe id="demo-vid-2" width="560" height="315" class="d-block object-fit-cover w-100" src="https://www.youtube.com/embed/GdNjjhJUibU?enablejsapi=1&controls=0&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- 第四张 - 图片 -->
<div class="carousel-item ratio ratio-16x9">
<img src="https://project-contingency.com/assets/img/blog/TT3LY.jpg" class="d-block object-fit-cover w-100" alt="...">
<div class="carousel-caption darken text-light d-none d-md-flex flex-column justify-content-end align-items-center pb-4">
<h5 class="fs-1 text-uppercase rounded-2">第四张幻灯片</h5>
<p class="mb-4 text-lowercase rounded-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- 第五张 - 图片 -->
<div class="carousel-item ratio ratio-16x9">
<img src="https://project-contingency.com/assets/img/blog/PL06X.jpg" class="d-block object-fit-cover w-100" alt="...">
<div class="carousel-caption darken text-light d-none d-md-flex flex-column justify-content-end align-items-center pb-4">
<h5 class="fs-1 text-uppercase rounded-2">第五张幻灯片</h5>
<p class="mb-4 text-lowercase rounded-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<!-- 第六张 - 彩色背景 -->
<div class="carousel-item ratio ratio-16x9">
<div class="d-block object-fit-cover w-100 bg-swirl"></div>
<div class="carousel-caption text-light d-none d-md-flex flex-column justify-content-end align-items-center pb-4">
<h5 class="fs-1 text-uppercase rounded-2">第六张幻灯片</h5>
<p class="mb-4 text-lowercase rounded-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<!-- 上一张/下一张控制按钮 -->
<button class="carousel-control-prev rounded-start-4" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">上一张</span>
</button>
<button class="carousel-control-next rounded-end-4" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">下一张</span>
</button>
<!-- 模糊发光效果层 -->
<div class="blur-aura rounded-4"></div>
<div class="blur-aura rounded-4"></div>
<div class="blur-aura rounded-4"></div>
<div class="gradient-overlay rounded-4"></div>
</div>
</div>
</div>
</header>
<!-- 主要内容区域 -->
<main class='container position-relative pb-5'>
<div class='row row-cols-auto pt-2 pt-md-3 pb-5 px-2 px-md-3 px-lg-5'>
<div class='col-8 col-lg-7 pe-md-2 pe-lg-5'>
<h2 class="border-bottom border-light border-opacity-25 pb-3 mb-3">
带背光效果的卡片轮播
</h2>
<p class="mb-1">
这种发光效果是通过叠加一个或多个具有背景滤镜模糊的元素，并使用复杂的渐变蒙版堆栈来屏蔽中心原始内容，同时使效果向边缘淡出来实现的。
</p>
<p class="mb-3">
不是通过在背景中复制元素来伪造的！
</p>
<p class="mb-4">
目前在<em>基于Chromium的浏览器中效果最佳</em>，仍在研究如何让Firefox在模糊效果显示时表现更好。另外，请确保<u>启用GPU硬件加速</u>以避免卡顿行为！
</p>
<hr>
<p class="mb-4">
由于该效果位于内容之上，不需要复制您想要应用效果的内容，因此它几乎适用于任何类型的内容和媒体。您还可以使用z-index或DOM中的位置将特定内容弹出到效果之上以排除它。
</p>
<p>
我计划添加一种自定义效果的方法，因为所有变量（如圆角半径、外部"边框"宽度及其羽化）都设置为CSS变量。
</p>
<p class="mb-4">
不幸的是，为了获得最佳效果，我不得不叠加3个这些效果，每个效果的变量值不同，所以我需要想办法优化同时自定义多个层。我仍在研究这个问题，但我可能会先设置一种只自定义蒙版本身的方法。
</p>
<p class="mb-3">
在此期间，您可以从这个codepen中获取代码（抱歉有点乱）。或者只是坐下来享受演示 😉
</p>
<h5 class="border-bottom border-light border-opacity-25 pt-3 pb-2 mb-3">
已知问题：
</h5>
<ul class="mb-4">
<li>
<p class="mb-1">
在基于Chromium的浏览器中，"SVG Gamma/Luma蒙版"模式下出现颜色条带。
</p>
</li>
<li>
<p class="mb-1">
当浏览器中未启用图形硬件加速时，性能问题严重。
</p>
</li>
<li>
<p>
Firefox中的发光效果不完全匹配预期视觉效果。
</p>
</li>
<li>
<p>
在Firefox中，当轮播滑动时滚动会使动画变慢和卡顿。
</p>
</li>
</ul>
</div>
<div class='col-4 offset-lg-1'>
<h4 class="border-bottom border-light border-opacity-25 pt-3 pb-2 mb-3">
配置演示
</h4>
<div class="form-check form-switch" title="一种粗糙的SVG滤镜，用于屏蔽最暗的色调">
<input class="form-check-input" type="checkbox" role="switch" id="gamma-filter-toggle">
<label class="form-check-label" for="gamma-filter-toggle">启用Gamma/Luma蒙版滤镜</label>
</div>
<div class="form-check form-switch" title="闪光弹模式(与Gamma/Luma滤镜配合不佳)">
<input class="form-check-input" type="checkbox" role="switch" id="light-theme-toggle">
<label class="form-check-label" for="light-theme-toggle">切换页面深色/浅色模式</label>
</div>
<div class="mt-3 mb-4">
<label for="yt-embed-id" class="form-label small">幻灯片3 - YouTube视频ID</label>
<input type="text" class="form-control form-control-sm" id="yt-embed-id" placeholder="GdNjjhJUibU" value="GdNjjhJUibU">
</div>
<h4 class="border-bottom border-light border-opacity-25 pt-3 pb-2 mb-3">
配置光晕效果
</h4>
<p class="small">
<i class="small">
下面自定义模糊光晕效果属性尚不支持。
</i>
</p>
<label for="customRange3" class="form-label">边框/内边距</label>
<input type="range" class="form-range" min="0" max="50" step="1" value="20" id="customRange3">
<label for="customRange3" class="form-label">圆角半径</label>
<input type="range" class="form-range" min="0" max="5" step="0.25" value="2" id="customRange3">
<label for="customRange3" class="form-label">羽化</label>
<input type="range" class="form-range" min="0" max="0.5" step="0.01" value="8" id="customRange3">
<label for="customRange3" class="form-label">X偏移</label>
<input type="range" class="form-range" min="0" max="15" step="0.5" value="0" id="customRange3">
<label for="customRange3" class="form-label">Y偏移</label>
<input type="range" class="form-range" min="0" max="15" step="0.5" value="6" id="customRange3">
<hr>
<div class="mb-3">
<label for="outputHTML" class="form-label">HTML</label>
<textarea class="form-control text-white text-opacity-25 pe-none" id="outputHTML" rows="3" disabled readonly>自定义模糊光晕效果尚不支持。</textarea>
</div>
<div class="mb-3">
<label for="outputCSS" class="form-label">CSS</label>
<textarea class="form-control text-white text-opacity-25 pe-none" id="outputCSS" rows="9" disabled readonly>自定义模糊光晕效果尚不支持。</textarea>
</div>
</div>
</div>
</main>
<!-- 页脚 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary py-5 mt-5">
<div class="container pb-4">
<a class="navbar-brand" href="#">
<img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">功能</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">价格</a>
</li>
</ul>
</div>
</nav>
<!-- 提示Toast -->
<div class="toast-container position-fixed p-3 mb-4 d-none d-lg-block start-50 bottom-0 translate-middle-x">
<div class="toast bg-primary rounded-3" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="15000">
<div class="d-flex">
<div class="toast-body">请确保启用GPU加速！</div>
<button type="button" class="bg-white btn-close m-auto me-2 p-1" data-bs-dismiss="toast" aria-label="关闭"></button>
</div>
</div>
</div>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 自定义JavaScript -->
<script>
// 初始化轮播图
document.addEventListener('DOMContentLoaded', function() {
// 获取轮播图元素
let myCarouselElement = document.querySelector("#carouselExample");
// 初始化Bootstrap轮播图
let carousel = new bootstrap.Carousel(myCarouselElement, {
interval: 2000, // 自动轮播间隔2秒
touch: true // 启用触摸支持
});
// 初始化Toast提示
const toastElList = document.querySelectorAll(".toast");
const toastList = [...toastElList].map(
(toastEl) => new bootstrap.Toast(toastEl)
);
// 2.5秒后显示Toast提示
setTimeout(() => {
toastList[0].show();
}, 2500);
// 主题切换功能
document.getElementById('light-theme-toggle').addEventListener('change', function() {
// 切换深色/浅色主题
document.documentElement.setAttribute('data-bs-theme',
(document.documentElement.getAttribute('data-bs-theme') == 'dark') ? 'light' : 'dark');
});
// 加载YouTube IFrame API
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 存储YouTube播放器实例
var players = [];
// YouTube API准备就绪时的回调函数
window.onYouTubeIframeAPIReady = function() {
var allMovieIframes = myCarouselElement.getElementsByTagName("iframe");
// 为每个iframe初始化YouTube播放器
for (let currentIFrame of allMovieIframes) {
players.push(
new YT.Player(currentIFrame.id, {
events: {
onReady: onPlayerReady
}
})
);
}
};
// 播放器准备就绪时的回调
function onPlayerReady(event) {
event.target.setVolume(15); // 设置音量
event.target.setPlaybackQuality("highres"); // 设置播放质量
}
// 轮播图滑动事件处理
myCarouselElement.addEventListener('slide.bs.carousel', function(event) {
try {
// 暂停所有视频播放
if (players != undefined) {
players.forEach((player) => {
if (player.pauseVideo) {
player.pauseVideo();
}
});
}
} catch (e) {
console.error("暂停视频时出错:", e);
}
});
// YouTube视频ID输入框变化事件
document.getElementById('yt-embed-id').addEventListener('change', function(event) {
let ytid = event.target.value || "GdNjjhJUibU";
let url = `https://www.youtube.com/embed/${ytid}?enablejsapi=1&controls=0&loop=1`;
// 更新视频源
document.getElementById("demo-vid-2").src = url;
});
// 输入框获取焦点时全选文本
document.getElementById('yt-embed-id').addEventListener('focus', function(event) {
this.select();
});
});
</script>
</body>
</html>
index.html
style.css
index.js