#e8e8e8
1.chaotic-orbit { 2 --uib-size: 25px; 3 --uib-speed: 1.5s; 4 --uib-color: black; 5 position: relative; 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 height: var(--uib-size); 10 width: var(--uib-size); 11 animation: rotate936 calc(var(--uib-speed) * 1.667) infinite linear; 12} 13 14.chaotic-orbit::before, 15.chaotic-orbit::after { 16 content: ''; 17 position: absolute; 18 height: 60%; 19 width: 60%; 20 border-radius: 50%; 21 background-color: var(--uib-color); 22 will-change: transform; 23 flex-shrink: 0; 24} 25 26.chaotic-orbit::before { 27 animation: orbit var(--uib-speed) linear infinite; 28} 29 30.chaotic-orbit::after { 31 animation: orbit var(--uib-speed) linear calc(var(--uib-speed) / -2) 32 infinite; 33} 34 35@keyframes rotate936 { 36 0% { 37 transform: rotate(0deg); 38 } 39 40 100% { 41 transform: rotate(360deg); 42 } 43} 44 45@keyframes orbit { 46 0% { 47 transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684); 48 opacity: 0.65; 49 } 50 51 5% { 52 transform: translate(calc(var(--uib-size) * 0.4)) scale(0.684208); 53 opacity: 0.58; 54 } 55 56 10% { 57 transform: translate(calc(var(--uib-size) * 0.3)) scale(0.631576); 58 opacity: 0.51; 59 } 60 61 15% { 62 transform: translate(calc(var(--uib-size) * 0.2)) scale(0.578944); 63 opacity: 0.44; 64 } 65 66 20% { 67 transform: translate(calc(var(--uib-size) * 0.1)) scale(0.526312); 68 opacity: 0.37; 69 } 70 71 25% { 72 transform: translate(0%) scale(0.47368); 73 opacity: 0.3; 74 } 75 76 30% { 77 transform: translate(calc(var(--uib-size) * -0.1)) scale(0.526312); 78 opacity: 0.37; 79 } 80 81 35% { 82 transform: translate(calc(var(--uib-size) * -0.2)) scale(0.578944); 83 opacity: 0.44; 84 } 85 86 40% { 87 transform: translate(calc(var(--uib-size) * -0.3)) scale(0.631576); 88 opacity: 0.51; 89 } 90 91 45% { 92 transform: translate(calc(var(--uib-size) * -0.4)) scale(0.684208); 93 opacity: 0.58; 94 } 95 96 50% { 97 transform: translate(calc(var(--uib-size) * -0.5)) scale(0.73684); 98 opacity: 0.65; 99 } 100 101 55% { 102 transform: translate(calc(var(--uib-size) * -0.4)) scale(0.789472); 103 opacity: 0.72; 104 } 105 106 60% { 107 transform: translate(calc(var(--uib-size) * -0.3)) scale(0.842104); 108 opacity: 0.79; 109 } 110 111 65% { 112 transform: translate(calc(var(--uib-size) * -0.2)) scale(0.894736); 113 opacity: 0.86; 114 } 115 116 70% { 117 transform: translate(calc(var(--uib-size) * -0.1)) scale(0.947368); 118 opacity: 0.93; 119 } 120 121 75% { 122 transform: translate(0%) scale(1); 123 opacity: 1; 124 } 125 126 80% { 127 transform: translate(calc(var(--uib-size) * 0.1)) scale(0.947368); 128 opacity: 0.93; 129 } 130 131 85% { 132 transform: translate(calc(var(--uib-size) * 0.2)) scale(0.894736); 133 opacity: 0.86; 134 } 135 136 90% { 137 transform: translate(calc(var(--uib-size) * 0.3)) scale(0.842104); 138 opacity: 0.79; 139 } 140 141 95% { 142 transform: translate(calc(var(--uib-size) * 0.4)) scale(0.789472); 143 opacity: 0.72; 144 } 145 146 100% { 147 transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684); 148 opacity: 0.65; 149 } 150} 151 152
1.3K views
1.3K views
Comments
MIT License