注意
此页为于 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%; }}