#65c9fb
1.cube-loader { 2 position: relative; 3 width: 100px; 4 height: 100px; 5 transform-style: preserve-3d; 6 transform: rotateX(-30deg); 7 animation: animate 4s linear infinite; 8} 9 10@keyframes animate { 11 0% { 12 transform: rotateX(-30deg) rotateY(0); 13 } 14 15 100% { 16 transform: rotateX(-30deg) rotateY(360deg); 17 } 18} 19 20.cube-loader .cube-wrapper { 21 position: absolute; 22 width: 100%; 23 height: 100%; 24 transform-style: preserve-3d; 25} 26 27.cube-loader .cube-wrapper .cube-span { 28 position: absolute; 29 width: 100%; 30 height: 100%; 31 transform: rotateY(calc(90deg * var(--i))) translateZ(50px); 32 background: linear-gradient( 33 to bottom, 34 hsl(200, 80%, 50%) 0%, 35 hsl(200, 80%, 60%) 100% 36 ); 37} 38 39.cube-top { 40 position: absolute; 41 width: 100px; 42 height: 100px; 43 background: hsl(200, 80%, 50%); 44 transform: rotateX(90deg) translateZ(50px); 45 transform-style: preserve-3d; 46} 47 48.cube-top::before { 49 content: ''; 50 position: absolute; 51 width: 100px; 52 height: 100px; 53 background: hsl(200, 80%, 60%); 54 transform: translateZ(-100px); 55 filter: blur(10px); 56 box-shadow: 0 0 10px #333, 57 0 0 20px hsl(200, 80%, 60%), 58 0 0 30px #333, 59 0 0 40px hsl(200, 80%, 60%); 60}
Comments
MIT License