January 20, 2018

Eerie CSSはちょっと古い映画のような効果のためのCSSのスタイリングとアニメーション。

Flicker Animation:

@keyframes bigshakes {
    0% {
        transform: translate(2px, -8px) rotate(-1deg);
    }
    50% {
        transform: translate(-9px, 10px) rotate(-18deg);
    }
    100% {
        transform: translate(6px, -2px) rotate(1deg);
    }
}

Shakewrap styling:

#shakewrap {
    z-index: 1;
    pointer-events: none;
    height: 100vmax;
    width: 120%;
    position: fixed;
    top: -20px;
    left: -20px;
    animation: bigshakes 0.1s linear infinite;
    opacity: 0.5;
    background-color: #111;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 1) 100%);
}

Shake animation:

@keyframes shakes {
    0% {
        transform: translate(2px, 1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 1px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(0deg);
    }
}

Hover styling:

a:hover {
    text-shadow: 0px 0px 18px rgba(255, 0, 0, 1);
    animation: shakes 0.1s linear infinite;
}

Glow animation:

@keyframes glow {
    0% {
        box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.5);
    }
    50% {
        box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.35);
    }
    100% {
        box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.5);
    }
}

Container styling for glow effect:

#container {
    box-shadow: 0px 0px 40px rgba(255, 255, 255, 0.5);
    animation: glow 3s linear infinite;
}