Loader by radwakhalil22
#212121
1.cube { 2 position: relative; 3 height: 100px; 4 width: 100px; 5 transform-style: preserve-3d; 6 animation: animate 4s linear infinite; 7} 8 9@keyframes animate { 10 0% { 11 transform: rotateX(-30deg) rotateY(0deg); 12 } 13 14 100% { 15 transform: rotateX(-30deg) rotateY(360deg); 16 } 17} 18 19.cube .div { 20 position: absolute; 21 top: 0; 22 left: 0; 23 width: 100%; 24 height: 100%; 25 transform-style: preserve-3d; 26} 27 28.cube .div .span { 29 position: absolute; 30 top: 0; 31 left: 0; 32 width: 100%; 33 height: 100%; 34 transform: rotateY(calc(90deg * var(--i))) translateZ(50px); 35 background-image: linear-gradient( 36 -45deg, 37 #000000, 38 #13273f, 39 #0d1729, 40 #6a6a8d); 41 background-size: 1200% 1200%; 42 animation: AnimationName 30s ease infinite; 43 display: flex; 44 justify-content: center; 45 align-items: center; 46 transform-style: preserve-3d; 47} 48 49.cube .div .span p { 50 position: absolute; 51 font-size: 1em; 52 color: white; 53 transform: translateZ(20px); 54} 55 56.cube .div .span p:nth-child(1) { 57 transform: translateZ(0) translateY(20px); 58 color: rgba(0,0,0,0.1); 59 filter: blur(2px); 60} 61 62@keyframes AnimationName { 63 0% { 64 background-position: 0% 50%; 65 } 66 67 50% { 68 background-position: 100% 50%; 69 } 70 71 100% { 72 background-position: 0% 50%; 73 } 74} 75 76.top { 77 position: absolute; 78 top: 0; 79 left: 0; 80 width: 300px; 81 height: 300px; 82 background-image: linear-gradient( 83 -45deg, 84 #000000, 85 #13273f, 86 #0d1729, 87 #6a6a8d); 88 transform: rotateX(90deg) translateZ(50px); 89 background-size: 1200% 1200%; 90 animation: AnimationName 30s ease infinite; 91} 92 93.top::before { 94 content: ''; 95 position: absolute; 96 top: 0; 97 left: 0; 98 width: 100px; 99 height: 100px; 100 background-image: linear-gradient( 101 -45deg, 102 #000000, 103 #0d0d0e, 104 #030303, 105 #000000); 106 background-size: 1200% 1200%; 107 animation: AnimationName 30s ease infinite; 108 box-shadow: 0 0 120px #3d413e,0 0 120px #302f2f,0 0 120px #413f3f; 109 transition: box-shadow 3s; 110 transform: translateZ(-200px); 111 filter: blur(40px); 112} 113 114@keyframes AnimationName2 { 115 0% { 116 background-position: 0% 50%; 117 } 118 119 50% { 120 background-position: 100% 50%; 121 } 122 123 100% { 124 background-position: 0% 50%; 125 } 126} 127 128
748 views
748 views
MIT License