动画式渐显 组件

[[module css]]
@import url('https://scp-wiki-cn.wikidot.com/component:sigma-9-ani/code/1');
[[/module]]

[[iftags +组件]]
[[include :scp-wiki-cn:credit:start]]
刚学了一点css基础就跑来做的东西，技术含量很低，不过也算圆了我做组件的梦。

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

这是一个由[[*user Blanxers_lwwl14]]整合/制作的Sigma-9动画化补丁[[footnote]]其实还夹杂了一点其他的东西。[[/footnote]]，你可以通过下方的代码导入此组件。
> {{[[include :scp-wiki-cn:component:sigma-9-ani]]}}

我没有实际测试过，不过我猜你也可以在几乎所有不具备动画的Sigma-9/Sigma-10版式中使用它，比如[[[theme:night-rush-theme|]]]，不过对于[[[theme:aero-glass|]]]这种复杂的版式，我不能保证效果。
**如果你在其他版式上使用了这个组件，你可以在讨论区发个帖子告诉我它能否达到预期效果，后面有时间我试着给不行的版式做个适配版本。**
------
+ 源代码
[[collapsible]]
[[code type="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);
    }
}
 
/*=========================*/
/*隐藏搜索输入框，因为没用。*/
#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 {
    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: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    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-out;
    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)); }
[[/code]]
[[/collapsible]]
------
+ 关于渐显的自定义

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

组件内置了[[[component:fade-in|]]]，可能会给一些使用者带来不友好的阅读体验，你可以通过下面的代码来禁用它[[footnote]]注意：在有“@@[[toc]]@@”，或者标签有“中心”的页面中，会被自动禁用。[[/footnote]]：
[[code]]
[[module CSS]]
:root {
  --fade-in: none;
}
[[/module]]
[[/code]]
如果想要自定义渐显速度：
（注：这个数字改的是上一个元素经过多长时间后下一个元素开始渐显，默认0.25，不建议提高）
[[code]]
[[module ccs]]
:where(:root) {
  --fade-in-delay: 秒数s;
}
[[/module]]
[[/code]]
侧边栏渐显也是类似：
[[code]]
[[module CSS]]
:root {
  --side-bar-fade-in: none;
}
[[/module]]
[[/code]]
速度同理，默认0.5。
[[code]]
[[module ccs]]
:where(:root) {
  --side-bar-fade-in-delay: 秒数s;
}
[[/module]]
[[/code]]

[[html]]
<img src="https://scpper.mer.run/api/tracking/pixel/by-url?url=component:sigma-9-ani"
alt="" width="1" height="1" style="display:none" />
[[/html]]

[!-- SCPPER_CN_PREVIEW_BEGIN{这是一个Sigma-9动画化补丁，可以在几乎所有不具备动画的Sigma-9/Sigma-10版式中使用它}SCPPER_CN_PREVIEW_END --]

[[/iftags]]