#e8e8e8
1.section-center { 2 position: absolute; 3 top: 50%; 4 left: 0; 5 z-index: 10; 6 transform: translateY(-50%); 7 width: 100%; 8 margin: 0 auto; 9 text-align: center; 10 -webkit-transition: all 500ms linear; 11 transition: all 500ms linear; 12} 13 14.section-path { 15 position: relative; 16 width: 238px; 17 height: 76px; 18 border-radius: 35px; 19 margin: 0 auto; 20 text-align: center; 21 background-color: #e6e6e6; 22 box-shadow: inset -2px 20px 10px 0 rgba(0,0,0,.06), 23 inset -2px 30px 10px 0 rgba(0,0,0,.04); 24 border: 3px groove rgba(225,225,225,0.07); 25 overflow: hidden; 26 -webkit-transition: all 300ms linear; 27 transition: all 300ms linear; 28} 29 30.globe { 31 position: relative; 32 width: 66px; 33 height: 66px; 34 overflow: hidden; 35 margin-top: 2px; 36 margin-left: 2px; 37 border-radius: 50%; 38 box-shadow: 0 10px 40px rgba(0,0,0,0.65); 39 animation: rotateBall 4s ease infinite; 40 -webkit-transition: all 300ms linear; 41 transition: all 300ms linear; 42} 43 44@keyframes rotateBall { 45 0% { 46 transform: translateX(0); 47 } 48 49 50% { 50 transform: translateX(162px); 51 } 52 53 100% { 54 transform: translateX(0); 55 } 56} 57 58.globe:after { 59 position: absolute; 60 width: 5px; 61 height: 12px; 62 background-color: rgba(255, 255, 255, 0.1); 63 content: ''; 64 left: 40px; 65 top: 15px; 66 border-radius: 50%; 67 z-index: 2; 68 box-shadow: 0 0 14px 7px rgba(255, 255, 255, 0.1); 69} 70 71.globe:before { 72 position: absolute; 73 width: 100%; 74 height: 100%; 75 content: ''; 76 left: 0; 77 top: 0; 78 border-radius: 50%; 79 z-index: 1; 80 box-shadow: inset 0 0 15px #1a252f; 81 opacity: 0.4; 82 -webkit-transition: all 300ms linear; 83 transition: all 300ms linear; 84} 85 86.globe .wrapper { 87 position: absolute; 88 width: 528px; 89 height: 528px; 90 top: 0; 91 left: -462px; 92 animation: moveBall 4s ease infinite; 93} 94 95@keyframes moveBall { 96 0% { 97 left: -462px; 98 } 99 100 50% { 101 left: 0; 102 } 103 104 100% { 105 left: -462px; 106 } 107} 108 109.globe .wrapper span { 110 position: absolute; 111 width: 33px; 112 height: 528px; 113 top: 0; 114 left: 0; 115 background-color: #5c477d; 116 box-shadow: inset 0 0 25px #5c487c; 117} 118 119.globe .wrapper span:nth-child(2) { 120 left: 33px; 121 background-color: #503e6d; 122} 123 124.globe .wrapper span:nth-child(3) { 125 left: 66px; 126} 127 128.globe .wrapper span:nth-child(4) { 129 left: 99px; 130 background-color: #503e6d; 131} 132 133.globe .wrapper span:nth-child(5) { 134 left: 132px; 135} 136 137.globe .wrapper span:nth-child(6) { 138 left: 165px; 139 background-color: #503e6d; 140} 141 142.globe .wrapper span:nth-child(7) { 143 left: 198px; 144} 145 146.globe .wrapper span:nth-child(8) { 147 left: 231px; 148 background-color: #503e6d; 149} 150 151.globe .wrapper span:nth-child(9) { 152 left: 264px; 153} 154 155.globe .wrapper span:nth-child(10) { 156 left: 297px; 157 background-color: #503e6d; 158} 159 160.globe .wrapper span:nth-child(11) { 161 left: 330px; 162} 163 164.globe .wrapper span:nth-child(12) { 165 left: 363px; 166 background-color: #503e6d; 167} 168 169.globe .wrapper span:nth-child(13) { 170 left: 396px; 171} 172 173.globe .wrapper span:nth-child(14) { 174 left: 429px; 175 background-color: #503e6d; 176} 177 178.globe .wrapper span:nth-child(15) { 179 left: 462px; 180} 181 182.globe .wrapper span:nth-child(16) { 183 left: 495px; 184 background-color: #503e6d; 185} 186 187#switch, 188#circle { 189 cursor: pointer; 190 -webkit-transition: all 300ms linear; 191 transition: all 300ms linear; 192} 193 194#switch { 195 width: 70px; 196 height: 8px; 197 margin: 0 auto; 198 text-align: center; 199 border: 2px solid #8167a9; 200 border-radius: 27px; 201 background: #000; 202 position: relative; 203 display: inline-block; 204 margin-top: 40px; 205 margin-bottom: 20px; 206} 207 208#circle { 209 position: absolute; 210 top: -11px; 211 left: 5px; 212 width: 26px; 213 height: 26px; 214 border-radius: 50%; 215 box-shadow: 0 4px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,53,71,0.07); 216 background: #000; 217} 218 219.switched { 220 border-color: #000 !important; 221 background: #8167a9 !important; 222} 223 224.switched #circle { 225 left: 35px; 226 background: #fff; 227} 228 229.section-center p span { 230 position: relative; 231 padding: 4px 10px; 232 margin: 0 5px; 233} 234 235.section-center p span:before { 236 position: absolute; 237 content: ''; 238 width: 100%; 239 height: 100%; 240 border-radius: 4px; 241 background-color: #8167a9; 242 box-shadow: 0 2px 4px rgba(0,0,0,0.25); 243 left: 0; 244 top: 0; 245 z-index: -1; 246 -webkit-transition: all 300ms linear; 247 transition: all 300ms linear; 248} 249 250.section-center p span:after { 251 position: absolute; 252 content: ''; 253 width: calc(100% - 10px); 254 height: 2px; 255 border-radius: 4px; 256 background-color: #fff; 257 left: 5px; 258 top: 50%; 259 z-index: 1; 260 -webkit-transition: all 300ms linear; 261 transition: all 300ms linear; 262} 263 264.section-center p span:nth-child(2):after { 265 opacity: 0; 266}
15K views
15K views
Comments
Variations
1 MIT License