动画式渐显 组件
Rating: +46

著作信息

刚学了一点css基础就跑来做的东西，技术含量很低，不过也算圆了我做组件的梦。

你要问我这有什么用？我也不知道，硬要说就是有些人不想用华丽的版式却又觉得原来的Sigma-9太平凡。

Rating: +46

这是什么？

这是一个由Blanxers_lwwl14Blanxers_lwwl14整合/制作的Sigma-9动画化补丁1，你可以通过下方的代码导入此组件。

[[include :scp-wiki-cn:component:sigma-9-ani]]

不要问我为什么这个url似乎和实际内容毫无关联，问就是历史遗留问题。我没有实际测试过，不过我猜你也可以在几乎所有不具备动画的Sigma-9/Sigma-10版式中使用它，比如theme:night-rush-theme，不过对于theme:aero-glass这种复杂的版式，我不能保证效果。如果你在其他版式上使用了这个组件，你可以在讨论区发个帖子告诉我它能否达到预期效果，后面有时间我试着给不行的版式做个适配版本。

源代码

+ open block- hide block
css
/* Sigma-9 动画化 */
/* Sigma-9 animated by Blanxers_lwwl14 */

/*================*/
/*网站标题*/
:where(#header > :nth-child(1)) {
    animation-name: main-title;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: backwards;
}

@keyframes main-title {
    0% {
    opacity: 0;
    transform:translate(0,-20px);
    }
    100% {
    opacity: 1;
    transform:translate(0,0);
    }
}
:where(#header > :nth-child(2)) {
    animation-name: sub-title;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: backwards;
}

@keyframes sub-title {
    0% {
    opacity: 0;
    transform:translate(0,20px);
    }
    100% {
    opacity: 1;
    transform:translate(0,0);
    }
}

/*=========================*/
/*网站徽标，等我再琢磨琢磨怎么从中间放大
#header {
    animation-name: logo-change;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: backwards;
}

@keyframes logo-change {
    0% {
        background-size: 0px 0px;
    }
    100% {
        background-size: 100px 100px;
    }
}
*/
/*=========================*/
/*隐藏搜索输入框，因为没用。*/
#search-top-box-input { display: none !important;}

/*如果以后有用了呢，有点想法，不过后面再来写这个*/
/*=========================*/
/*搜索*/
#search-top-box-form input[type=submit] {
    animation-name: search-top-box;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: backwards;
}

@keyframes search-top-box {
   0% {
   transform: scale(0,0);
   }
   100% {
   transform: scale(1,1);
   }
}

/*=======================*/
/*用户*/

#login-status {
    animation-name: login-status;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: backwards;
}

@keyframes login-status {
    0% {
        transform: translate(0,-30px) rotate3d(1,0,0,90deg);
    }
    100% {
        transform: translate(0,0) rotate3d(1,0,0,0deg);
    }
}

/*==================*/
/*顶栏*/

.top-bar,
.mobile-top-bar>ul {
    animation-name: top-bar;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: backwards;
}

@keyframes top-bar {
    0% {
        transform: rotate3d(1,0,0,90deg);
    }
    100% {
        transform: rotate3d(1,0,0,0deg);
    }
}

/*===============*/
/*侧边栏*/

:where(:root) {
  --side-bar-fade-in: side-bar-fadeIn;
  --side-bar-fade-in-delay: 0.5s;
}

@media (prefers-reduced-motion: no-preference) {
  :where(#side-bar > *) {
    animation-name: var(--side-bar-fade-in);
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: backwards;
  }
}

@keyframes side-bar-fadeIn {
  from {
    opacity: 0;
    transform: translate(-60px,0);
  }
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}

:where(#side-bar > :nth-child(1)) { animation-delay: calc(1 * var(--side-bar-fade-in-delay)); }
:where(#side-bar > :nth-child(2)) { animation-delay: calc(2 * var(--side-bar-fade-in-delay)); }
:where(#side-bar > :nth-child(3)) { animation-delay: calc(3 * var(--side-bar-fade-in-delay)); }
:where(#side-bar > :nth-child(4)) { animation-delay: calc(4 * var(--side-bar-fade-in-delay)); }
:where(#side-bar > :nth-child(5)) { animation-delay: calc(5 * var(--side-bar-fade-in-delay)); }
:where(#side-bar > :nth-child(6)) { animation-delay: calc(6 * var(--side-bar-fade-in-delay)); }
:where(#side-bar > :nth-child(7)) { animation-delay: calc(7 * var(--side-bar-fade-in-delay)); }
:where(#side-bar > :nth-child(8)) { animation-delay: calc(8 * var(--side-bar-fade-in-delay)); }
:where(#side-bar > :nth-child(9)) { animation-delay: calc(9 * var(--side-bar-fade-in-delay)); }
:where(#side-bar > :nth-child(10)) { animation-delay: calc(10 * var(--side-bar-fade-in-delay)); }
:where(#side-bar > :nth-child(n+10)) { animation-delay: calc(11 * var(--side-bar-fade-in-delay)); }

/*=================*/
/*页面内容渐显*/
/*代码来自 渐显 组件*/

:where(:root) {
  --fade-in: fadeIn;
  --fade-in-delay: 0.25s;
}

/* 中心页禁用，因为读者可能想从页面顶部以外的其他地方开始阅读 */
:root:has(#page-tags a[href*=中心]),
/* 带有目录的页面禁用，因为用户可能会直接跳转到他们想要开始阅读的地方 */
:root:has(#toc) {
  --fade-in: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  :where(#page-title, #breadcrumbs, #page-content > *) {
    animation-name: var(--fade-in);
    animation-duration: 0.8s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: backwards;
  }
}

:where(#page-title) { animation-delay: 0s; }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(0,30px);
  }
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}

:where(#page-content > :nth-child(1)) { animation-delay: calc(1 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(2)) { animation-delay: calc(2 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(3)) { animation-delay: calc(3 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(4)) { animation-delay: calc(4 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(5)) { animation-delay: calc(5 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(6)) { animation-delay: calc(6 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(7)) { animation-delay: calc(7 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(8)) { animation-delay: calc(8 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(9)) { animation-delay: calc(9 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(10)) { animation-delay: calc(10 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(11)) { animation-delay: calc(11 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(12)) { animation-delay: calc(12 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(13)) { animation-delay: calc(13 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(14)) { animation-delay: calc(14 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(15)) { animation-delay: calc(15 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(16)) { animation-delay: calc(16 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(17)) { animation-delay: calc(17 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(18)) { animation-delay: calc(18 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(19)) { animation-delay: calc(19 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(20)) { animation-delay: calc(20 * var(--fade-in-delay)); }
:where(#page-content > :nth-child(n+20)) { animation-delay: calc(21 * var(--fade-in-delay)); }

关于渐显的自定义

渐显禁用/参数修改如何让渐显更丝滑

此组件的代码相当简单，如果你会css就可以对其进行高度自定义，但如果你不会，这里展示了你该如何进行简单的自定义，所有自定义代码都应当被放在[[include xxxx]]语法之后。

组件内置了component:fade-in，可能会给一些使用者带来不友好的阅读体验，你可以通过下面的代码来禁用它2：

[[module CSS]]
:root {
  --fade-in: none;
}
[[/module]]

如果想要自定义渐显速度：
（注：这个数字改的是上一个元素经过多长时间后下一个元素开始渐显，默认0.25，不建议提高）

[[module ccs]]
:where(:root) {
  --fade-in-delay: 秒数s;
}
[[/module]]

侧边栏渐显也是类似：

[[module CSS]]
:root {
  --side-bar-fade-in: none;
}
[[/module]]

速度同理，默认0.5。

[[module ccs]]
:where(:root) {
  --side-bar-fade-in-delay: 秒数s;
}
[[/module]]
Footnotes
  1. 1.其实还夹杂了一点其他的东西。
  2. 2.注意：在有“[[toc]]”，或者标签有“中心”的页面中，会被自动禁用。
原创组件
页面版本：⁨0⁩, 最后编辑于: ⁨2025/10/25 12:31:38⁩ (⁨⁨326⁩ 日前⁩), 现时评分: 46
历史 附件 + 选项