This post is saved as a draft.
#e8e8e8
1.glowing-cube { 2 position: relative; 3 width: 150px; 4 height: 150px; 5 transform-style: preserve-3d; 6 animation: cube-rotate 4s linear infinite; 7} 8 9@keyframes cube-rotate { 10 0% { 11 transform: rotatex(-30deg) rotatey(0deg); 12 } 13 14 100% { 15 transform: rotatex(-30deg) rotatey(360deg); 16 } 17} 18 19.glowing-cube div { 20 position: absolute; 21 inset: 0; 22 transform-style: preserve-3d; 23} 24 25.glowing-cube div span { 26 position: absolute; 27 inset: 0; 28 background: linear-gradient(#151515, #3aff5e); 29 transform: rotatey(calc(90deg * var(--i))) translatez(calc(150px / 2)); 30} 31 32.glowing-cube .top { 33 position: absolute; 34 inset: 0; 35 background: #222; 36 transform: rotatex(90deg) translatez(calc(150px / 2)); 37 display: flex; 38 justify-content: center; 39 align-items: center; 40 color: var(--top-font-color); 41 font-size: 7rem; 42} 43 44.glowing-cube .top::before { 45 content: ''; 46 position: absolute; 47 background: #3aff5e; 48 inset: 0; 49 transform: translatez(calc(0px - calc(150px + 100px))); 50 filter: blur(30px); 51 box-shadow: 0 0 120px rgba(58, 134, 255, 0.2), 52 0 0 200px rgba(58, 134, 255, 0.4), 53 0 0 300px #00ff2f, 54 0 0 400px #51fd71, 55 0 0 500px #3aff5e; 56}
Variation of aloader
Variation of aloader