#e8e8e8
1.three-body { 2 --uib-size: 35px; 3 --uib-speed: 0.8s; 4 --uib-color: #5D3FD3; 5 position: relative; 6 display: inline-block; 7 height: var(--uib-size); 8 width: var(--uib-size); 9 animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear; 10} 11 12.three-body__dot { 13 position: absolute; 14 height: 100%; 15 width: 30%; 16} 17 18.three-body__dot:after { 19 content: ''; 20 position: absolute; 21 height: 0%; 22 width: 100%; 23 padding-bottom: 100%; 24 background-color: var(--uib-color); 25 border-radius: 50%; 26} 27 28.three-body__dot:nth-child(1) { 29 bottom: 5%; 30 left: 0; 31 transform: rotate(60deg); 32 transform-origin: 50% 85%; 33} 34 35.three-body__dot:nth-child(1)::after { 36 bottom: 0; 37 left: 0; 38 animation: wobble1 var(--uib-speed) infinite ease-in-out; 39 animation-delay: calc(var(--uib-speed) * -0.3); 40} 41 42.three-body__dot:nth-child(2) { 43 bottom: 5%; 44 right: 0; 45 transform: rotate(-60deg); 46 transform-origin: 50% 85%; 47} 48 49.three-body__dot:nth-child(2)::after { 50 bottom: 0; 51 left: 0; 52 animation: wobble1 var(--uib-speed) infinite 53 calc(var(--uib-speed) * -0.15) ease-in-out; 54} 55 56.three-body__dot:nth-child(3) { 57 bottom: -5%; 58 left: 0; 59 transform: translateX(116.666%); 60} 61 62.three-body__dot:nth-child(3)::after { 63 top: 0; 64 left: 0; 65 animation: wobble2 var(--uib-speed) infinite ease-in-out; 66} 67 68@keyframes spin78236 { 69 0% { 70 transform: rotate(0deg); 71 } 72 73 100% { 74 transform: rotate(360deg); 75 } 76} 77 78@keyframes wobble1 { 79 0%, 80 100% { 81 transform: translateY(0%) scale(1); 82 opacity: 1; 83 } 84 85 50% { 86 transform: translateY(-66%) scale(0.65); 87 opacity: 0.8; 88 } 89} 90 91@keyframes wobble2 { 92 0%, 93 100% { 94 transform: translateY(0%) scale(1); 95 opacity: 1; 96 } 97 98 50% { 99 transform: translateY(66%) scale(0.65); 100 opacity: 0.8; 101 } 102} 103
7.8K views
7.8K views
Comments
MIT License