├── index.html ├── main.less └── main.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 小丸子一家 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | 21 |
22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 | 30 |
31 | 32 |
33 |
34 |
35 | 36 |
37 |
38 |
39 |
40 |
41 |
42 | 43 |
44 |
45 | 46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 |
58 |
59 | 60 |
61 |
62 |
63 | 64 | 65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | 77 |
78 |
79 |
80 |
81 |
82 | 83 |
84 |
85 | 86 |
87 |
88 | 89 |
90 |
91 | 92 |
93 | 94 |
95 |
96 | 97 |
98 |
99 |
100 |
101 |
102 | 103 |
104 |
105 |
106 |
107 |
108 | 109 | 110 |
111 | 112 |
113 | 114 | 115 | 116 | 117 | 118 | 119 | -------------------------------------------------------------------------------- /main.less: -------------------------------------------------------------------------------- 1 | @keyframes eye { 2 | 0% { 3 | transform:scale(1,1); 4 | } 5 | 20% { 6 | transform:scale(1,0.1); 7 | } 8 | 9 | 100% { 10 | transform:scale(1,1); 11 | } 12 | } 13 | body{ 14 | background: #ffef5e; 15 | } 16 | body,div{ 17 | margin: 0; 18 | padding: 0; 19 | background: #ffef5e; 20 | } 21 | .border{ 22 | border:1px solid #152131; 23 | } 24 | .main{ 25 | position: relative; 26 | width: 700px; 27 | margin: 50px auto; 28 | } 29 | .me{ 30 | position: absolute; 31 | top: 250px; 32 | left: 100px; 33 | z-index: 10; 34 | .hairs{ 35 | background: #152131; 36 | width: 190px; 37 | height: 250px; 38 | border-radius: 50% 50% 0 0; 39 | left: -30px; 40 | top: -50px; 41 | position: absolute; 42 | overflow: hidden; 43 | &:after{ 44 | content: ''; 45 | position: absolute; 46 | width: 300px; 47 | height: 200px; 48 | background: #ffef5e; 49 | top: 120px; 50 | } 51 | .hair{ 52 | width: 35px; 53 | height: 45px; 54 | background: #152131; 55 | position: absolute; 56 | z-index: 1; 57 | transform: rotate(70deg) scale(1) skew(44deg) translate(8px); 58 | &.hair1{ 59 | top: 17px; 60 | left: 27px; 61 | } 62 | &.hair2{ 63 | top: 8px; 64 | left: 52px; 65 | } 66 | &.hair3{ 67 | top: 4px; 68 | left: 73px; 69 | } 70 | &.hair4{ 71 | top: 0; 72 | left: 90px; 73 | } 74 | &.hair5{ 75 | top: 4px; 76 | left:108px; 77 | } 78 | &.hair6{ 79 | top: 8px; 80 | left: 125px; 81 | } 82 | &.hair7{ 83 | top: 17px; 84 | right: 17px; 85 | } 86 | } 87 | } 88 | .face{ 89 | background: #fbdac7; 90 | width: 130px; 91 | height: 100px; 92 | position: absolute; 93 | top: 0; 94 | border-radius: 20px 20px 50px 50px; 95 | &:after{ //脖子 96 | content: ""; 97 | width: 14px; 98 | height: 10px; 99 | background: #fbdac7; 100 | position: absolute; 101 | bottom:-12px; 102 | left: 50%; 103 | margin-left: -7px; 104 | .border; 105 | } 106 | .border; 107 | .brow{ 108 | width: 42px; 109 | height: 10px; 110 | background: #152131; 111 | position: absolute; 112 | top: 26px; 113 | border-radius: 50%; 114 | &:after{ 115 | content: ""; 116 | background: #fbdac7; 117 | position: absolute; 118 | width: 50px; 119 | height: 10px; 120 | top: 1px; 121 | border-radius: 50%; 122 | } 123 | &.left-brow{ 124 | left : 18px; 125 | transform:rotate(-10deg); 126 | } 127 | &.right-brow{ 128 | right: 14px; 129 | transform:rotate(10deg); 130 | } 131 | } 132 | .eye{ 133 | width: 14px; 134 | height: 14px; 135 | border-radius: 50%; 136 | background: #000; 137 | position: absolute; 138 | top: 40px; 139 | z-index: 2; 140 | &.left-eye{ 141 | left: 32%; 142 | } 143 | &.right-eye{ 144 | right: 32%; 145 | //animation: eye 1s infinite ease; 146 | } 147 | } 148 | .blusher{ 149 | width: 12px; 150 | height: 12px; 151 | border-radius: 50%; 152 | background: #f79c99; 153 | position: absolute; 154 | top: 70px; 155 | &.left-blusher{ 156 | left: 8px; 157 | } 158 | &.right-blusher{ 159 | right: 8px; 160 | } 161 | } 162 | .mouth{ 163 | .border; 164 | z-index: 1; 165 | width: 30px; 166 | height: 30px; 167 | background: #d96b6e; 168 | position: absolute; 169 | top: 50px; 170 | left: 50px; 171 | border-radius: 50%; 172 | &:after{ 173 | content: ""; 174 | width: 60px; 175 | height: 30px; 176 | background: #fbdac7; 177 | position: absolute; 178 | top: -10px; 179 | left: -20px; 180 | border-radius: 30%; 181 | } 182 | } 183 | .ear{ 184 | width: 10px; 185 | height: 20px; 186 | background: #fbdac7; 187 | position: absolute; 188 | top: 30px; 189 | z-index: 2; 190 | &.left-ear{ 191 | left: -11px; 192 | border-radius: 5px 0 0 10px; 193 | } 194 | &.right-ear{ 195 | right: -11px; 196 | border-radius: 0 5px 10px 0; 197 | } 198 | } 199 | } 200 | .clothes{ 201 | background: #fff; 202 | width: 70px; 203 | height: 80px; 204 | position: absolute; 205 | top:112px; 206 | left: 31px; 207 | z-index: 2; 208 | border-radius: 30% 30% 10px 10px; 209 | overflow: hidden; 210 | .border; 211 | .sleeve{ 212 | background: #fff; 213 | width: 40px; 214 | height: 40px; 215 | position: absolute; 216 | top: 10px; 217 | border-radius: 10px; 218 | } 219 | // &:before{ //左袖子 220 | // content: ""; 221 | // .sleeve; 222 | // left: -10px; 223 | // transform:rotate(50deg); 224 | // } 225 | // &:after{ //右袖子 226 | // content :""; 227 | // .sleeve; 228 | // right: -10px; 229 | // transform:rotate(-50deg); 230 | // } 231 | .collar{ 232 | z-index: 3; 233 | position: absolute; 234 | .border; 235 | width: 20px; 236 | height: 10px; 237 | background: #fff; 238 | &.left-collar{ 239 | left: 12px; 240 | transform:rotate(50deg); 241 | } 242 | &.right-collar{ 243 | right: 12px; 244 | transform:rotate(-50deg); 245 | } 246 | } 247 | .straps{ 248 | z-index: 2; 249 | position: absolute; 250 | width: 6px; 251 | height: 100px; 252 | background: #e9003a; 253 | .border; 254 | &.left-straps{ 255 | left: 12px; 256 | } 257 | &.right-straps{ 258 | right: 12px; 259 | } 260 | } 261 | } 262 | .arm{ 263 | width: 70px; 264 | height: 70px; 265 | border-radius: 50%; 266 | background: #fff; 267 | .border; 268 | z-index: 1; 269 | position: absolute; 270 | top: 115px; 271 | z-index: 0; 272 | &.left-arm{ 273 | left: 10px; 274 | &:after{ 275 | content: ""; 276 | position: absolute; 277 | background:#ffef5e; 278 | width: 60px; 279 | height: 60px; 280 | left: 12px; 281 | top: 5px; 282 | border-radius: 50%; 283 | .border; 284 | } 285 | } 286 | &.right-arm{ 287 | left: 52px; 288 | &:after{ 289 | content: ""; 290 | position: absolute; 291 | background:#ffef5e; 292 | width: 60px; 293 | height: 60px; 294 | left: -4px; 295 | top: 5px; 296 | border-radius: 50%; 297 | .border; 298 | } 299 | } 300 | } 301 | .belt{ 302 | background: #ed023a; 303 | border: 1px solid #152131; 304 | height: 10px; 305 | left: 31px; 306 | position: absolute; 307 | top: 182px; 308 | width: 70px; 309 | z-index: 3; 310 | } 311 | .skirt{ 312 | background: #ed023a; 313 | position: absolute; 314 | background: none; 315 | border-color: #e9003a transparent; 316 | border-image: none; 317 | border-style: solid; 318 | border-width: 0px 30px 50px; 319 | height: 0; 320 | left: 1px; 321 | position: absolute; 322 | top: 194px; 323 | width: 72px; 324 | z-index: 3; 325 | border-radius: 0 0 50% 50%; 326 | .line{ 327 | width: 1px; 328 | height: 30px; 329 | position: absolute; 330 | background: #000; 331 | top:10px; 332 | transform-origin:0 0; 333 | &.line1{ 334 | left: 10px; 335 | transform:rotate(20deg); 336 | } 337 | &.line2{ 338 | left: 25px; 339 | transform:rotate(10deg); 340 | } 341 | &.line3{ 342 | left: 35px; 343 | } 344 | &.line4{ 345 | right: 25px; 346 | transform:rotate(-10deg); 347 | } 348 | &.line5{ 349 | right: 10px; 350 | transform:rotate(-20deg); 351 | } 352 | } 353 | } 354 | .leg{ 355 | width: 12px; 356 | height: 40px; 357 | background: #fadbc7; 358 | .border; 359 | position: absolute; 360 | top: 220px; 361 | z-index: 2; 362 | &.left-leg{ 363 | left: 40px; 364 | } 365 | &.right-leg{ 366 | left: 78px; 367 | } 368 | &:after{ 369 | content: ''; 370 | width: 12px; 371 | height: 16px; 372 | background: #fff; 373 | .border; 374 | border-bottom: 0; 375 | top: 40px; 376 | left: -1px; 377 | position: absolute; 378 | } 379 | } 380 | .stockings{ 381 | width: 28px; 382 | height: 12px; 383 | background: #fff; 384 | .border; 385 | position: absolute; 386 | z-index: 1; 387 | transform-origin:0 0; 388 | &.left-stockings{ 389 | left: 21px; 390 | top: 275px; 391 | transform:rotate(-20deg); 392 | border-radius: 50% 0 0 50%; 393 | } 394 | &.right-stockings{ 395 | left: 83px; 396 | top: 265px; 397 | transform:rotate(20deg); 398 | border-radius: 0 50% 50% 0; 399 | } 400 | } 401 | .shoes{ 402 | width: 40px; 403 | height: 17px; 404 | position: absolute; 405 | z-index: 0; 406 | background: #a23030; 407 | transform-origin:0 0; 408 | border-radius: 50%; 409 | &.left-shoes{ 410 | left: 13px; 411 | top: 280px; 412 | transform:rotate(-20deg); 413 | border-radius: 50% 0 0 50%; 414 | } 415 | &.right-shoes{ 416 | left: 81px; 417 | top: 267px; 418 | transform:rotate(20deg); 419 | border-radius: 0 50% 50% 0; 420 | } 421 | } 422 | } 423 | 424 | .grandpa{ 425 | position: absolute; 426 | top: 40px; 427 | left: 280px; 428 | z-index: 10; 429 | width: 126px; 430 | .hairs{ 431 | position: absolute; 432 | 433 | z-index: 3; 434 | width: 126px; 435 | .hair{ 436 | background: #152131; 437 | width: 1px; 438 | height: 5px; 439 | position: absolute; 440 | &.hair1{ 441 | left: 40px; 442 | top: 12px; 443 | } 444 | &.hair2{ 445 | left: 50px; 446 | top: 8px; 447 | } 448 | &.hair3{ 449 | left: 62px; 450 | top: 5px; 451 | } 452 | &.hair4{ 453 | right: 50px; 454 | top: 8px; 455 | } 456 | &.hair5{ 457 | right: 40px; 458 | top: 12px; 459 | } 460 | } 461 | } 462 | .ear{ 463 | width: 20px; 464 | height: 20px; 465 | background: #f8bb9f; 466 | .border; 467 | position: absolute; 468 | top: 90px; 469 | border-radius: 50%; 470 | z-index: 1; 471 | &.left-ear{ 472 | left: -10px; 473 | } 474 | &.right-ear{ 475 | right: -10px; 476 | } 477 | } 478 | .header{ 479 | top: 10px; 480 | position: absolute; 481 | width: 126px; 482 | height: 180px; 483 | background: #f8bb9f; 484 | display: block; 485 | border-radius: 175% 175% 150% 150%; 486 | z-index: 2; 487 | .border; 488 | &:after{ 489 | background: #f8bb9f; 490 | bottom: -12px; 491 | content: ""; 492 | height: 10px; 493 | left: 50%; 494 | margin-left: -7px; 495 | position: absolute; 496 | width: 14px; 497 | .border; 498 | } 499 | .bang{ 500 | background: #152131; 501 | width: 1px; 502 | height: 3px; 503 | position: absolute; 504 | z-index: 1; 505 | top: 12px; 506 | &.bang1{ 507 | left: 50px; 508 | transform:rotate(-20deg); 509 | } 510 | &.bang2{ 511 | left: 63px; 512 | } 513 | &.bang3{ 514 | right:50px; 515 | transform:rotate(20deg); 516 | } 517 | } 518 | .wrinkle{ 519 | position: absolute; 520 | height: 1px; 521 | background: #152131; 522 | border-radius: 50%; 523 | &.wrinkle1{ 524 | top: 30px; 525 | width:30px; 526 | left: 48px; 527 | } 528 | &.wrinkle2{ 529 | top: 40px; 530 | width:20px; 531 | left: 53px; 532 | } 533 | } 534 | .brow{ 535 | position: absolute; 536 | top: 60px; 537 | width: 50px; 538 | height: 30px; 539 | border-radius: 50%; 540 | background: #152131; 541 | &:after{ 542 | content: ""; 543 | position: absolute; 544 | border-radius: 50%; 545 | width: 60px; 546 | height: 30px; 547 | background: #f8bb9f; 548 | top: 1px; 549 | left: -1px; 550 | } 551 | &.left-brow{ 552 | left: 20px; 553 | transform:rotate(10deg); 554 | } 555 | &.right-brow{ 556 | left: 67px; 557 | transform:rotate(10deg); 558 | } 559 | } 560 | .eye{ 561 | position: absolute; 562 | top: 80px; 563 | width: 30px; 564 | height: 50px; 565 | border-radius: 50%; 566 | background: #152131; 567 | 568 | &:after{ 569 | content: ""; 570 | position: absolute; 571 | border-radius: 50%; 572 | width: 34px; 573 | height: 55px; 574 | background: #f8bb9f; 575 | top: 1px; 576 | left: 0px; 577 | } 578 | &.left-eye{ 579 | left: 20px; 580 | transform:rotate(30deg); 581 | 582 | } 583 | &.right-eye{ 584 | left: 80px; 585 | top: 79px; 586 | transform: rotate(-40deg) rotateY(160deg); 587 | } 588 | } 589 | .nose{ 590 | width: 6px; 591 | height: 22px; 592 | position: absolute; 593 | top: 105px; 594 | left: 58px; 595 | background: #f8bb9f; 596 | z-index: 2; 597 | .border; 598 | border-radius: 50%; 599 | &:after{ 600 | content: ""; 601 | position: absolute; 602 | width: 4px; 603 | height: 22px; 604 | top: -5px; 605 | left: 1px; 606 | background: #f8bb9f; 607 | } 608 | } 609 | .mouth{ 610 | .border; 611 | z-index: 1; 612 | width: 30px; 613 | height: 30px; 614 | background: #d96b6e; 615 | position: absolute; 616 | top: 130px; 617 | left: 46px; 618 | border-radius: 50%; 619 | &:after{ 620 | content: ""; 621 | width: 60px; 622 | height: 30px; 623 | background: #f8bb9f; 624 | position: absolute; 625 | top: -10px; 626 | left: -20px; 627 | border-radius: 50%; 628 | } 629 | } 630 | } 631 | 632 | .clothes{ 633 | background: #a5d1d2; 634 | width: 100px; 635 | position: absolute; 636 | top: 200px; 637 | height: 130px; 638 | left: 14px; 639 | border-radius: 50% 50% 10% 10%; 640 | z-index: 2; 641 | .border; 642 | .cover{ 643 | border-radius: 50% 50% 10% 10%; 644 | width: 102px; 645 | height: 60px; 646 | background: #a5d1d2; 647 | position: absolute; 648 | top: 0; 649 | z-index: 3; 650 | } 651 | .collar{ 652 | border-radius: 50% 50% 10% 10%; 653 | height: 130px; 654 | width: 100px; 655 | position: absolute; 656 | z-index: 4; 657 | background: #a5d1d2; 658 | overflow: hidden; 659 | &:after{ 660 | content: ""; 661 | position: absolute; 662 | width: 40px; 663 | height: 40px; 664 | border-radius: 50%; 665 | background: #a5d1d2; 666 | left: 30px; 667 | top: -20px; 668 | .border; 669 | z-index: 5; 670 | } 671 | } 672 | } 673 | .hand{ 674 | .border; 675 | z-index: 1; 676 | background: #a5d1d2; 677 | border: 1px solid #152131; 678 | border-radius: 90% 90% 50% 50%; 679 | height: 110px; 680 | left: -13px; 681 | position: absolute; 682 | top: 200px; 683 | width: 150px; 684 | } 685 | .trousers{ 686 | .border; 687 | height: 140px; 688 | left: 16px; 689 | position: absolute; 690 | top: 331px; 691 | width: 96px; 692 | background: #6c8d6e; 693 | &:after{ 694 | content: ""; 695 | transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px); 696 | height: 100px; 697 | width: 400px; 698 | background: #ffef5e; 699 | height: 100px; 700 | left: -152px; 701 | position: absolute; 702 | top: 250px; 703 | } 704 | } 705 | .footer{ 706 | width: 30px; 707 | height: 15px; 708 | background: #a18883; 709 | position: absolute; 710 | top: 473px; 711 | &.left-footer{ 712 | width: 25px; 713 | left: 16px; 714 | } 715 | &.right-footer{ 716 | left: 84px; 717 | } 718 | } 719 | .shoes{ 720 | width: 45px; 721 | height: 18px; 722 | position: absolute; 723 | top: 483px; 724 | background: #555a6d; 725 | &.left-shoes{ 726 | border-radius: 50% 0 30% 50%; 727 | left: -4px; 728 | transform:rotate(-10deg); 729 | } 730 | &.right-shoes{ 731 | border-radius: 0 50% 50% 30%; 732 | left: 84px; 733 | transform:rotate(10deg); 734 | } 735 | } 736 | } 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | @-webkit-keyframes eye { 2 | /* line 2, main.less */ 3 | 0% { 4 | -webkit-transform: scale(1, 1); 5 | transform: scale(1, 1); 6 | } 7 | /* line 5, main.less */ 8 | 20% { 9 | -webkit-transform: scale(1, 0.1); 10 | transform: scale(1, 0.1); 11 | } 12 | /* line 9, main.less */ 13 | 100% { 14 | -webkit-transform: scale(1, 1); 15 | transform: scale(1, 1); 16 | } 17 | } 18 | @keyframes eye { 19 | /* line 2, main.less */ 20 | 0% { 21 | -webkit-transform: scale(1, 1); 22 | transform: scale(1, 1); 23 | } 24 | /* line 5, main.less */ 25 | 20% { 26 | -webkit-transform: scale(1, 0.1); 27 | transform: scale(1, 0.1); 28 | } 29 | /* line 9, main.less */ 30 | 100% { 31 | -webkit-transform: scale(1, 1); 32 | transform: scale(1, 1); 33 | } 34 | } 35 | /* line 13, main.less */ 36 | body { 37 | background: #ffef5e; 38 | } 39 | /* line 16, main.less */ 40 | body, 41 | div { 42 | margin: 0; 43 | padding: 0; 44 | background: #ffef5e; 45 | } 46 | /* line 21, main.less */ 47 | .border { 48 | border: 1px solid #152131; 49 | } 50 | /* line 24, main.less */ 51 | .main { 52 | position: relative; 53 | width: 700px; 54 | margin: 50px auto; 55 | } 56 | /* line 29, main.less */ 57 | .me { 58 | position: absolute; 59 | top: 250px; 60 | left: 100px; 61 | z-index: 10; 62 | } 63 | /* line 34, main.less */ 64 | .me .hairs { 65 | background: #152131; 66 | width: 190px; 67 | height: 250px; 68 | border-radius: 50% 50% 0 0; 69 | left: -30px; 70 | top: -50px; 71 | position: absolute; 72 | overflow: hidden; 73 | } 74 | /* line 43, main.less */ 75 | .me .hairs:after { 76 | content: ''; 77 | position: absolute; 78 | width: 300px; 79 | height: 200px; 80 | background: #ffef5e; 81 | top: 120px; 82 | } 83 | /* line 51, main.less */ 84 | .me .hairs .hair { 85 | width: 35px; 86 | height: 45px; 87 | background: #152131; 88 | position: absolute; 89 | z-index: 1; 90 | -webkit-transform: rotate(70deg) scale(1) skew(44deg) translate(8px); 91 | -ms-transform: rotate(70deg) scale(1) skew(44deg) translate(8px); 92 | transform: rotate(70deg) scale(1) skew(44deg) translate(8px); 93 | } 94 | /* line 58, main.less */ 95 | .me .hairs .hair.hair1 { 96 | top: 17px; 97 | left: 27px; 98 | } 99 | /* line 62, main.less */ 100 | .me .hairs .hair.hair2 { 101 | top: 8px; 102 | left: 52px; 103 | } 104 | /* line 66, main.less */ 105 | .me .hairs .hair.hair3 { 106 | top: 4px; 107 | left: 73px; 108 | } 109 | /* line 70, main.less */ 110 | .me .hairs .hair.hair4 { 111 | top: 0; 112 | left: 90px; 113 | } 114 | /* line 74, main.less */ 115 | .me .hairs .hair.hair5 { 116 | top: 4px; 117 | left: 108px; 118 | } 119 | /* line 78, main.less */ 120 | .me .hairs .hair.hair6 { 121 | top: 8px; 122 | left: 125px; 123 | } 124 | /* line 82, main.less */ 125 | .me .hairs .hair.hair7 { 126 | top: 17px; 127 | right: 17px; 128 | } 129 | /* line 88, main.less */ 130 | .me .face { 131 | background: #fbdac7; 132 | width: 130px; 133 | height: 100px; 134 | position: absolute; 135 | top: 0; 136 | border-radius: 20px 20px 50px 50px; 137 | border: 1px solid #152131; 138 | } 139 | /* line 95, main.less */ 140 | .me .face:after { 141 | content: ""; 142 | width: 14px; 143 | height: 10px; 144 | background: #fbdac7; 145 | position: absolute; 146 | bottom: -12px; 147 | left: 50%; 148 | margin-left: -7px; 149 | border: 1px solid #152131; 150 | } 151 | /* line 107, main.less */ 152 | .me .face .brow { 153 | width: 42px; 154 | height: 10px; 155 | background: #152131; 156 | position: absolute; 157 | top: 26px; 158 | border-radius: 50%; 159 | } 160 | /* line 114, main.less */ 161 | .me .face .brow:after { 162 | content: ""; 163 | background: #fbdac7; 164 | position: absolute; 165 | width: 50px; 166 | height: 10px; 167 | top: 1px; 168 | border-radius: 50%; 169 | } 170 | /* line 123, main.less */ 171 | .me .face .brow.left-brow { 172 | left: 18px; 173 | -webkit-transform: rotate(-10deg); 174 | -ms-transform: rotate(-10deg); 175 | transform: rotate(-10deg); 176 | } 177 | /* line 127, main.less */ 178 | .me .face .brow.right-brow { 179 | right: 14px; 180 | -webkit-transform: rotate(10deg); 181 | -ms-transform: rotate(10deg); 182 | transform: rotate(10deg); 183 | } 184 | /* line 132, main.less */ 185 | .me .face .eye { 186 | width: 14px; 187 | height: 14px; 188 | border-radius: 50%; 189 | background: #000; 190 | position: absolute; 191 | top: 40px; 192 | z-index: 2; 193 | } 194 | /* line 140, main.less */ 195 | .me .face .eye.left-eye { 196 | left: 32%; 197 | } 198 | /* line 143, main.less */ 199 | .me .face .eye.right-eye { 200 | right: 32%; 201 | } 202 | /* line 148, main.less */ 203 | .me .face .blusher { 204 | width: 12px; 205 | height: 12px; 206 | border-radius: 50%; 207 | background: #f79c99; 208 | position: absolute; 209 | top: 70px; 210 | } 211 | /* line 155, main.less */ 212 | .me .face .blusher.left-blusher { 213 | left: 8px; 214 | } 215 | /* line 158, main.less */ 216 | .me .face .blusher.right-blusher { 217 | right: 8px; 218 | } 219 | /* line 162, main.less */ 220 | .me .face .mouth { 221 | border: 1px solid #152131; 222 | z-index: 1; 223 | width: 30px; 224 | height: 30px; 225 | background: #d96b6e; 226 | position: absolute; 227 | top: 50px; 228 | left: 50px; 229 | border-radius: 50%; 230 | } 231 | /* line 172, main.less */ 232 | .me .face .mouth:after { 233 | content: ""; 234 | width: 60px; 235 | height: 30px; 236 | background: #fbdac7; 237 | position: absolute; 238 | top: -10px; 239 | left: -20px; 240 | border-radius: 30%; 241 | } 242 | /* line 183, main.less */ 243 | .me .face .ear { 244 | width: 10px; 245 | height: 20px; 246 | background: #fbdac7; 247 | position: absolute; 248 | top: 30px; 249 | z-index: 2; 250 | } 251 | /* line 190, main.less */ 252 | .me .face .ear.left-ear { 253 | left: -11px; 254 | border-radius: 5px 0 0 10px; 255 | } 256 | /* line 194, main.less */ 257 | .me .face .ear.right-ear { 258 | right: -11px; 259 | border-radius: 0 5px 10px 0; 260 | } 261 | /* line 200, main.less */ 262 | .me .clothes { 263 | background: #fff; 264 | width: 70px; 265 | height: 80px; 266 | position: absolute; 267 | top: 112px; 268 | left: 31px; 269 | z-index: 2; 270 | border-radius: 30% 30% 10px 10px; 271 | overflow: hidden; 272 | border: 1px solid #152131; 273 | } 274 | /* line 211, main.less */ 275 | .me .clothes .sleeve { 276 | background: #fff; 277 | width: 40px; 278 | height: 40px; 279 | position: absolute; 280 | top: 10px; 281 | border-radius: 10px; 282 | } 283 | /* line 231, main.less */ 284 | .me .clothes .collar { 285 | z-index: 3; 286 | position: absolute; 287 | border: 1px solid #152131; 288 | width: 20px; 289 | height: 10px; 290 | background: #fff; 291 | } 292 | /* line 238, main.less */ 293 | .me .clothes .collar.left-collar { 294 | left: 12px; 295 | -webkit-transform: rotate(50deg); 296 | -ms-transform: rotate(50deg); 297 | transform: rotate(50deg); 298 | } 299 | /* line 242, main.less */ 300 | .me .clothes .collar.right-collar { 301 | right: 12px; 302 | -webkit-transform: rotate(-50deg); 303 | -ms-transform: rotate(-50deg); 304 | transform: rotate(-50deg); 305 | } 306 | /* line 247, main.less */ 307 | .me .clothes .straps { 308 | z-index: 2; 309 | position: absolute; 310 | width: 6px; 311 | height: 100px; 312 | background: #e9003a; 313 | border: 1px solid #152131; 314 | } 315 | /* line 254, main.less */ 316 | .me .clothes .straps.left-straps { 317 | left: 12px; 318 | } 319 | /* line 257, main.less */ 320 | .me .clothes .straps.right-straps { 321 | right: 12px; 322 | } 323 | /* line 262, main.less */ 324 | .me .arm { 325 | width: 70px; 326 | height: 70px; 327 | border-radius: 50%; 328 | background: #fff; 329 | border: 1px solid #152131; 330 | z-index: 1; 331 | position: absolute; 332 | top: 115px; 333 | z-index: 0; 334 | } 335 | /* line 272, main.less */ 336 | .me .arm.left-arm { 337 | left: 10px; 338 | } 339 | /* line 274, main.less */ 340 | .me .arm.left-arm:after { 341 | content: ""; 342 | position: absolute; 343 | background: #ffef5e; 344 | width: 60px; 345 | height: 60px; 346 | left: 12px; 347 | top: 5px; 348 | border-radius: 50%; 349 | border: 1px solid #152131; 350 | } 351 | /* line 286, main.less */ 352 | .me .arm.right-arm { 353 | left: 52px; 354 | } 355 | /* line 288, main.less */ 356 | .me .arm.right-arm:after { 357 | content: ""; 358 | position: absolute; 359 | background: #ffef5e; 360 | width: 60px; 361 | height: 60px; 362 | left: -4px; 363 | top: 5px; 364 | border-radius: 50%; 365 | border: 1px solid #152131; 366 | } 367 | /* line 301, main.less */ 368 | .me .belt { 369 | background: #ed023a; 370 | border: 1px solid #152131; 371 | height: 10px; 372 | left: 31px; 373 | position: absolute; 374 | top: 182px; 375 | width: 70px; 376 | z-index: 3; 377 | } 378 | /* line 311, main.less */ 379 | .me .skirt { 380 | background: #ed023a; 381 | background: none; 382 | border-color: #e9003a transparent; 383 | -webkit-border-image: none; 384 | -o-border-image: none; 385 | border-image: none; 386 | border-style: solid; 387 | border-width: 0px 30px 50px; 388 | height: 0; 389 | left: 1px; 390 | position: absolute; 391 | top: 194px; 392 | width: 72px; 393 | z-index: 3; 394 | border-radius: 0 0 50% 50%; 395 | } 396 | /* line 326, main.less */ 397 | .me .skirt .line { 398 | width: 1px; 399 | height: 30px; 400 | position: absolute; 401 | background: #000; 402 | top: 10px; 403 | -webkit-transform-origin: 0 0; 404 | -ms-transform-origin: 0 0; 405 | transform-origin: 0 0; 406 | } 407 | /* line 333, main.less */ 408 | .me .skirt .line.line1 { 409 | left: 10px; 410 | -webkit-transform: rotate(20deg); 411 | -ms-transform: rotate(20deg); 412 | transform: rotate(20deg); 413 | } 414 | /* line 337, main.less */ 415 | .me .skirt .line.line2 { 416 | left: 25px; 417 | -webkit-transform: rotate(10deg); 418 | -ms-transform: rotate(10deg); 419 | transform: rotate(10deg); 420 | } 421 | /* line 341, main.less */ 422 | .me .skirt .line.line3 { 423 | left: 35px; 424 | } 425 | /* line 344, main.less */ 426 | .me .skirt .line.line4 { 427 | right: 25px; 428 | -webkit-transform: rotate(-10deg); 429 | -ms-transform: rotate(-10deg); 430 | transform: rotate(-10deg); 431 | } 432 | /* line 348, main.less */ 433 | .me .skirt .line.line5 { 434 | right: 10px; 435 | -webkit-transform: rotate(-20deg); 436 | -ms-transform: rotate(-20deg); 437 | transform: rotate(-20deg); 438 | } 439 | /* line 354, main.less */ 440 | .me .leg { 441 | width: 12px; 442 | height: 40px; 443 | background: #fadbc7; 444 | border: 1px solid #152131; 445 | position: absolute; 446 | top: 220px; 447 | z-index: 2; 448 | } 449 | /* line 362, main.less */ 450 | .me .leg.left-leg { 451 | left: 40px; 452 | } 453 | /* line 365, main.less */ 454 | .me .leg.right-leg { 455 | left: 78px; 456 | } 457 | /* line 368, main.less */ 458 | .me .leg:after { 459 | content: ''; 460 | width: 12px; 461 | height: 16px; 462 | background: #fff; 463 | border: 1px solid #152131; 464 | border-bottom: 0; 465 | top: 40px; 466 | left: -1px; 467 | position: absolute; 468 | } 469 | /* line 380, main.less */ 470 | .me .stockings { 471 | width: 28px; 472 | height: 12px; 473 | background: #fff; 474 | border: 1px solid #152131; 475 | position: absolute; 476 | z-index: 1; 477 | -webkit-transform-origin: 0 0; 478 | -ms-transform-origin: 0 0; 479 | transform-origin: 0 0; 480 | } 481 | /* line 388, main.less */ 482 | .me .stockings.left-stockings { 483 | left: 21px; 484 | top: 275px; 485 | -webkit-transform: rotate(-20deg); 486 | -ms-transform: rotate(-20deg); 487 | transform: rotate(-20deg); 488 | border-radius: 50% 0 0 50%; 489 | } 490 | /* line 394, main.less */ 491 | .me .stockings.right-stockings { 492 | left: 83px; 493 | top: 265px; 494 | -webkit-transform: rotate(20deg); 495 | -ms-transform: rotate(20deg); 496 | transform: rotate(20deg); 497 | border-radius: 0 50% 50% 0; 498 | } 499 | /* line 401, main.less */ 500 | .me .shoes { 501 | width: 40px; 502 | height: 17px; 503 | position: absolute; 504 | z-index: 0; 505 | background: #a23030; 506 | -webkit-transform-origin: 0 0; 507 | -ms-transform-origin: 0 0; 508 | transform-origin: 0 0; 509 | border-radius: 50%; 510 | } 511 | /* line 409, main.less */ 512 | .me .shoes.left-shoes { 513 | left: 13px; 514 | top: 280px; 515 | -webkit-transform: rotate(-20deg); 516 | -ms-transform: rotate(-20deg); 517 | transform: rotate(-20deg); 518 | border-radius: 50% 0 0 50%; 519 | } 520 | /* line 415, main.less */ 521 | .me .shoes.right-shoes { 522 | left: 81px; 523 | top: 267px; 524 | -webkit-transform: rotate(20deg); 525 | -ms-transform: rotate(20deg); 526 | transform: rotate(20deg); 527 | border-radius: 0 50% 50% 0; 528 | } 529 | /* line 424, main.less */ 530 | .grandpa { 531 | position: absolute; 532 | top: 40px; 533 | left: 280px; 534 | z-index: 10; 535 | width: 126px; 536 | } 537 | /* line 430, main.less */ 538 | .grandpa .hairs { 539 | position: absolute; 540 | z-index: 3; 541 | width: 126px; 542 | } 543 | /* line 435, main.less */ 544 | .grandpa .hairs .hair { 545 | background: #152131; 546 | width: 1px; 547 | height: 5px; 548 | position: absolute; 549 | } 550 | /* line 440, main.less */ 551 | .grandpa .hairs .hair.hair1 { 552 | left: 40px; 553 | top: 12px; 554 | } 555 | /* line 444, main.less */ 556 | .grandpa .hairs .hair.hair2 { 557 | left: 50px; 558 | top: 8px; 559 | } 560 | /* line 448, main.less */ 561 | .grandpa .hairs .hair.hair3 { 562 | left: 62px; 563 | top: 5px; 564 | } 565 | /* line 452, main.less */ 566 | .grandpa .hairs .hair.hair4 { 567 | right: 50px; 568 | top: 8px; 569 | } 570 | /* line 456, main.less */ 571 | .grandpa .hairs .hair.hair5 { 572 | right: 40px; 573 | top: 12px; 574 | } 575 | /* line 462, main.less */ 576 | .grandpa .ear { 577 | width: 20px; 578 | height: 20px; 579 | background: #f8bb9f; 580 | border: 1px solid #152131; 581 | position: absolute; 582 | top: 90px; 583 | border-radius: 50%; 584 | z-index: 1; 585 | } 586 | /* line 471, main.less */ 587 | .grandpa .ear.left-ear { 588 | left: -10px; 589 | } 590 | /* line 474, main.less */ 591 | .grandpa .ear.right-ear { 592 | right: -10px; 593 | } 594 | /* line 478, main.less */ 595 | .grandpa .header { 596 | top: 10px; 597 | position: absolute; 598 | width: 126px; 599 | height: 180px; 600 | background: #f8bb9f; 601 | display: block; 602 | border-radius: 175% 175% 150% 150%; 603 | z-index: 2; 604 | border: 1px solid #152131; 605 | } 606 | /* line 488, main.less */ 607 | .grandpa .header:after { 608 | background: #f8bb9f; 609 | bottom: -12px; 610 | content: ""; 611 | height: 10px; 612 | left: 50%; 613 | margin-left: -7px; 614 | position: absolute; 615 | width: 14px; 616 | border: 1px solid #152131; 617 | } 618 | /* line 499, main.less */ 619 | .grandpa .header .bang { 620 | background: #152131; 621 | width: 1px; 622 | height: 3px; 623 | position: absolute; 624 | z-index: 1; 625 | top: 12px; 626 | } 627 | /* line 506, main.less */ 628 | .grandpa .header .bang.bang1 { 629 | left: 50px; 630 | -webkit-transform: rotate(-20deg); 631 | -ms-transform: rotate(-20deg); 632 | transform: rotate(-20deg); 633 | } 634 | /* line 510, main.less */ 635 | .grandpa .header .bang.bang2 { 636 | left: 63px; 637 | } 638 | /* line 513, main.less */ 639 | .grandpa .header .bang.bang3 { 640 | right: 50px; 641 | -webkit-transform: rotate(20deg); 642 | -ms-transform: rotate(20deg); 643 | transform: rotate(20deg); 644 | } 645 | /* line 518, main.less */ 646 | .grandpa .header .wrinkle { 647 | position: absolute; 648 | height: 1px; 649 | background: #152131; 650 | border-radius: 50%; 651 | } 652 | /* line 523, main.less */ 653 | .grandpa .header .wrinkle.wrinkle1 { 654 | top: 30px; 655 | width: 30px; 656 | left: 48px; 657 | } 658 | /* line 528, main.less */ 659 | .grandpa .header .wrinkle.wrinkle2 { 660 | top: 40px; 661 | width: 20px; 662 | left: 53px; 663 | } 664 | /* line 534, main.less */ 665 | .grandpa .header .brow { 666 | position: absolute; 667 | top: 60px; 668 | width: 50px; 669 | height: 30px; 670 | border-radius: 50%; 671 | background: #152131; 672 | } 673 | /* line 541, main.less */ 674 | .grandpa .header .brow:after { 675 | content: ""; 676 | position: absolute; 677 | border-radius: 50%; 678 | width: 60px; 679 | height: 30px; 680 | background: #f8bb9f; 681 | top: 1px; 682 | left: -1px; 683 | } 684 | /* line 551, main.less */ 685 | .grandpa .header .brow.left-brow { 686 | left: 20px; 687 | -webkit-transform: rotate(10deg); 688 | -ms-transform: rotate(10deg); 689 | transform: rotate(10deg); 690 | } 691 | /* line 555, main.less */ 692 | .grandpa .header .brow.right-brow { 693 | left: 67px; 694 | -webkit-transform: rotate(10deg); 695 | -ms-transform: rotate(10deg); 696 | transform: rotate(10deg); 697 | } 698 | /* line 560, main.less */ 699 | .grandpa .header .eye { 700 | position: absolute; 701 | top: 80px; 702 | width: 30px; 703 | height: 50px; 704 | border-radius: 50%; 705 | background: #152131; 706 | } 707 | /* line 568, main.less */ 708 | .grandpa .header .eye:after { 709 | content: ""; 710 | position: absolute; 711 | border-radius: 50%; 712 | width: 34px; 713 | height: 55px; 714 | background: #f8bb9f; 715 | top: 1px; 716 | left: 0px; 717 | } 718 | /* line 578, main.less */ 719 | .grandpa .header .eye.left-eye { 720 | left: 20px; 721 | -webkit-transform: rotate(30deg); 722 | -ms-transform: rotate(30deg); 723 | transform: rotate(30deg); 724 | } 725 | /* line 583, main.less */ 726 | .grandpa .header .eye.right-eye { 727 | left: 80px; 728 | top: 79px; 729 | -webkit-transform: rotate(-40deg) rotateY(160deg); 730 | transform: rotate(-40deg) rotateY(160deg); 731 | } 732 | /* line 589, main.less */ 733 | .grandpa .header .nose { 734 | width: 6px; 735 | height: 22px; 736 | position: absolute; 737 | top: 105px; 738 | left: 58px; 739 | background: #f8bb9f; 740 | z-index: 2; 741 | border: 1px solid #152131; 742 | border-radius: 50%; 743 | } 744 | /* line 599, main.less */ 745 | .grandpa .header .nose:after { 746 | content: ""; 747 | position: absolute; 748 | width: 4px; 749 | height: 22px; 750 | top: -5px; 751 | left: 1px; 752 | background: #f8bb9f; 753 | } 754 | /* line 609, main.less */ 755 | .grandpa .header .mouth { 756 | border: 1px solid #152131; 757 | z-index: 1; 758 | width: 30px; 759 | height: 30px; 760 | background: #d96b6e; 761 | position: absolute; 762 | top: 130px; 763 | left: 46px; 764 | border-radius: 50%; 765 | } 766 | /* line 619, main.less */ 767 | .grandpa .header .mouth:after { 768 | content: ""; 769 | width: 60px; 770 | height: 30px; 771 | background: #f8bb9f; 772 | position: absolute; 773 | top: -10px; 774 | left: -20px; 775 | border-radius: 50%; 776 | } 777 | /* line 632, main.less */ 778 | .grandpa .clothes { 779 | background: #a5d1d2; 780 | width: 100px; 781 | position: absolute; 782 | top: 200px; 783 | height: 130px; 784 | left: 14px; 785 | border-radius: 50% 50% 10% 10%; 786 | z-index: 2; 787 | border: 1px solid #152131; 788 | } 789 | /* line 642, main.less */ 790 | .grandpa .clothes .cover { 791 | border-radius: 50% 50% 10% 10%; 792 | width: 102px; 793 | height: 60px; 794 | background: #a5d1d2; 795 | position: absolute; 796 | top: 0; 797 | z-index: 3; 798 | } 799 | /* line 651, main.less */ 800 | .grandpa .clothes .collar { 801 | border-radius: 50% 50% 10% 10%; 802 | height: 130px; 803 | width: 100px; 804 | position: absolute; 805 | z-index: 4; 806 | background: #a5d1d2; 807 | overflow: hidden; 808 | } 809 | /* line 659, main.less */ 810 | .grandpa .clothes .collar:after { 811 | content: ""; 812 | position: absolute; 813 | width: 40px; 814 | height: 40px; 815 | border-radius: 50%; 816 | background: #a5d1d2; 817 | left: 30px; 818 | top: -20px; 819 | border: 1px solid #152131; 820 | z-index: 5; 821 | } 822 | /* line 673, main.less */ 823 | .grandpa .hand { 824 | z-index: 1; 825 | background: #a5d1d2; 826 | border: 1px solid #152131; 827 | border-radius: 90% 90% 50% 50%; 828 | height: 110px; 829 | left: -13px; 830 | position: absolute; 831 | top: 200px; 832 | width: 150px; 833 | } 834 | /* line 685, main.less */ 835 | .grandpa .trousers { 836 | border: 1px solid #152131; 837 | height: 140px; 838 | left: 16px; 839 | position: absolute; 840 | top: 331px; 841 | width: 96px; 842 | background: #6c8d6e; 843 | } 844 | /* line 693, main.less */ 845 | .grandpa .trousers:after { 846 | content: ""; 847 | -webkit-transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px); 848 | -ms-transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px); 849 | transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px); 850 | width: 400px; 851 | background: #ffef5e; 852 | height: 100px; 853 | left: -152px; 854 | position: absolute; 855 | top: 250px; 856 | } 857 | /* line 705, main.less */ 858 | .grandpa .footer { 859 | width: 30px; 860 | height: 15px; 861 | background: #a18883; 862 | position: absolute; 863 | top: 473px; 864 | } 865 | /* line 711, main.less */ 866 | .grandpa .footer.left-footer { 867 | width: 25px; 868 | left: 16px; 869 | } 870 | /* line 715, main.less */ 871 | .grandpa .footer.right-footer { 872 | left: 84px; 873 | } 874 | /* line 719, main.less */ 875 | .grandpa .shoes { 876 | width: 45px; 877 | height: 18px; 878 | position: absolute; 879 | top: 483px; 880 | background: #555a6d; 881 | } 882 | /* line 725, main.less */ 883 | .grandpa .shoes.left-shoes { 884 | border-radius: 50% 0 30% 50%; 885 | left: -4px; 886 | -webkit-transform: rotate(-10deg); 887 | -ms-transform: rotate(-10deg); 888 | transform: rotate(-10deg); 889 | } 890 | /* line 730, main.less */ 891 | .grandpa .shoes.right-shoes { 892 | border-radius: 0 50% 50% 30%; 893 | left: 84px; 894 | -webkit-transform: rotate(10deg); 895 | -ms-transform: rotate(10deg); 896 | transform: rotate(10deg); 897 | } 898 | --------------------------------------------------------------------------------