ACS 動畫
您正在查詢的標題為：關注組織
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：機動特遣隊
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：基金會設施
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：員工與角色檔案
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：世界線中心頁
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：系列檔案室
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：競賽資料庫
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：異常物品紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：超常事件紀錄
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：未解明地點列表
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您正在查詢的標題為：基金會故事
在多個資料庫中發現符合該標題的文件
請選擇欲查詢的資料來源，或按此取消
繁中原創
主站翻譯
俄文分部
韓文分部
中國分部
法文分部
波蘭分部
西語分部
泰文分部
日文分部
德文分部
義語分部
烏克蘭分部
葡語分部
捷克分部
越南分部
您現在最好給我停下來
本頁面內包含基金會維基內部使用的模板。
嚴禁任何人員在未經網站行政人員
之授權下修訂本頁面
這個組件是ACS標題的加載動畫。
使用方法:
把這段放在你的文章中的任意位置：
[[include :scp-zh-tr:component:acs-animation]]
便大功告成了！
例子： scp-5935
說明：
- 變項--timeScale和--timeDelay，二者控制了動畫播放的時間，舉例來說：
[[module CSS]]
:root {
--timeScale: 2;
--timeDelay: 0.5s;
}
[[/module]]
--timeScale會把整個動畫放慢2倍，而--timeDelay會把動畫開始時間延後半秒。預設值分別是 1 和 0s 。
把上面的代碼放在[[include]]的後面，便可以更改預設值。如果ACS標題不是內文的第一個元素,又或者你想把這個連接上其他動畫模組的話（參照淡入。），這就建議你更改一下--timeDelay。
- 很可能和其他的ACS標題不相容*。
*要使用PeppersGhost的ACS精簡版的話，把下面的補釘加在 [[include]]的後面：
[[module CSS]]
/*-- ACS Lite Animation Compatibility Patch --*/
.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啟發。
原始碼:
:root { --timeScale: 1; --timeDelay: 0s; } /* Converting middle divider from box-shadow to ::before pseudo-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; } /* CLASSIFIED LEVEL BARS */ 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)); } /* TOP TEXT */ 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, RISK CLASSES */ 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; } /* BOTTOM TEXT */ 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; } /* MOBILE QUERY */ @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)); } } /*--- Motion Accessibility ---*/ @media screen and (prefers-reduced-motion: reduce) { div.anom-bar-container { --timeScale: 0!important; } } /*-------------------------*/ @keyframes divider { from { max-width: 0%; } to { max-width: 100%; } } @keyframes bar { from { max-width: 0%; } to { max-width: 100%; } } @keyframes bar-mobile { from { max-height: 0%; } to { max-height: 100%; } } @keyframes bottomup { from { top: 100px; } to { top: 0; } } @keyframes expand1 { from { opacity: 0; clip-path: inset(0 calc(100% - 0.75rem) 0 0); } to { opacity: 1; clip-path: inset(0); } } @keyframes iconslide { from { opacity: 0; transform: translateX(-5rem); } to { opacity: 1; transform: translateX(0); } } @keyframes expand2 { from { opacity: 0; width: 1%; } to { opacity: 1; width: calc(100% - 0.25rem); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes flowIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes arrowspin { from { clip-path: circle(0%); transform: rotate(135deg); } to { clip-path: circle(75%); transform: rotate(0deg); } } @keyframes nodegrow { from { transform: scale(0);} to { transform: scale(1);} } @keyframes diamondBorder { from { height: 0; } to { height: 100%; } }