轮播框 CSS 动画组件

资源中心 » 组件中心 » 轮播框 CSS 动画组件

注意：

此页为于后室维基内部所使用的组件页面。该页面内容可在其它页面中被使用或引用。

{$text1}
{$text2}
{$text3}
{$text4}
{$text5}
{$text6}

这是什么

我 Croquembouche用在一大堆页面上的一大堆各种各样的CSS“改进”，因为我觉得这样就能使其更容易处理。

该组件做出了很多非常细碎的改动以使得写作体验更加舒服且能够使制作组件/版式更加容易一点（也就是我经常干的事）。它不会对读者来说在视觉上改变页面中的任何东西——这些改动是为作者服务的。

我不期望用了这个组件的文章的翻译版也会用到这个组件，除非那个翻译者也喜欢这个组件而且也想用这个组件之类的。

这个组件可能不会与其它组件或版式冲突，且即使会冲突，也可能不会有什么影响。

用法

在任意维基上：

[[include :scp-wiki:component:croqstyle]]

该组件被设计于与其它组件一同使用，所以-=-是用来隐藏该文档的。在另一个组件内使用时，请确保将该组件放在[[iftags]]块内，这样你的组件的用户就不会强制同样使用 Croq 风格。

CSS修改

大小合理的脚注

不让脚注达到一百万里那么宽，让你能确实地阅读脚注。

.hovertip { max-width: 400px; }

等宽字体编辑/代码

使编辑文本框内字体等宽，且将所有等宽字文本改为Fira Code，也是个明显很优秀的等宽字字体。

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

电传打字机背景

给<tt>元素加上亮灰色的背景（{{文本}}），使得代码片段更为突出。

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

不要大脸

禁用悬停于某人的头像的时候出现的大图片，因为这图片又蠢又真的很烦人，想看大头像版本的话直接点击一下就行了。

.avatar-hover { display: none !important; }

碎裂碎裂

任何在带有nobreak类的div中的文本可以在字母间自动换行。

.nobreak { word-break: break-all; }

代码颜色

将我终端中的代码颜色加为变量。可能我会在什么时候把它改成比如Monokai或者别的更加常见的终端主题，但是现在暂时这还是我的个人主题，是从Tomorrow Night Eighties中衍生而来的。

还有，将.terminal类像[[div class="code terminal"]]一样添加到假代码方块中可以让它有一个有点伪终端样的暗色背景。不能用在[[code]]中，因为Wikidot嵌入了一大堆语法来使其高亮，不用一大堆CSS是改不动的。只能用在非[[code]]的代码片段中。

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

调试模式

将位于.debug-mode中的任何东西周围画上线。线的颜色是红色的但是遵从CSS变量--debug-colour。

你还可以将div.debug-info.over与div.debug-info.under添加到某个元素中以给调试框加注释——虽然你得确保有留下足够的垂直空间，让注释不会与其上方或下方的东西重叠。

……就像这样！

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }

2023年1月强化月
2023情人节竞赛
半月刊 - 2023年1月下

这是什么？

这是由 hoah2333 原为首页横幅轮播制作的轮播框 CSS 动画组件。与图像轮播框组件不同的是，该组件完全使用 CSS 动画制作，因此其加载速度极快。缺点是无法手动翻阅正在轮播的图片。此问题已使用一个位于左上角的导航菜单替代解决，可利用该菜单快捷进入轮播图片对应的链接。

使用方法

若需使用本组件，请在你所需的地方黏贴下方代码：

你需要填写所有未标记为“（可选）”的参数。缺少参数将会导致组件无法正常运作。


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]]

扩展用法

2023年1月强化月
2023情人节竞赛
半月刊 - 2023年1月下

这是一个轮播示例

你可以将该组件放入图片框（或其它图片组件）内，以此来给此些图片添加注释。

下面是上方轮播示例的代码：

组件样式代码

+ 展开组件样式代码

- 收起组件样式代码

下方为曾用代码，可能不会再被更新，若需查看现用代码，请访问我的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;
}

_cc 原创精品组件

页面版本: 22, 最后编辑于: 14 Mar 2024 06:27

编辑评分 (+48) 标签讨论 (14) 历史记录附件打印网站工具 + 选项

The Backrooms中文维基

你曾经来过这里

注意：