动画式渐显组件

著作信息

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

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

这是什么？

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

[[include :not-lord:component:ani]]

我没有实际测试过，不过我猜你也可以在几乎所有不具备动画的Sigma-9/Sigma-10版式中使用它，比如夜行版式，不过对于 Aero Glass 版式这种复杂的版式，我不能保证效果。
如果你在其他版式上使用了这个组件，你可以在中分原页面讨论区发个帖子告诉我它能否达到预期效果，后面有时间我试着给不行的版式做个适配版本。

源代码

+ show block

– hide block

/* 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,
.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) {
  --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，可能会给一些使用者带来不友好的阅读体验，你可以通过下面的代码来禁用它²：

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

组件

无主之地

此处皆为灰烬，静待复苏之时

著作信息

这是什么？

源代码

关于渐显的自定义