275 views
1.loader { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 height: 100%; 6} 7 8.cube { 9 position: relative; 10 width: 50px; 11 height: 50px; 12 transform-style: preserve-3d; 13 animation: rotate-cube 2s infinite; 14} 15 16.face1, 17.face2, 18.face3, 19.face4, 20.face5, 21.face6 { 22 position: absolute; 23 width: 50px; 24 height: 50px; 25 background-color: transparent; 26 border: 2px solid #00BFFF; 27 box-sizing: border-box; 28} 29 30.face1 { 31 transform: rotateY(0deg) translateZ(25px); 32 animation: change-color 2s infinite; 33} 34 35.face2 { 36 transform: rotateX(90deg) translateZ(25px); 37} 38 39.face3 { 40 transform: rotateY(90deg) translateZ(25px); 41 animation: change-color 2s infinite; 42} 43 44.face4 { 45 transform: rotateY(180deg) translateZ(25px); 46 animation: change-color 2s infinite; 47} 48 49.face5 { 50 transform: rotateX(-90deg) translateZ(25px); 51} 52 53.face6 { 54 transform: rotateY(-90deg) translateZ(25px); 55 animation: change-color 2s infinite; 56} 57 58@keyframes rotate-cube { 59 from { 60 transform: rotateX(0deg) rotateY(0deg); 61 } 62 63 to { 64 transform: rotateX(360deg) rotateY(360deg); 65 } 66} 67 68@keyframes change-color { 69 0% { 70 background-color: #00BFFF; 71 } 72 73 25% { 74 background-color: #FF1493; 75 } 76 77 50% { 78 background-color: #32CD32; 79 } 80 81 75% { 82 background-color: #FFA500; 83 } 84 85 100% { 86 background-color: #00BFFF; 87 } 88} 89
MIT License