ACS动画

注意


此页为于 SCP 维基内部使用的"组件"页。用于在其他页面中引用。

未经组件作者或工作人员允许,请勿修改此页的内容。


这是一个给ACS版头 加上加载动画的组件。

如何使用:

把这个放在文章的任意位置:

[[include :scp-wiki-cn:component:acs-animation]]

然后就完成了!

例子:SCP-5935


注意

- 有两个变量,--timeScale--timeDelay,控制着动画的时序。举例:

[[module CSS]]
:root {
--timeScale: 2;
--timeDelay: 0.5s;
}
[[/module]]

--timeScale能把整个动画速度放慢至原来的1⁄2,而--timeDelay会将动画的起始点延迟半秒。默认的值分别为1和0秒。

若需改变默认值,需将以上的代码放到[[include]]的后面。若ACS不是第一个页面元素,或者你想要与其它动画模组(仿照渐显 )一同使用,则推荐设置一个--timeDelay

- 似乎与其它种类的ACS版头*不兼容。

*若要与PeppersGhost PeppersGhost 小型化ACS一同使用,在[[include]]后面加上如下补丁:

[[module CSS]]
/*-- 小型化ACS动画适应性补丁 --*/
.anom-bar > .bottom-box::before { display: none; }
.anom-bar > .bottom-box { box-shadow: none!important; }
div.diamond-part { clip-path: none; animation: none; box-shadow: none!important; }
@media (max-width: 480px) {
div.top-right-box { clip-path: polygon(0% -30%, 100% -30%, 100% 130%, 0% 130%); }
}
[[/module]]

- 作品灵感来自于AnAnomalousWriter AnAnomalousWriter


源代码:

:root{
 --timeScale:1;
 --timeDelay:0s;
}
 
/*Convertingmiddledividerfrombox-shadowto ::beforepseudo-element*/
.anom-bar > div.bottom-box{box-shadow:none; position:relative; }.anom-bar > div.bottom-box::before{position:absolute;
 content: " ";
 width:100%;
 height:0.5rem;
 bottom:100%; left:0;
 background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));
}
 
/*DIVIDER*/
.anom-bar > .bottom-box::before{animation-name: divider;
 animation-duration: calc(0.74s * var(--timeScale));
 animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.32,.38,.39,.94);
 animation-fill-mode: backwards;
}
 
/*CLASSIFIEDLEVELBARS*/
div.top-center-box > *{animation-name: bar;
 animation-duration: calc(0.45s * var(--timeScale));
 animation-iteration-count:1;
 animation-timing-function: ease-out;
 animation-fill-mode: backwards;
}div.top-center-box > :nth-child(1) {animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(2) {animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(3) {animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(4) {animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(5) {animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(6) {animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); }
 
/*TOPTEXT*/
div.top-left-box, div.top-right-box{clip-path: polygon( 0% -50%, 150% -50%, 150%100%, 0%100%);
}div.top-left-box > *, div.top-right-box > *{position:relative;
 animation-name: bottomup;
 animation-duration: calc(0.65s * var(--timeScale));
 animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: ease-out;
 animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/*CONTAINMENT, DISRUPTION, RISKCLASSES*/
div.text-part > *{clip-path: polygon( 0%0%, 100%0%, 100%100%, 0%100%);
 animation-name: expand2;
 animation-duration: calc(0.5s * var(--timeScale));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}div.text-part > :nth-child(1) {animation-name: expand1;
}div.text-part > :nth-child(1) {animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }div.text-part > :nth-child(2) {animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }div.text-part > :nth-child(3) {animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); }div.main-class::before, div.main-class::after{animation-name: iconslide;
 animation-duration: calc(0.45s * var(--timeScale));
 animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}
 /*BOTTOMTEXT*/
div.main-class > *, div.disrupt-class > *, div.risk-class > *{white-space:nowrap;
 animation-name: flowIn;
 animation-duration: calc(0.42s * var(--timeScale));
 animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: ease-out;
 animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/*DIAMOND*/
div.arrows{animation-name: arrowspin;
 animation-duration: calc(0.65s * var(--timeScale));
 animation-delay: calc(0.55s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}div.quadrants > *{animation-name: fade;
 animation-duration: calc(0.3s * var(--timeScale));
 animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}div.top-icon, div.right-icon, div.left-icon, div.bottom-icon{animation-name: nodegrow;
 animation-duration: calc(0.4s * var(--timeScale));
 animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}.bottom-box > div.diamond-part{box-shadow:none;
}.bottom-box > div.diamond-part::before{content: "";
 position:absolute;
 width:0.5rem; height:100%;
 top:0; right:100%;
 background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));
 animation-name: diamondBorder;
 animation-duration: calc(0.475s * var(--timeScale));
 animation-delay: calc(0.775s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.28,.72,.55,.91);
 animation-fill-mode: backwards;
}
 
/*MOBILEQUERY*/
@media (max-width: 480px ) {.anom-bar > div.bottom-box{position: initial; }.anom-bar > div.bottom-box::before{bottom: initial; top:40vw; }div.top-center-box > *{animation-name: bar-mobile;
 animation-duration: calc(0.9s * var(--timeScale));
 }div.top-center-box > :nth-child(1) {animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(2) {animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(3) {animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(4) {animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(5) {animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(6) {animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }}
 
/*--- MotionAccessibility ---*/
@mediascreenand (prefers-reduced-motion: reduce) {div.anom-bar-container{ --timeScale:0!important; }}
 
/*-------------------------*/
 
@keyframesdivider{from{max-width:0%; }to{max-width:100%; }}@keyframesbar{from{max-width:0%; }to{max-width:100%; }}@keyframesbar-mobile{from{max-height:0%; }to{max-height:100%; }}@keyframesbottomup{from{top:100px; }to{top:0; }}@keyframesexpand1{from{opacity:0; clip-path:inset(0 calc(100% - 0.75rem) 00); }to{opacity:1; clip-path:inset(0); }}@keyframesiconslide{from{opacity:0; transform: translateX(-5rem); }to{opacity:1; transform: translateX(0); }}@keyframesexpand2{from{opacity:0; width:1%; }to{opacity:1; width: calc(100% - 0.25rem); }}@keyframesfade{from{opacity:0; }to{opacity:1; }}@keyframesflowIn{from{opacity:0; transform: translateY(20px); }to{opacity:1; transform: translateY(0); }}@keyframesarrowspin{from{clip-path:circle(0%); transform: rotate(135deg); }to{clip-path:circle(75%); transform: rotate(0deg); }}@keyframesnodegrow{from{transform: scale(0);}to{transform: scale(1);}}@keyframesdiamondBorder{from{height:0; }to{height:100%; }}
页面版本: 6, 最后编辑于: 10 Dec 2023 13:06
除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License
点击编辑本页内容。
点击显示页面各部分的编辑按钮(如果可能)。 在标题边会出现"编辑"按钮。
在不编辑全部页面源代码的情况下添加内容。
查看本页过去是如何沿革的。
若您想要讨论本页内容,这是最简单的方法。
检视并管理本页附件。
管理网站的实用工具。
变更页面名称(及 URL 地址,或许会影响分类)。
在不编辑的情形下检视维基源代码。
检视 / 设定父页面(用以建立浏览足迹与结构化​​配置)。
向管理员举报本页有令人反感的内容。
事情不如预期?看看您可以做些什么。
通用的 Wikidot.com 文件与说明。
Wikidot.com 服务条款 — 您可以做的事,您不该做的事之类的。
Wikidot.com 隐私政策。

AltStyle によって変換されたページ (->オリジナル) /