轮播框 CSS 动画 组件
+* 这是什么？
这是由 hoah2333 原为首页横幅轮播制作的轮播框 CSS 动画组件。与图像轮播框组件不同的是，该组件完全使用 CSS 动画制作，因此其加载速度极快。缺点是无法手动翻阅正在轮播的图片。此问题已使用一个位于左上角的导航菜单替代解决，可利用该菜单快捷进入轮播图片对应的链接。
+* 使用方法
若需使用本组件，请在你所需的地方黏贴下方代码：
[[include :backrooms-wiki-cn:component:carousel-css
|navigator####var(--c-keyword)|=none
|number####var(--c-keyword)|=2/3/4/5/6
|img1####var(--c-keyword)|=URL
|link1####var(--c-keyword)|=URL
|text1####var(--c-keyword)|=文字
|img2####var(--c-keyword)|=URL
|link2####var(--c-keyword)|=URL
|text2####var(--c-keyword)|=文字
]]
你需要填写所有未标记为“（可选）”的参数。缺少参数将会导致组件无法正常运作。
| navigator _ |
（可选）
| 导航栏 _ |
控制左上角的导航栏是否显示。 _
填写 none 即可去除导航栏。填写其它参数无效。
| number | 总图片数 _ |
轮播框中需要轮播的图片数。 _
仅能填写 2/3/4/5/6 中的任意一个数字。 _
单张图片无需轮播，填写 1 将使该组件变得无意义。
| imgN | 第 N 张图片链接 _ |
被轮播的第 N 张图片链接。 _
第 1 张图片使用 img1，第 2 张图片使用 img2，以此类推。
| linkN | 第 N 张图片跳转链接 _ |
被轮播的第 N 张图片被点击后所跳转的链接。 _
第 1 张图片使用 link1，第 2 张图片使用 link2，以此类推。 _
特别地，如果你不希望图片被点击后进行跳转，请在此处填写
| textN | 第 N 张图片在导航栏中的描述。 _ |
被轮播的第 N 张照片在导航栏中所显示的描述。 _
第 1 张图片使用 text1，第 2 张图片使用 text2，以此类推。
由于 CSS 动画本身的限制，动画顺序无法使用变量进行灵活修改。若需使用 7 张或以上的图片进行轮播，请考虑将轮播内容拆分，或直接联系 hoah2333 添加 7 项轮播功能。
+* 自定义时间
本组件默认设置每一张图片停留 5s，轮播动画持续 0.5s。你可以使用下方的代码调整这两个时间的长度：
[[module CSS]]
:root {
--base-wait-time: 5s;
--base-roll-time: 0.5s;
}
[[/module]]
+* 扩展用法
你可以将该组件放入图片框（或其它图片组件）内，以此来给此些图片添加注释。
下面是上方轮播示例的代码：
[[div class####var(--c-keyword)|="scp-image-block"]]
[[include :backrooms-wiki-cn:component:carousel-css
|number####var(--c-keyword)|=2/3/4/5/6
|img1####var(--c-keyword)|=URL
|link1####var(--c-keyword)|=URL
|text1####var(--c-keyword)|=文字
|img2####var(--c-keyword)|=URL
|link2####var(--c-keyword)|=URL
|text2####var(--c-keyword)|=文字
]]
[[div class####var(--c-keyword)|="scp-image-caption"]]
描述性文字
[[/div]]
[[/div]]
+* 组件样式代码
下方为曾用代码，可能不会再被更新，若需查看现用代码，请访问我的Github 仓库。
/*
Carousel Component CSS Version
Made by hoah2333
Inspired form Carousel Component by Croquembouche
*/
:root {
--base-roll-time: 0.5s;
--base-wait-time: 5s;
--img-2-time: calc(2 * (var(--base-roll-time) + var(--base-wait-time)));
--img-3-time: calc(3 * (var(--base-roll-time) + var(--base-wait-time)));
--img-4-time: calc(4 * (var(--base-roll-time) + var(--base-wait-time)));
--img-5-time: calc(5 * (var(--base-roll-time) + var(--base-wait-time)));
--img-6-time: calc(6 * (var(--base-roll-time) + var(--base-wait-time)));
--navigator-mask: url(data:image/svg+xml;base64,PHN2ZyBpZD0i5Zu+5bGCXzEiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwIDIwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzIzMTgxNTt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iMjAiIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeT0iOCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHk9IjE2IiB3aWR0aD0iMjAiIGhlaWdodD0iNCIvPjwvc3ZnPg==);
}
.carousel-container {
position: relative;
overflow: hidden;
}
.carousel-container .rolling {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
}
.carousel-container .rolling br {
display: none;
}
.carousel-container .rolling a:nth-of-type(1) {
width: 100%;
position: relative;
}
.carousel-container .rolling a:nth-of-type(2),
.carousel-container .rolling a:nth-of-type(3),
.carousel-container .rolling a:nth-of-type(4),
.carousel-container .rolling a:nth-of-type(5),
.carousel-container .rolling a:nth-of-type(6) {
position: absolute;
left: 100%;
width: 100%;
}
.carousel-container .progress {
position: absolute;
bottom: 0;
background: rgba(255, 255, 255, 0.7);
box-sizing: border-box;
backdrop-filter: blur(2px);
height: 5px;
left: 0;
}
/* ============== */
/* 图片切换动画部分 */
/* ============== */
.carousel-container .rolling.img-2 a:nth-of-type(1) {
animation: rolling2-1 var(--img-2-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-2 a:nth-of-type(2) {
animation: rolling2-2 var(--img-2-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes rolling2-1 {
0% {left: 0;} /* 0s */
4.54% {left: -100%;} /* 0.5s */
49.99% {left: -100%;}
50% {left: 100%;} /* 5.5s */
54.54% {left: 0;} /* 6s */
100% {left: 0;} /* 11s */
}
@keyframes rolling2-2 {
0% {left: 100%;} /* 0s */
4.54% {left: 0;} /* 0.5s */
50% {left: 0;} /* 5.5s */
54.54% {left: -100%;} /* 6s */
99.99% {left: -100%;}
100% {left: 100%;} /* 11s */
}
.carousel-container .rolling.img-3 a:nth-of-type(1) {
animation: rolling3-1 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-3 a:nth-of-type(2) {
animation: rolling3-2 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-3 a:nth-of-type(3) {
animation: rolling3-3 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes rolling3-1 {
0% {left: 0;} /* 0s */
3.03% {left: -100%;} /* 0.5s */
66.65% {left: -100%;}
66.66% {left: 100%;} /* 11s */
69.69% {left: 0;} /* 11.5s */
100% {left: 0;} /* 16.5s */
}
@keyframes rolling3-2 {
0% {left: 100%;} /* 0s */
3.03% {left: 0;} /* 0.5s */
33.33% {left: 0;} /* 5.5s */
36.36% {left: -100%;} /* 6s */
99.99% {left: -100%;}
100% {left: 100%;} /* 16.5s */
}
@keyframes rolling3-3 {
0% {left: 100%;} /* 0s */
33.33% {left: 100%;} /* 5.5s */
36.36% {left: 0;} /* 6s */
66.66% {left: 0;} /* 11s */
69.69% {left: -100%;} /* 11.5s */
99.99% {left: -100%}
100% {left: 100%;} /* 16.5s */
}
.carousel-container .rolling.img-4 a:nth-of-type(1) {
animation: rolling4-1 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-4 a:nth-of-type(2) {
animation: rolling4-2 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-4 a:nth-of-type(3) {
animation: rolling4-3 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-4 a:nth-of-type(4) {
animation: rolling4-4 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes rolling4-1 {
0% {left: 0;} /* 0s */
2.27% {left: -100%;} /* 0.5s */
74.99% {left: -100%;}
75% {left: 100%;} /* 16.5s */
77.27% {left: 0;} /* 17s */
100% {left: 0;} /* 22s */
}
@keyframes rolling4-2 {
0% {left: 100%;} /* 0s */
2.27% {left: 0;} /* 0.5s */
25% {left: 0;} /* 5.5s */
27.27% {left: -100%;} /* 6s */
99.99% {left: -100%;}
100% {left: 100%;} /* 22s */
}
@keyframes rolling4-3 {
0% {left: 100%;} /* 0s */
25% {left: 100%;} /* 5.5s */
27.27% {left: 0;} /* 6s */
50% {left: 0;} /* 11s */
52.27% {left: -100%;} /* 11.5s */
99.99% {left: -100%}
100% {left: 100%;} /* 22s */
}
@keyframes rolling4-4 {
0% {left: 100%;} /* 0s */
50% {left: 100%;} /* 11s */
52.27% {left: 0;} /* 11.5s */
75% {left: 0;} /* 16.5s */
77.27% {left: -100%;} /* 17s */
99.99% {left: -100%}
100% {left: 100%;} /* 22s */
}
.carousel-container .rolling.img-5 a:nth-of-type(1) {
animation: rolling5-1 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-5 a:nth-of-type(2) {
animation: rolling5-2 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-5 a:nth-of-type(3) {
animation: rolling5-3 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-5 a:nth-of-type(4) {
animation: rolling5-4 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-5 a:nth-of-type(5) {
animation: rolling5-5 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes rolling5-1 {
0% {left: 0;} /* 0s */
1.82% {left: -100%;} /* 0.5s */
79.99% {left: -100%;}
80% {left: 100%;} /* 22s */
81.82% {left: 0;} /* 22.5s */
100% {left: 0;} /* 27.5s */
}
@keyframes rolling5-2 {
0% {left: 100%;} /* 0s */
1.82% {left: 0;} /* 0.5s */
20% {left: 0;} /* 5.5s */
21.82% {left: -100%;} /* 6s */
99.99% {left: -100%;}
100% {left: 100%;} /* 27.5s */
}
@keyframes rolling5-3 {
0% {left: 100%;} /* 0s */
20% {left: 100%;} /* 5.5s */
21.82% {left: 0;} /* 6s */
40% {left: 0;} /* 11s */
41.82% {left: -100%;} /* 11.5s */
99.99% {left: -100%}
100% {left: 100%;} /* 27.5s */
}
@keyframes rolling5-4 {
0% {left: 100%;} /* 0s */
40% {left: 100%;} /* 11s */
41.82% {left: 0;} /* 11.5s */
60% {left: 0;} /* 16.5s */
61.82% {left: -100%;} /* 17s */
99.99% {left: -100%}
100% {left: 100%;} /* 27.5s */
}
@keyframes rolling5-5 {
0% {left: 100%;} /* 0s */
60% {left: 100%;} /* 16.5s */
61.82% {left: 0;} /* 17s */
80% {left: 0;} /* 22s */
81.82% {left: -100%;} /* 22.5s */
99.99% {left: -100%}
100% {left: 100%;} /* 27.5s */
}
.carousel-container .rolling.img-6 a:nth-of-type(1) {
animation: rolling6-1 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-6 a:nth-of-type(2) {
animation: rolling6-2 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-6 a:nth-of-type(3) {
animation: rolling6-3 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-6 a:nth-of-type(4) {
animation: rolling6-4 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-6 a:nth-of-type(5) {
animation: rolling6-5 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .rolling.img-6 a:nth-of-type(5) {
animation: rolling6-6 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes rolling6-1 {
0% {left: 0;} /* 0s */
1.51% {left: -100%;} /* 0.5s */
79.99% {left: -100%;}
83.33% {left: 100%;} /* 27.5s */
84.85% {left: 0;} /* 28s */
100% {left: 0;} /* 33s */
}
@keyframes rolling6-2 {
0% {left: 100%;} /* 0s */
1.51% {left: 0;} /* 0.5s */
16.67% {left: 0;} /* 5.5s */
18.82% {left: -100%;} /* 6s */
99.99% {left: -100%;}
100% {left: 100%;} /* 33s */
}
@keyframes rolling6-3 {
0% {left: 100%;} /* 0s */
16.67% {left: 100%;} /* 5.5s */
18.82% {left: 0;} /* 6s */
33.33% {left: 0;} /* 11s */
34.85% {left: -100%;} /* 11.5s */
99.99% {left: -100%}
100% {left: 100%;} /* 33s */
}
@keyframes rolling6-4 {
0% {left: 100%;} /* 0s */
33.33% {left: 100%;} /* 11s */
34.85% {left: 0;} /* 11.5s */
50% {left: 0;} /* 16.5s */
51.51% {left: -100%;} /* 17s */
99.99% {left: -100%}
100% {left: 100%;} /* 33s */
}
@keyframes rolling6-5 {
0% {left: 100%;} /* 0s */
50% {left: 100%;} /* 16.5s */
51.51% {left: 0;} /* 17s */
66.67% {left: 0;} /* 22s */
68.18% {left: -100%;} /* 22.5s */
99.99% {left: -100%}
100% {left: 100%;} /* 33s */
}
@keyframes rolling6-6 {
0% {left: 100%;} /* 0s */
66.67% {left: 100%;} /* 22s */
68.18% {left: 0;} /* 22.5s */
83.33% {left: 0;} /* 27.5s */
84.85% {left: -100%;} /* 28s */
99.99% {left: -100%}
100% {left: 100%;} /* 33s */
}
/* ============ */
/* 进度条动画部分 */
/* ============ */
.carousel-container .progress.width-2,
.carousel-container .progress.fake-2 {
width: calc(100% / 2);
}
.carousel-container .progress.width-2 {
animation: progress-2 var(--img-2-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.fake-2 {
animation: fake-2 var(--img-2-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes progress-2 {
0% {left: 0;} /* 0s */
4.54% {left: calc(100% / 2);} /* 0.5s */
50% {left: calc(100% / 2);} /* 5.5s */
54.54% {left: 100%;} /* 6s */
99.99% {left: 100%;}
100% {left: 0;} /* 11s */
}
@keyframes fake-2 {
0% {left: 0;} /* 0s */
0.01% {left: calc(100% / -2);}
50% {left: calc(100% / -2);} /* 5.5s */
54.54% {left: 0;} /* 6s */
100% {left: 0;} /* 11s */
}
.carousel-container .progress.width-3,
.carousel-container .progress.fake-3 {
width: calc(100% / 3);
}
.carousel-container .progress.width-3 {
animation: progress-3 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.fake-3 {
animation: fake-3 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes progress-3 {
0% {left: 0;} /* 0s */
3.03% {left: calc(100% / 3);} /* 0.5s */
33% {left: calc(100% / 3);} /* 5.5s */
36.36% {left: calc(100% / 3 * 2);} /* 6s */
66.66% {left: calc(100% / 3 * 2);} /* 11s */
69.69% {left: 100%;} /* 11.5s */
99.99% {left: 100%;}
100% {left: 0;} /* 16.5s */
}
@keyframes fake-3 {
0% {left: 0;} /* 0s */
0.01% {left: calc(100% / -3);}
66.66% {left: calc(100% / -3);} /* 11s */
69.69% {left: 0;} /* 11.5s */
100% {left: 0;} /* 16.5s */
}
.carousel-container .progress.width-4,
.carousel-container .progress.fake-4 {
width: calc(100% / 4);
}
.carousel-container .progress.width-4 {
animation: progress-4 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.fake-4 {
animation: fake-4 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes progress-4 {
0% {left: 0;} /* 0s */
2.27% {left: calc(100% / 4);} /* 0.5s */
25% {left: calc(100% / 4);} /* 5.5s */
27.27% {left: calc(100% / 4 * 2);} /* 6s */
50% {left: calc(100% / 4 * 2);} /* 11s */
52.27% {left: calc(100% / 4 * 3);} /* 11.5s */
75% {left: calc(100% / 4 * 3)} /* 16.5s */
77.27% {left: 100%;} /* 17s */
99.99% {left: 100%;}
100% {left: 0;} /* 22s */
}
@keyframes fake-4 {
0% {left: 0;} /* 0s */
0.01% {left: calc(100% / -4);}
75% {left: calc(100% / -4);} /* 16.5s */
77.27% {left: 0;} /* 17s */
100% {left: 0;} /* 22s */
}
.carousel-container .progress.width-5,
.carousel-container .progress.fake-5 {
width: calc(100% / 5);
}
.carousel-container .progress.width-5 {
animation: progress-5 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.fake-5 {
animation: fake-5 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes progress-5 {
0% {left: 0;} /* 0s */
1.82% {left: calc(100% / 5);} /* 0.5s */
20% {left: calc(100% / 5);} /* 5.5s */
21.82% {left: calc(100% / 5 * 2);} /* 6s */
40% {left: calc(100% / 5 * 2);} /* 11s */
41.82% {left: calc(100% / 5 * 3);} /* 11.5s */
60% {left: calc(100% / 5 * 3)} /* 16.5s */
61.82% {left: calc(100% / 5 * 4);} /* 17s */
80% {left: calc(100% / 5 * 4);} /* 22s */
81.82% {left: 100%;} /* 22.5s */
99.99% {left: 100%;}
100% {left: 0;} /* 27.5s */
}
@keyframes fake-5 {
0% {left: 0;} /* 0s */
0.01% {left: calc(100% / -5);}
80% {left: calc(100% / -5);} /* 22s */
81.82% {left: 0;} /* 22.5s */
100% {left: 0;} /* 27.5s */
}
.carousel-container .progress.width-6,
.carousel-container .progress.fake-6 {
width: calc(100% / 6);
}
.carousel-container .progress.width-6 {
animation: progress-6 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.carousel-container .progress.fake-6 {
animation: fake-6 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes progress-6 {
0% {left: 0;} /* 0s */
1.51% {left: calc(100% / 6);} /* 0.5s */
16.67% {left: calc(100% / 6);} /* 5.5s */
18.82% {left: calc(100% / 6 * 2);} /* 6s */
33.33% {left: calc(100% / 6 * 2);} /* 11s */
34.85% {left: calc(100% / 6 * 3);} /* 11.5s */
50% {left: calc(100% / 6 * 3)} /* 16.5s */
51.51% {left: calc(100% / 6 * 4);} /* 17s */
66.67% {left: calc(100% / 6 * 4);} /* 22s */
68.18% {left: calc(100% / 6 * 5);} /* 22.5s */
83.33% {left: calc(100% / 6 * 5);} /* 27.5s */
84.85% {left: 100%;} /* 28s */
99.99% {left: 100%;}
100% {left: 0;} /* 33s */
}
@keyframes fake-6 {
0% {left: 0;} /* 0s */
0.01% {left: calc(100% / -6);}
83.33% {left: calc(100% / -6);} /* 27.5s */
84.85% {left: 0;} /* 28s */
100% {left: 0;} /* 33s */
}
/* ========== */
/* 导航菜单部分 */
/* ========== */
.carousel-container .navigator {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 0);
transition:
background-color 0.25s 0.25s cubic-bezier(0.4, 0, 0.2, 1),
width 0.25s 0.5s cubic-bezier(0.4, 0, 0.2, 1),
height 0.25s 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-container .navigator.none {
display: none;
}
.carousel-container .navigator::before {
content: "";
background-color: rgba(255, 255, 255, 0.7);
position: absolute;
width: 100%;
height: 100%;
-webkit-mask-size: 40%;
mask-size: 40%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-image: var(--navigator-mask);
mask-image: var(--navigator-mask);
left: 0;
transition: left 0.75s 0s linear;
}
.carousel-container .navigator:hover {
background-color: rgba(255, 255, 255, 0.8);
width: 100%;
height: 100%;
transition-delay: 0s;
}
.carousel-container .navigator:hover::before {
left: -999vw;
}
.carousel-container .navigator .navigator-links {
display: grid;
position: absolute;
left: -999vw;
width: 100%;
height: 100%;
transition: left 0s 0.25s linear;
}
.carousel-container .navigator br {
display: none;
}
.carousel-container .navigator:hover .navigator-links {
left: 0;
transition-delay: 0s;
}
.carousel-container .navigator .navigator-links.links-2 {
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
}
.carousel-container .navigator .navigator-links.links-3 {
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
.carousel-container .navigator .navigator-links.links-4 {
grid-template-columns: 1fr;
grid-template-rows: repeat(4, 1fr);
}
.carousel-container .navigator .navigator-links.links-5 {
grid-template-columns: 1fr;
grid-template-rows: repeat(5, 1fr);
}
.carousel-container .navigator .navigator-links.links-6 {
grid-template-columns: 1fr;
grid-template-rows: repeat(6, 1fr);
}
.carousel-container .navigator .navigator-links a {
display: flex;
position: relative;
align-items: center;
justify-content: left;
box-sizing: border-box;
border-left: 5px solid rgba(0, 0, 0, 0.4);
padding-left: 10px;
color: #3A3A3A;
font-size: 1.15rem;
text-decoration: none;
clip-path: inset(0 0 100% 0);
transition: clip-path 0.25s 0s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-container .navigator:hover .navigator-links a {
clip-path: inset(0);
transition-delay: 0.25s;
}
/* 一个 a:not(a:last-of-type) 就能解决的事 */
.carousel-container .navigator .navigator-links a:nth-of-type(1),
.carousel-container .navigator .navigator-links.links-3 a:nth-of-type(2),
.carousel-container .navigator .navigator-links.links-4 a:nth-of-type(2),
.carousel-container .navigator .navigator-links.links-4 a:nth-of-type(3),
.carousel-container .navigator .navigator-links.links-5 a:nth-of-type(2),
.carousel-container .navigator .navigator-links.links-5 a:nth-of-type(3),
.carousel-container .navigator .navigator-links.links-5 a:nth-of-type(4),
.carousel-container .navigator .navigator-links.links-6 a:nth-of-type(2),
.carousel-container .navigator .navigator-links.links-6 a:nth-of-type(3),
.carousel-container .navigator .navigator-links.links-6 a:nth-of-type(4),
.carousel-container .navigator .navigator-links.links-6 a:nth-of-type(5) {
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}
.carousel-container .navigator .navigator-links a::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: -100%;
top: 0;
background-color: rgba(0, 0, 0, 0.2);
transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.carousel-container .navigator .navigator-links a:hover::after {
left: 0;
}
.carousel-container .progress,
.carousel-container .fake-1 + .navigator {
display: none;
}
/* ======== */
/* 移动端优化 */
/* ======== */
@media (max-width: 1024px) {
.carousel-container .navigator .navigator-links a {
font-size: 1rem;
}
}
@media (max-width: 980px) {
.carousel-container .navigator .navigator-links a {
font-size: 0.75rem;
}
}
@media (max-width: 526px) {
.carousel-container .navigator .navigator-links.links-4 {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
}
.carousel-container .navigator .navigator-links.links-5,
.carousel-container .navigator .navigator-links.links-6 {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
}
.carousel-container .navigator .navigator-links.links-5 a:nth-of-type(5) {
grid-column: 1 / 3;
}
}
/* ======== */
/* 防呆不防傻 */
/* ======== */
.carousel-container [class*="$number"],
.carousel-container .rolling a[href*="$link"],
.carousel-container .navigator .navigator-links a[style*="$link"] {
display: none;
}