BHL header动画 组件
Rating: +30
这是AI_MaycaAI_Mayca制作的用于给黑色标记笔添加header动画的组件。

⚠声明：该组件需搭配黑色标记笔一同生效，但不一定兼容所有BHL版式，还请在沙盒测试后再判断使用与否。

使用方法

将如下语句置于页面任意位置：

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:component:bhl-animation]]

范例预览


+ 展开源代码- 折叠源代码
css


/* BHL Header Animation
    [2022 Wikidot Component]
    By AI_Mayca
    Created for the SCP Foundation */

#header {
    background-image: none;
}
#header::before {
    content: '';
    width: var(--final-header-height-on-desktop);
    height: var(--final-header-height-on-desktop);
    background-image: var(--logo-image);
    background-position: left 0.75rem top 1.1875rem;
    background-size: auto calc(var(--header-height-on-desktop) - 2rem);
    background-repeat: no-repeat;
    animation: rotateImgAnim 5s ease-in-out;
    transform-origin: calc(var(--header-height-on-desktop)/2 - 0.25rem) calc(var(--header-height-on-desktop)/2 + 0.1875rem);
    position: absolute;
    z-index: 11;
}
@keyframes rotateImgAnim {
    0% {transform: rotate(90deg); opacity: 0}
    30% {transform: rotate(90deg); opacity: 0}
    45% {transform: rotate(0deg); opacity: 1}
    100% {transform: rotate(0deg); opacity: 1}
}
@media only screen and (max-width:56.25rem) {
    #header::before {
        --bg-posx-mb: calc(var(--header-height-on-mobile) - 0.75rem - var(--size));
        --bg-posy-mb: calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);
        width: var(--header-height-on-mobile);
        height: var(--header-height-on-mobile);
        background-position: calc(var(--header-height-on-mobile) - .75rem - var(--size)) calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);
        background-size: var(--size), 100% var(--header-height-on-mobile);
        background-repeat: no-repeat;
transform-origin: calc(var(--size)/2 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb));
    }
    @keyframes rotateImgAnim {
        0% {background-size: calc(var(--size) * 2/3); background-position:  calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform: rotate(90deg); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb)); opacity: 0}
        30% {transform: rotate(90deg); opacity: 0}
        45% {transform: rotate(0deg); opacity: 1}
        51% {background-position:  calc(var(--size)/3 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size) * 2/3 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb))}
        66% {background-size: calc(var(--size) * 2/3); background-position:  calc(var(--size)/6 + var(--bg-posx-mb)) calc(var(--size)/6 + var(--bg-posy-mb)); transform-origin: calc(var(--size)/2 + var(--bg-posx-mb)) calc(var(--size)/2 + var(--bg-posy-mb));}
        80% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb)}
        100% {background-size: var(--size); background-position: var(--bg-posx-mb) var(--bg-posy-mb); transform: rotate(0deg); opacity: 1}
    }
}
#header h1 {
    animation:anim_h1 5s ease-in-out;
}
#header h2 {
    animation:anim_h2 5s ease-in-out;
}
@keyframes anim_h1 {
    0% {opacity: 0}
    58% {margin-left: -50px; opacity: 0}
    73% {margin-left: 0; opacity: 1}
    100% {opacity: 1}
}
@keyframes anim_h2 {
    0% {opacity: 0}
    63% {margin-left: -50px; opacity: 0}
    78% {margin-left: 0; opacity: 1}
    100% {opacity: 1}
}

原创组件
页面版本：⁨0⁩, 最后编辑于: ⁨2022/12/12 17:00:23⁩ (⁨⁨1374⁩ 日前⁩), 现时评分: 30
历史 附件 + 选项