CSS
【CSS】不気味な古い映画のような効果を作り出すEerie CSS
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; }