蟹召還

蟹召還CSS

[[module css]]
#header h2 span{
font-size:0px;
padding: 4px;
}
#header h2:after{
padding: 19px 0;
font-weight: bold;
color: #f0f0c0;
text-shadow: 1px 1px 1px #000;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
white-space: pre ;
content: "🦀🦀🦀🦀🦀🦀🦀🦀";
}
#login-status:before {
    content: "🦀";
    position: absolute;
    z-index: -1;
    font-size: 2em;
    -webkit-animation: jump2 4s linear 0s infinite alternate;
    animation: jump2 4s linear 0s infinite alternate;
}
 
#container-wrap-wrap {
    overflow-x: hidden;
}
 
#container:after {
    content: "🦀";
    position: absolute;
    top: 40px;
 
    font-size: 2em;
    -webkit-animation: jump 4s linear 0s infinite alternate-reverse;
    animation: jump 4s linear 0s infinite alternate-reverse;
}
 
#container:before {
    content: "🦀";
    position: absolute;
 
    top: 80px;
    font-size: 2em;
    -webkit-animation: jump 4s linear 0s infinite alternate;
    animation: jump 4s linear 0s infinite alternate;
}
 
@-webkit-keyframes jump {
    0% {
        transform: rotate(-10deg);
        left: -10vw;
    }
    5% {
        transform: rotate(10deg);
    }
    10% {
        transform: rotate(-10deg);
    }
    15% {
        transform: rotate(10deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    25% {
        transform: rotate(10deg);
    }
    30% {
        transform: rotate(-10deg);
    }
    35% {
        transform: rotate(10deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    45% {
        transform: rotate(10deg);
    }
    51% {
        transform: rotate(-10deg);
    }
    55% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(-10deg);
    }
    65% {
        transform: rotate(10deg);
    }
    70% {
        transform: rotate(-10deg);
    }
    76% {
        transform: rotate(10deg);
    }
    80% {
        transform: rotate(-10deg);
    }
    85% {
        transform: rotate(10deg);
    }
    90% {
        transform: rotate(-10deg);
    }
    96% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(-10deg);
        left: 100vw;
    }
}
 
@keyframes jump {
    0% {
        transform: rotate(-10deg);
        left: -10vw;
    }
    5% {
        transform: rotate(10deg);
    }
    10% {
        transform: rotate(-10deg);
    }
    15% {
        transform: rotate(10deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    25% {
        transform: rotate(10deg);
    }
    30% {
        transform: rotate(-10deg);
    }
    35% {
        transform: rotate(10deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    45% {
        transform: rotate(10deg);
    }
    51% {
        transform: rotate(-10deg);
    }
    55% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(-10deg);
    }
    65% {
        transform: rotate(10deg);
    }
    70% {
        transform: rotate(-10deg);
    }
    76% {
        transform: rotate(10deg);
    }
    80% {
        transform: rotate(-10deg);
    }
    85% {
        transform: rotate(10deg);
    }
    90% {
        transform: rotate(-10deg);
    }
    96% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(-10deg);
        left: 100vw;
    }
}
 
@-webkit-keyframes jump2 {
    0% {
        transform: rotate(-10deg);
        left: -10%;
    }
    5% {
        transform: rotate(10deg);
    }
    10% {
        transform: rotate(-10deg);
    }
    15% {
        transform: rotate(10deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    25% {
        transform: rotate(10deg);
    }
    30% {
        transform: rotate(-10deg);
    }
    35% {
        transform: rotate(10deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    45% {
        transform: rotate(10deg);
    }
    51% {
        transform: rotate(-10deg);
    }
    55% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(-10deg);
    }
    65% {
        transform: rotate(10deg);
    }
    70% {
        transform: rotate(-10deg);
    }
    76% {
        transform: rotate(10deg);
    }
    80% {
        transform: rotate(-10deg);
    }
    85% {
        transform: rotate(10deg);
    }
    90% {
        transform: rotate(-10deg);
    }
    96% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(-10deg);
        left: 100%;
    }
}
 
@keyframes jump2 {
    0% {
        transform: rotate(-10deg);
        left: -10%;
    }
    5% {
        transform: rotate(10deg);
    }
    10% {
        transform: rotate(-10deg);
    }
    15% {
        transform: rotate(10deg);
    }
    20% {
        transform: rotate(-10deg);
    }
    25% {
        transform: rotate(10deg);
    }
    30% {
        transform: rotate(-10deg);
    }
    35% {
        transform: rotate(10deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    45% {
        transform: rotate(10deg);
    }
    51% {
        transform: rotate(-10deg);
    }
    55% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(-10deg);
    }
    65% {
        transform: rotate(10deg);
    }
    70% {
        transform: rotate(-10deg);
    }
    76% {
        transform: rotate(10deg);
    }
    80% {
        transform: rotate(-10deg);
    }
    85% {
        transform: rotate(10deg);
    }
    90% {
        transform: rotate(-10deg);
    }
    96% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(-10deg);
        left: 100%;
    }
}
[[/module]]