#e8e8e8
1.piggy-wrapper { 2 position: relative; 3 width: 350px; 4 height: 350px; 5 display: block; 6 margin: 0 auto; 7 margin-top: 0px; 8} 9 10.piggy-wrap { 11 position: absolute; 12 top: 0; 13 left: 0; 14 z-index: 10; 15 width: 100%; 16 height: 100%; 17 transform-origin: bottom center; 18 animation: trembling 5s linear infinite; 19} 20 21@keyframes trembling { 22 0% { 23 transform: scale(1); 24 } 25 26 19% { 27 transform: scale(1); 28 } 29 30 21% { 31 transform: scale(0.99); 32 } 33 34 22% { 35 transform: scale(1); 36 } 37 38 23% { 39 transform: scale(0.99); 40 } 41 42 24% { 43 transform: scale(1); 44 } 45 46 25% { 47 transform: scale(0.99); 48 } 49 50 26% { 51 transform: scale(1); 52 } 53 54 25% { 55 transform: scale(0.99); 56 } 57 58 26% { 59 transform: scale(1); 60 } 61 62 27% { 63 transform: scale(0.99); 64 } 65 66 28% { 67 transform: scale(1); 68 } 69 70 29% { 71 transform: scale(0.99); 72 } 73 74 30% { 75 transform: scale(1); 76 } 77 78 60% { 79 transform: scale(0.95); 80 } 81 82 61% { 83 transform: scale(1); 84 } 85 86 100% { 87 transform: scale(1); 88 } 89} 90 91.piggy { 92 position: absolute; 93 bottom: 40px; 94 left: 50%; 95 margin-left: -160px; 96 width: 270px; 97 height: 200px; 98 display: block; 99 border-radius: 100px; 100 background-color: #d88fa0; 101} 102 103.nose { 104 position: absolute; 105 top: 80px; 106 left: -25px; 107 width: 40px; 108 height: 60px; 109 display: block; 110 background-color: #d88fa0; 111 z-index: 1; 112 border-radius: 4px; 113} 114 115.mouth { 116 position: absolute; 117 top: 95px; 118 left: -15px; 119 width: 0; 120 height: 0; 121 z-index: 8; 122 display: block; 123 border-bottom: 60px solid #d88fa0; 124 border-left: 20px solid transparent; 125 border-right: 20px solid transparent; 126 border-radius: 4px; 127} 128 129.ear { 130 position: absolute; 131 top: -35px; 132 left: 70px; 133 width: 45px; 134 height: 40px; 135 display: block; 136 border-top-right-radius: 60px; 137 background-color: #d88fa0; 138 z-index: 1; 139} 140 141.piggy:before { 142 position: absolute; 143 content: ''; 144 top: -25px; 145 left: 55px; 146 width: 60px; 147 height: 60px; 148 display: block; 149 border-top-right-radius: 60px; 150 background-color: #cb6980; 151 z-index: -1; 152} 153 154.tail { 155 position: absolute; 156 left: 254px; 157 top: 125px; 158} 159 160.tail span { 161 position: absolute; 162 left: 0; 163 top: 0; 164 width: 20px; 165 height: 5px; 166 transform: rotate(30deg); 167 background-color: #d88fa0; 168} 169 170.tail span:nth-child(2) { 171 left: 3px; 172 top: -38px; 173 width: 50px; 174 height: 50px; 175 transform: rotate(-20deg); 176 background-color: transparent; 177 border-radius: 50%; 178 border-width: 5px; 179 border-style: solid; 180 border-color: transparent #d88fa0 #d88fa0 transparent; 181} 182 183.tail span:nth-child(3) { 184 left: 22px; 185 top: -36px; 186 width: 30px; 187 height: 30px; 188 transform: rotate(-40deg); 189 background-color: transparent; 190 border-radius: 50%; 191 border-width: 5px; 192 border-style: solid; 193 border-color: #d88fa0 transparent transparent #d88fa0; 194} 195 196.tail span:nth-child(4) { 197 left: 7px; 198 top: -66px; 199 width: 60px; 200 height: 60px; 201 transform: rotate(-40deg); 202 background-color: transparent; 203 border-radius: 50%; 204 border-width: 5px; 205 border-style: solid; 206 border-color: transparent transparent #d88fa0 transparent; 207} 208 209.eye { 210 position: absolute; 211 left: 35px; 212 top: 75px; 213 width: 30px; 214 height: 30px; 215 transform: rotate(45deg); 216 border-radius: 50%; 217 border-width: 4px; 218 border-style: solid; 219 border-color: #555 transparent transparent #555; 220 animation: blink 5s linear infinite; 221} 222 223@keyframes blink { 224 0% { 225 border-color: #555 transparent transparent #555; 226 } 227 228 19% { 229 border-color: #555 transparent transparent #555; 230 } 231 232 20% { 233 border-color: transparent #555 #555 transparent; 234 } 235 236 60% { 237 border-color: transparent #555 #555 transparent; 238 } 239 240 61% { 241 border-color: #555 transparent transparent #555; 242 } 243 244 100% { 245 border-color: #555 transparent transparent #555; 246 } 247} 248 249.hole { 250 position: absolute; 251 left: 121px; 252 top: 0; 253 width: 60px; 254 height: 5px; 255 background-color: #555; 256 border-bottom-left-radius: 5px; 257 border-bottom-right-radius: 5px; 258} 259 260.coin-wrap { 261 position: absolute; 262 top: 0; 263 left: -8px; 264 z-index: 9; 265 width: 100%; 266 height: 100%; 267 opacity: 0; 268 transform-origin: bottom center; 269 animation: trembling 5s linear infinite, moveCoin 5s linear infinite; 270} 271 272.coin { 273 position: absolute; 274 top: 110px; 275 left: 143px; 276 z-index: 9; 277 width: 61.5px; 278 height: 61.5px; 279 border-radius: 50%; 280 border: 6px solid #e67e22; 281 background-color: #f39c12; 282 text-align: center; 283 line-height: 68px; 284 font-size: 45px; 285 font-weight: 500; 286 color: rgba(32,32,32,0.5); 287 box-shadow: inset 0 0 4px #777; 288} 289 290@keyframes moveCoin { 291 0% { 292 opacity: 0; 293 top: 0; 294 } 295 296 19% { 297 opacity: 1; 298 top: 0; 299 } 300 301 21% { 302 top: -7px; 303 } 304 305 22% { 306 top: -7px; 307 } 308 309 23% { 310 top: -14px; 311 } 312 313 24% { 314 top: -14px; 315 } 316 317 25% { 318 top: -21px; 319 } 320 321 26% { 322 top: -21px; 323 } 324 325 27% { 326 top: -28px; 327 } 328 329 28% { 330 top: -28px; 331 } 332 333 29% { 334 top: -35px; 335 } 336 337 30% { 338 top: -35px; 339 } 340 341 60% { 342 top: -35px; 343 } 344 345 66% { 346 top: -220px; 347 opacity: 1; 348 } 349 350 67% { 351 top: -220px; 352 opacity: 0; 353 } 354 355 99% { 356 top: 0; 357 opacity: 0; 358 } 359 360 100% { 361 opacity: 0; 362 top: 0; 363 } 364} 365 366.legs { 367 position: absolute; 368 bottom: 14px; 369 left: 96px; 370 width: 40px; 371 height: 60px; 372 display: block; 373 background-color: #cb6980; 374 border-radius: 3px; 375 z-index: 1; 376} 377 378.legs:after { 379 position: absolute; 380 content: ''; 381 bottom: 0; 382 left: 0; 383 width: 30px; 384 height: 12px; 385 display: block; 386 background-color: #d88fa0; 387 border-bottom-left-radius: 3px; 388 border-top-right-radius: 3px; 389 z-index: 1; 390} 391 392.legs.back { 393 left: 206px; 394}
925 views
925 views
Comments
MIT License