Back
Loader
1 2<div class="ai-matrix-loader"> 3 <div class="digit">0</div> 4 <div class="digit">1</div> 5 <div class="digit">0</div> 6 <div class="digit">1</div> 7 <div class="digit">1</div> 8 <div class="digit">0</div> 9 <div class="digit">0</div>10 <div class="digit">1</div>11 <div class="glow"></div>12</div>
1 2.ai-matrix-loader { 3 width: 120px; 4 height: 160px; 5 margin: 30px auto; 6 position: relative; 7 perspective: 800px; 8 display: grid; 9 grid-template-columns: repeat(3, 1fr); 10 gap: 5px; 11} 12 13.digit { 14 color: #00ff88; 15 font-family: monospace; 16 font-size: 18px; 17 text-align: center; 18 text-shadow: 0 0 5px #00ff88; 19 animation: 20 matrix-fall 2s infinite, 21 matrix-flicker 0.5s infinite; 22 opacity: 0; 23} 24 25.digit:nth-child(1) { 26 animation-delay: 0.1s; 27} 28.digit:nth-child(2) { 29 animation-delay: 0.3s; 30} 31.digit:nth-child(3) { 32 animation-delay: 0.5s; 33} 34.digit:nth-child(4) { 35 animation-delay: 0.7s; 36} 37.digit:nth-child(5) { 38 animation-delay: 0.9s; 39} 40.digit:nth-child(6) { 41 animation-delay: 1.1s; 42} 43.digit:nth-child(7) { 44 animation-delay: 1.3s; 45} 46.digit:nth-child(8) { 47 animation-delay: 1.5s; 48} 49 50.glow { 51 position: absolute; 52 top: 0; 53 left: 0; 54 right: 0; 55 bottom: 0; 56 background: radial-gradient( 57 circle, 58 rgba(0, 255, 136, 0.1) 0%, 59 transparent 70% 60 ); 61 animation: matrix-pulse 2s infinite; 62} 63 64@keyframes matrix-fall { 65 0% { 66 transform: translateY(-50px) rotateX(90deg); 67 opacity: 0; 68 } 69 20%, 70 80% { 71 transform: translateY(0) rotateX(0deg); 72 opacity: 0.8; 73 } 74 100% { 75 transform: translateY(50px) rotateX(-90deg); 76 opacity: 0; 77 } 78} 79 80@keyframes matrix-flicker { 81 0%, 82 19%, 83 21%, 84 100% { 85 opacity: 0.8; 86 } 87 20% { 88 opacity: 0.2; 89 } 90} 91 92@keyframes matrix-pulse { 93 0%, 94 100% { 95 opacity: 0.3; 96 } 97 50% { 98 opacity: 0.7; 99 }100}
MIT License