#e8e8e8
1.spinner { 2 width: 44px; 3 height: 44px; 4 animation: spinner-y0fdc1 2s infinite ease; 5 transform-style: preserve-3d; 6} 7 8.spinner > div { 9 background-color: rgba(0,77,255,0.2); 10 height: 100%; 11 position: absolute; 12 width: 100%; 13 border: 2px solid #004dff; 14} 15 16.spinner div:nth-of-type(1) { 17 transform: translateZ(-22px) rotateY(180deg); 18} 19 20.spinner div:nth-of-type(2) { 21 transform: rotateY(-270deg) translateX(50%); 22 transform-origin: top right; 23} 24 25.spinner div:nth-of-type(3) { 26 transform: rotateY(270deg) translateX(-50%); 27 transform-origin: center left; 28} 29 30.spinner div:nth-of-type(4) { 31 transform: rotateX(90deg) translateY(-50%); 32 transform-origin: top center; 33} 34 35.spinner div:nth-of-type(5) { 36 transform: rotateX(-90deg) translateY(50%); 37 transform-origin: bottom center; 38} 39 40.spinner div:nth-of-type(6) { 41 transform: translateZ(22px); 42} 43 44@keyframes spinner-y0fdc1 { 45 0% { 46 transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); 47 } 48 49 50% { 50 transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); 51 } 52 53 100% { 54 transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); 55 } 56}
18K views
18K views
Comments
MIT License