4.9K views
CSS
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
HTML
1 2 <div class="socket"> 3 <div class="gel center-gel"> 4 <div class="hex-brick h1"></div> 5 <div class="hex-brick h2"></div> 6 <div class="hex-brick h3"></div> 7 </div> 8 <div class="gel c1 r1"> 9 <div class="hex-brick h1"></div> 10 <div class="hex-brick h2"></div> 11 <div class="hex-brick h3"></div> 12 </div> 13 <div class="gel c2 r1"> 14 <div class="hex-brick h1"></div> 15 <div class="hex-brick h2"></div> 16 <div class="hex-brick h3"></div> 17 </div> 18 <div class="gel c3 r1"> 19 <div class="hex-brick h1"></div> 20 <div class="hex-brick h2"></div> 21 <div class="hex-brick h3"></div> 22 </div> 23 <div class="gel c4 r1"> 24 <div class="hex-brick h1"></div> 25 <div class="hex-brick h2"></div> 26 <div class="hex-brick h3"></div> 27 </div> 28 <div class="gel c5 r1"> 29 <div class="hex-brick h1"></div> 30 <div class="hex-brick h2"></div> 31 <div class="hex-brick h3"></div> 32 </div> 33 <div class="gel c6 r1"> 34 <div class="hex-brick h1"></div> 35 <div class="hex-brick h2"></div> 36 <div class="hex-brick h3"></div> 37 </div> 38 39 <div class="gel c7 r2"> 40 <div class="hex-brick h1"></div> 41 <div class="hex-brick h2"></div> 42 <div class="hex-brick h3"></div> 43 </div> 44 45 <div class="gel c8 r2"> 46 <div class="hex-brick h1"></div> 47 <div class="hex-brick h2"></div> 48 <div class="hex-brick h3"></div> 49 </div> 50 <div class="gel c9 r2"> 51 <div class="hex-brick h1"></div> 52 <div class="hex-brick h2"></div> 53 <div class="hex-brick h3"></div> 54 </div> 55 <div class="gel c10 r2"> 56 <div class="hex-brick h1"></div> 57 <div class="hex-brick h2"></div> 58 <div class="hex-brick h3"></div> 59 </div> 60 <div class="gel c11 r2"> 61 <div class="hex-brick h1"></div> 62 <div class="hex-brick h2"></div> 63 <div class="hex-brick h3"></div> 64 </div> 65 <div class="gel c12 r2"> 66 <div class="hex-brick h1"></div> 67 <div class="hex-brick h2"></div> 68 <div class="hex-brick h3"></div> 69 </div> 70 <div class="gel c13 r2"> 71 <div class="hex-brick h1"></div> 72 <div class="hex-brick h2"></div> 73 <div class="hex-brick h3"></div> 74 </div> 75 <div class="gel c14 r2"> 76 <div class="hex-brick h1"></div> 77 <div class="hex-brick h2"></div> 78 <div class="hex-brick h3"></div> 79 </div> 80 <div class="gel c15 r2"> 81 <div class="hex-brick h1"></div> 82 <div class="hex-brick h2"></div> 83 <div class="hex-brick h3"></div> 84 </div> 85 <div class="gel c16 r2"> 86 <div class="hex-brick h1"></div> 87 <div class="hex-brick h2"></div> 88 <div class="hex-brick h3"></div> 89 </div> 90 <div class="gel c17 r2"> 91 <div class="hex-brick h1"></div> 92 <div class="hex-brick h2"></div> 93 <div class="hex-brick h3"></div> 94 </div> 95 <div class="gel c18 r2"> 96 <div class="hex-brick h1"></div> 97 <div class="hex-brick h2"></div> 98 <div class="hex-brick h3"></div> 99 </div> 100 <div class="gel c19 r3"> 101 <div class="hex-brick h1"></div> 102 <div class="hex-brick h2"></div> 103 <div class="hex-brick h3"></div> 104 </div> 105 <div class="gel c20 r3"> 106 <div class="hex-brick h1"></div> 107 <div class="hex-brick h2"></div> 108 <div class="hex-brick h3"></div> 109 </div> 110 <div class="gel c21 r3"> 111 <div class="hex-brick h1"></div> 112 <div class="hex-brick h2"></div> 113 <div class="hex-brick h3"></div> 114 </div> 115 <div class="gel c22 r3"> 116 <div class="hex-brick h1"></div> 117 <div class="hex-brick h2"></div> 118 <div class="hex-brick h3"></div> 119 </div> 120 <div class="gel c23 r3"> 121 <div class="hex-brick h1"></div> 122 <div class="hex-brick h2"></div> 123 <div class="hex-brick h3"></div> 124 </div> 125 <div class="gel c24 r3"> 126 <div class="hex-brick h1"></div> 127 <div class="hex-brick h2"></div> 128 <div class="hex-brick h3"></div> 129 </div> 130 <div class="gel c25 r3"> 131 <div class="hex-brick h1"></div> 132 <div class="hex-brick h2"></div> 133 <div class="hex-brick h3"></div> 134 </div> 135 <div class="gel c26 r3"> 136 <div class="hex-brick h1"></div> 137 <div class="hex-brick h2"></div> 138 <div class="hex-brick h3"></div> 139 </div> 140 <div class="gel c28 r3"> 141 <div class="hex-brick h1"></div> 142 <div class="hex-brick h2"></div> 143 <div class="hex-brick h3"></div> 144 </div> 145 <div class="gel c29 r3"> 146 <div class="hex-brick h1"></div> 147 <div class="hex-brick h2"></div> 148 <div class="hex-brick h3"></div> 149 </div> 150 <div class="gel c30 r3"> 151 <div class="hex-brick h1"></div> 152 <div class="hex-brick h2"></div> 153 <div class="hex-brick h3"></div> 154 </div> 155 <div class="gel c31 r3"> 156 <div class="hex-brick h1"></div> 157 <div class="hex-brick h2"></div> 158 <div class="hex-brick h3"></div> 159 </div> 160 <div class="gel c32 r3"> 161 <div class="hex-brick h1"></div> 162 <div class="hex-brick h2"></div> 163 <div class="hex-brick h3"></div> 164 </div> 165 <div class="gel c33 r3"> 166 <div class="hex-brick h1"></div> 167 <div class="hex-brick h2"></div> 168 <div class="hex-brick h3"></div> 169 </div> 170 <div class="gel c34 r3"> 171 <div class="hex-brick h1"></div> 172 <div class="hex-brick h2"></div> 173 <div class="hex-brick h3"></div> 174 </div> 175 <div class="gel c35 r3"> 176 <div class="hex-brick h1"></div> 177 <div class="hex-brick h2"></div> 178 <div class="hex-brick h3"></div> 179 </div> 180 <div class="gel c36 r3"> 181 <div class="hex-brick h1"></div> 182 <div class="hex-brick h2"></div> 183 <div class="hex-brick h3"></div> 184 </div> 185 <div class="gel c37 r3"> 186 <div class="hex-brick h1"></div> 187 <div class="hex-brick h2"></div> 188 <div class="hex-brick h3"></div> 189 </div> 190 191 </div> 192