6.4K views
1.socket { 2 width: 200px; 3 height: 200px; 4 position: absolute; 5 left: 50%; 6 margin-left: -100px; 7 top: 50%; 8 margin-top: -100px; 9} 10 11.hex-brick { 12 background: #000000; 13 width: 30px; 14 height: 17px; 15 position: absolute; 16 top: 5px; 17 animation-name: fade00; 18 animation-duration: 2s; 19 animation-iteration-count: infinite; 20 -webkit-animation-name: fade00; 21 -webkit-animation-duration: 2s; 22 -webkit-animation-iteration-count: infinite; 23} 24 25.h2 { 26 transform: rotate(60deg); 27 -webkit-transform: rotate(60deg); 28} 29 30.h3 { 31 transform: rotate(-60deg); 32 -webkit-transform: rotate(-60deg); 33} 34 35.gel { 36 height: 30px; 37 width: 30px; 38 transition: all .3s; 39 -webkit-transition: all .3s; 40 position: absolute; 41 top: 50%; 42 left: 50%; 43} 44 45.center-gel { 46 margin-left: -15px; 47 margin-top: -15px; 48 animation-name: pulse00; 49 animation-duration: 2s; 50 animation-iteration-count: infinite; 51 -webkit-animation-name: pulse00; 52 -webkit-animation-duration: 2s; 53 -webkit-animation-iteration-count: infinite; 54} 55 56.c1 { 57 margin-left: -47px; 58 margin-top: -15px; 59} 60 61.c2 { 62 margin-left: -31px; 63 margin-top: -43px; 64} 65 66.c3 { 67 margin-left: 1px; 68 margin-top: -43px; 69} 70 71.c4 { 72 margin-left: 17px; 73 margin-top: -15px; 74} 75 76.c5 { 77 margin-left: -31px; 78 margin-top: 13px; 79} 80 81.c6 { 82 margin-left: 1px; 83 margin-top: 13px; 84} 85 86.c7 { 87 margin-left: -63px; 88 margin-top: -43px; 89} 90 91.c8 { 92 margin-left: 33px; 93 margin-top: -43px; 94} 95 96.c9 { 97 margin-left: -15px; 98 margin-top: 41px; 99} 100 101.c10 { 102 margin-left: -63px; 103 margin-top: 13px; 104} 105 106.c11 { 107 margin-left: 33px; 108 margin-top: 13px; 109} 110 111.c12 { 112 margin-left: -15px; 113 margin-top: -71px; 114} 115 116.c13 { 117 margin-left: -47px; 118 margin-top: -71px; 119} 120 121.c14 { 122 margin-left: 17px; 123 margin-top: -71px; 124} 125 126.c15 { 127 margin-left: -47px; 128 margin-top: 41px; 129} 130 131.c16 { 132 margin-left: 17px; 133 margin-top: 41px; 134} 135 136.c17 { 137 margin-left: -79px; 138 margin-top: -15px; 139} 140 141.c18 { 142 margin-left: 49px; 143 margin-top: -15px; 144} 145 146.c19 { 147 margin-left: -63px; 148 margin-top: -99px; 149} 150 151.c20 { 152 margin-left: 33px; 153 margin-top: -99px; 154} 155 156.c21 { 157 margin-left: 1px; 158 margin-top: -99px; 159} 160 161.c22 { 162 margin-left: -31px; 163 margin-top: -99px; 164} 165 166.c23 { 167 margin-left: -63px; 168 margin-top: 69px; 169} 170 171.c24 { 172 margin-left: 33px; 173 margin-top: 69px; 174} 175 176.c25 { 177 margin-left: 1px; 178 margin-top: 69px; 179} 180 181.c26 { 182 margin-left: -31px; 183 margin-top: 69px; 184} 185 186.c27 { 187 margin-left: -79px; 188 margin-top: -15px; 189} 190 191.c28 { 192 margin-left: -95px; 193 margin-top: -43px; 194} 195 196.c29 { 197 margin-left: -95px; 198 margin-top: 13px; 199} 200 201.c30 { 202 margin-left: 49px; 203 margin-top: 41px; 204} 205 206.c31 { 207 margin-left: -79px; 208 margin-top: -71px; 209} 210 211.c32 { 212 margin-left: -111px; 213 margin-top: -15px; 214} 215 216.c33 { 217 margin-left: 65px; 218 margin-top: -43px; 219} 220 221.c34 { 222 margin-left: 65px; 223 margin-top: 13px; 224} 225 226.c35 { 227 margin-left: -79px; 228 margin-top: 41px; 229} 230 231.c36 { 232 margin-left: 49px; 233 margin-top: -71px; 234} 235 236.c37 { 237 margin-left: 81px; 238 margin-top: -15px; 239} 240 241.r1 { 242 animation-name: pulse00; 243 animation-duration: 2s; 244 animation-iteration-count: infinite; 245 animation-delay: .2s; 246 -webkit-animation-name: pulse00; 247 -webkit-animation-duration: 2s; 248 -webkit-animation-iteration-count: infinite; 249 -webkit-animation-delay: .2s; 250} 251 252.r2 { 253 animation-name: pulse00; 254 animation-duration: 2s; 255 animation-iteration-count: infinite; 256 animation-delay: .4s; 257 -webkit-animation-name: pulse00; 258 -webkit-animation-duration: 2s; 259 -webkit-animation-iteration-count: infinite; 260 -webkit-animation-delay: .4s; 261} 262 263.r3 { 264 animation-name: pulse00; 265 animation-duration: 2s; 266 animation-iteration-count: infinite; 267 animation-delay: .6s; 268 -webkit-animation-name: pulse00; 269 -webkit-animation-duration: 2s; 270 -webkit-animation-iteration-count: infinite; 271 -webkit-animation-delay: .6s; 272} 273 274.r1 > .hex-brick { 275 animation-name: fade00; 276 animation-duration: 2s; 277 animation-iteration-count: infinite; 278 animation-delay: .2s; 279 -webkit-animation-name: fade00; 280 -webkit-animation-duration: 2s; 281 -webkit-animation-iteration-count: infinite; 282 -webkit-animation-delay: .2s; 283} 284 285.r2 > .hex-brick { 286 animation-name: fade00; 287 animation-duration: 2s; 288 animation-iteration-count: infinite; 289 animation-delay: .4s; 290 -webkit-animation-name: fade00; 291 -webkit-animation-duration: 2s; 292 -webkit-animation-iteration-count: infinite; 293 -webkit-animation-delay: .4s; 294} 295 296.r3 > .hex-brick { 297 animation-name: fade00; 298 animation-duration: 2s; 299 animation-iteration-count: infinite; 300 animation-delay: .6s; 301 -webkit-animation-name: fade00; 302 -webkit-animation-duration: 2s; 303 -webkit-animation-iteration-count: infinite; 304 -webkit-animation-delay: .6s; 305} 306 307@keyframes pulse00 { 308 0% { 309 -webkit-transform: scale(1); 310 transform: scale(1); 311 } 312 313 50% { 314 -webkit-transform: scale(0.01); 315 transform: scale(0.01); 316 } 317 318 100% { 319 -webkit-transform: scale(1); 320 transform: scale(1); 321 } 322} 323 324@keyframes fade00 { 325 0% { 326 background: #252525; 327 } 328 329 50% { 330 background: #000000; 331 } 332 333 100% { 334 background: #353535; 335 } 336} 337
MIT License