#212121
1.cubes { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform-style: preserve-3d; 6} 7 8.loop { 9 transform: rotateX(-35deg) rotateY(-45deg) translateZ(1.5625em); 10} 11 12@keyframes s { 13 to { 14 transform: scale3d(0.2, 0.2, 0.2); 15 } 16} 17 18.item { 19 margin: -1.5625em; 20 width: 3.125em; 21 height: 3.125em; 22 transform-origin: 50% 50% -1.5625em; 23 box-shadow: 0 0 0.125em currentColor; 24 background: currentColor; 25 animation: s 0.6s cubic-bezier(0.45, 0.03, 0.51, 0.95) infinite alternate; 26} 27 28.item:before, 29.item:after { 30 position: absolute; 31 width: inherit; 32 height: inherit; 33 transform-origin: 0 100%; 34 box-shadow: inherit; 35 background: currentColor; 36 content: ""; 37} 38 39.item:before { 40 bottom: 100%; 41 transform: rotateX(90deg); 42} 43 44.item:after { 45 left: 100%; 46 transform: rotateY(90deg); 47} 48 49.item:nth-child(1) { 50 margin-top: 6.25em; 51 color: #fe1e52; 52 animation-delay: -1.2s; 53} 54 55.item:nth-child(1):before { 56 color: #ff6488; 57} 58 59.item:nth-child(1):after { 60 color: #ff416d; 61} 62 63.item:nth-child(2) { 64 margin-top: 3.125em; 65 color: #fe4252; 66 animation-delay: -1s; 67} 68 69.item:nth-child(2):before { 70 color: #ff8892; 71} 72 73.item:nth-child(2):after { 74 color: #ff6572; 75} 76 77.item:nth-child(3) { 78 margin-top: 0em; 79 color: #fe6553; 80 animation-delay: -0.8s; 81} 82 83.item:nth-child(3):before { 84 color: #ffa499; 85} 86 87.item:nth-child(3):after { 88 color: #ff8476; 89} 90 91.item:nth-child(4) { 92 margin-top: -3.125em; 93 color: #fe8953; 94 animation-delay: -0.6s; 95} 96 97.item:nth-child(4):before { 98 color: #ffb999; 99} 100 101.item:nth-child(4):after { 102 color: #ffa176; 103} 104 105.item:nth-child(5) { 106 margin-top: -6.25em; 107 color: #feac54; 108 animation-delay: -0.4s; 109} 110 111.item:nth-child(5):before { 112 color: #ffce9a; 113} 114 115.item:nth-child(5):after { 116 color: #ffbd77; 117} 118 119.item:nth-child(6) { 120 margin-top: -9.375em; 121 color: #fed054; 122 animation-delay: -0.2s; 123} 124 125.item:nth-child(6):before { 126 color: #ffe49a; 127} 128 129.item:nth-child(6):after { 130 color: #ffda77; 131}
1.6K views
1.6K views
Comments
MIT License