Loader by youngjid
#0f0f0f
1.glitch { 2 position: relative; 3 font-size: 60px; 4 font-weight: bold; 5 color: #ffffff; 6 letter-spacing: 3px; 7 z-index: 1; 8} 9 10.glitch:before, 11.glitch:after { 12 display: block; 13 content: attr(data-text); 14 position: absolute; 15 top: 0; 16 left: 0; 17 opacity: 0.8; 18} 19 20.glitch:before { 21 animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; 22 color: #00ffff; 23 z-index: -1; 24} 25 26.glitch:after { 27 animation: glitch-it 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both 28 infinite; 29 color: #ff00ff; 30 z-index: -2; 31} 32 33@keyframes glitch-it { 34 0% { 35 transform: translate(0); 36 } 37 20% { 38 transform: translate(-2px, 2px); 39 } 40 40% { 41 transform: translate(-2px, -2px); 42 } 43 60% { 44 transform: translate(2px, 2px); 45 } 46 80% { 47 transform: translate(2px, -2px); 48 } 49 to { 50 transform: translate(0); 51 } 52} 53
339 views
339 views
MIT License