经典文件结构 html---CSS---JS
HTML中内容:
<div class="container isActive"> <div class="book"> <div class="book-paper"> <div class="book-paper-shadow"></div> </div> </div> <div class="book"> <div class="book-paper"> <div class="book-paper-shadow"></div> </div> </div> <div class="book"> <div class="book-paper"> <div class="book-paper-shadow"></div> </div> </div> </div> <footer id="footer" class="footer hidden"> <a href="http://codepen.io/WithAnEs/" target="_blank" class="withanes"><span class="withanes-name">Pen by WithAnEs</span> </a> </footer>
CSS中内容:
1 @import url(//fonts.googleapis.com/css?family=Quicksand:400,700); 2 3 a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { 4 5 margin: 0; 6 7 padding: 0; 8 9 border: 0; 10 11 font-size: 100%; 12 13 font-weight: inherit; 14 15 font-style: inherit; 16 17 font-family: inherit; 18 19 vertical-align: baseline; 20 21 } 22 23 24 25 body { 26 27 line-height: 1; 28 29 } 30 31 32 33 ol, ul { 34 35 list-style: none; 36 37 } 38 39 40 41 blockquote, q { 42 43 quotes: none; 44 45 } 46 47 48 49 blockquote:after, blockquote:before, q:after, q:before { 50 51 content: ‘‘; 52 53 content: none; 54 55 } 56 57 58 59 table { 60 61 border-collapse: collapse; 62 63 border-spacing: 0; 64 65 } 66 67 68 69 :focus { 70 71 outline: 0; 72 73 } 74 75 76 77 html { 78 79 -webkit-text-size-adjust: 100%; 80 81 -ms-text-size-adjust: 100%; 82 83 } 84 85 86 87 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { 88 89 display: block; 90 91 } 92 93 94 95 audio, canvas, picture, progress, video { 96 97 display: inline-block; 98 99 } 100 101 102 103 template { 104 105 display: none; 106 107 } 108 109 110 111 input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration { 112 113 -webkit-appearance: none; 114 115 } 116 117 118 119 input[type=search] { 120 121 -webkit-appearance: none; 122 123 -webkit-box-sizing: content-box; 124 125 -moz-box-sizing: content-box; 126 127 box-sizing: content-box; 128 129 } 130 131 132 133 textarea { 134 135 overflow: auto; 136 137 vertical-align: top; 138 139 resize: vertical; 140 141 } 142 143 144 145 ::-moz-focus-inner { 146 147 border: 0; 148 149 padding: 0; 150 151 } 152 153 154 155 body { 156 157 background-color: #333; 158 159 font-family: ‘Quicksand‘, sans-serif; 160 161 } 162 163 164 165 .hidden { 166 167 display: none; 168 169 } 170 171 172 173 .u-isVisuallyHidden { 174 175 width: 1px; 176 177 height: 1px; 178 179 padding: 0; 180 181 margin: -1px; 182 183 border: 0; 184 185 position: absolute; 186 187 clip: rect(0 0 0 0); 188 189 overflow: hidden; 190 191 } 192 193 194 195 .footer { 196 197 position: fixed; 198 199 right: 0; 200 201 bottom: 0; 202 203 left: 0; 204 205 } 206 207 208 209 .withanes { 210 211 display: block; 212 213 position: absolute; 214 215 right: 5px; 216 217 bottom: 5px; 218 219 width: 24px; 220 221 height: 32px; 222 223 } 224 225 .withanes:after { 226 227 content: ‘‘; 228 229 position: absolute; 230 231 top: -2px; 232 233 left: -2px; 234 235 width: 2px; 236 237 height: 2px; 238 239 box-shadow: 8px 2px #795f41, 10px 2px #795f41, 12px 2px #795f41, 14px 2px #795f41, 16px 2px #795f41, 18px 2px #795f41, 6px 4px #795f41, 8px 4px #795f41, 10px 4px #795f41, 12px 4px #795f41, 14px 4px #795f41, 16px 4px #795f41, 18px 4px #795f41, 20px 4px #795f41, 4px 6px #795f41, 6px 6px #795f41, 8px 6px #e9d8bc, 10px 6px #795f41, 12px 6px #795f41, 14px 6px #795f41, 16px 6px #795f41, 18px 6px #cbb490, 20px 6px #795f41, 22px 6px #795f41, 4px 8px #795f41, 6px 8px #e9d8bc, 8px 8px #e0c9a4, 10px 8px #e0c9a4, 12px 8px #e0c9a4, 14px 8px #e0c9a4, 16px 8px #e0c9a4, 18px 8px #cbb490, 20px 8px #cbb490, 22px 8px #795f41, 2px 10px #7e6f5d, 4px 10px #e9d8bc, 6px 10px #e0c9a4, 8px 10px #e0c9a4, 10px 10px #e0c9a4, 12px 10px #e0c9a4, 14px 10px #e0c9a4, 16px 10px #e0c9a4, 18px 10px #e0c9a4, 20px 10px #cbb490, 22px 10px #cbb490, 24px 10px #7e6f5d, 2px 12px #7e6f5d, 4px 12px #e9d8bc, 6px 12px #e0c9a4, 8px 12px #e0c9a4, 10px 12px #e0c9a4, 12px 12px #e0c9a4, 14px 12px #e0c9a4, 16px 12px #e0c9a4, 18px 12px #e0c9a4, 20px 12px #e0c9a4, 22px 12px #cbb490, 24px 12px #7e6f5d, 2px 14px #7e6f5d, 4px 14px #e9d8bc, 6px 14px #e0c9a4, 8px 14px #cbb490, 10px 14px #cbb490, 12px 14px #e0c9a4, 14px 14px #e0c9a4, 16px 14px #cbb490, 18px 14px #cbb490, 20px 14px #e0c9a4, 22px 14px #cbb490, 24px 14px #7e6f5d, 2px 16px #b6a281, 4px 16px #e9d8bc, 6px 16px #e0c9a4, 8px 16px #000000, 10px 16px #000000, 12px 16px #e9d8bc, 14px 16px #e0c9a4, 16px 16px #000000, 18px 16px #000000, 20px 16px #e0c9a4, 22px 16px #cbb490, 24px 16px #b6a281, 2px 18px #cbb490, 4px 18px #e9d8bc, 6px 18px #e0c9a4, 8px 18px #e0c9a4, 10px 18px #e0c9a4, 12px 18px #e9d8bc, 14px 18px #e0c9a4, 16px 18px #e0c9a4, 18px 18px #e0c9a4, 20px 18px #e0c9a4, 22px 18px #cbb490, 24px 18px #cbb490, 4px 20px #795f41, 6px 20px #e0c9a4, 8px 20px #e0c9a4, 10px 20px #e0c9a4, 12px 20px #e9d8bc, 14px 20px #e0c9a4, 16px 20px #e0c9a4, 18px 20px #e0c9a4, 20px 20px #e0c9a4, 22px 20px #795f41, 4px 22px #795f41, 6px 22px #e0c9a4, 8px 22px #e0c9a4, 10px 22px #e0c9a4, 12px 22px #cbb490, 14px 22px #cbb490, 16px 22px #e0c9a4, 18px 22px #e0c9a4, 20px 22px #cbb490, 22px 22px #795f41, 4px 24px #795f41, 6px 24px #795f41, 8px 24px #795f41, 10px 24px #795f41, 12px 24px #795f41, 14px 24px #795f41, 16px 24px #795f41, 18px 24px #795f41, 20px 24px #795f41, 22px 24px #795f41, 6px 26px #795f41, 8px 26px #795f41, 10px 26px #e0c9a4, 12px 26px #e0c9a4, 14px 26px #e0c9a4, 16px 26px #b6a281, 18px 26px #795f41, 20px 26px #795f41, 8px 28px #7e6f5d, 10px 28px #e0c9a4, 12px 28px #7e6f5d, 14px 28px #7e6f5d, 16px 28px #b6a281, 18px 28px #7e6f5d, 8px 30px #7e6f5d, 10px 30px #795f41, 12px 30px #7e6f5d, 14px 30px #7e6f5d, 16px 30px #795f41, 18px 30px #7e6f5d, 10px 32px #7e6f5d, 12px 32px #7e6f5d, 14px 32px #7e6f5d, 16px 32px #7e6f5d; 240 241 } 242 243 244 245 .withanes-name { 246 247 box-sizing: border-box; 248 249 position: absolute; 250 251 bottom: 4px; 252 253 right: 16px; 254 255 padding: 5px 7px; 256 257 width: 0; 258 259 text-align: center; 260 261 font-size: 12px; 262 263 font-weight: 700; 264 265 background-color: white; 266 267 opacity: 0; 268 269 transform: translateX(0); 270 271 color: black; 272 273 overflow: hidden; 274 275 transition: opacity 250ms ease-in-out, width 0 linear 250ms, transform 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 276 277 } 278 279 .withanes-name:after { 280 281 width: 0; 282 283 height: 0; 284 285 content: ‘‘; 286 287 position: absolute; 288 289 z-index: 2; 290 291 border-top: 5px solid transparent; 292 293 border-bottom: 5px solid transparent; 294 295 border-left: 8px solid white; 296 297 position: absolute; 298 299 top: calc(50% - 5px); 300 301 right: -6px; 302 303 } 304 305 306 307 .withanes:hover .withanes-name { 308 309 width: 120px; 310 311 overflow: visible; 312 313 opacity: 1; 314 315 transform: translateX(-20px) rotate(0deg); 316 317 box-shadow: 0 0 16px rgba(0, 0, 0, 0.33); 318 319 transition: opacity 125ms ease-in-out 100ms, transform 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 320 321 } 322 323 324 325 .grid { 326 327 display: block; 328 329 /* IE9 fallback for Flex */ 330 331 display: flex; 332 333 /* Using Flex for equal height containers */ 334 335 flex-wrap: wrap; 336 337 /* Children need to wrap */ 338 339 margin-top: -20px; 340 341 margin-left: -20px; 342 343 align-items: stretch; 344 345 /* For equal height */ 346 347 font-size: 0; 348 349 /* Horiontal gap fix for inline-block fallback */ 350 351 } 352 353 354 355 .grid + .grid { 356 357 margin-top: 0; 358 359 /* reset margin on stacked grids */ 360 361 } 362 363 364 365 .grid-col { 366 367 box-sizing: border-box; 368 369 /* Using box-sizing so padding doesn‘t affect width */ 370 371 display: inline-block; 372 373 /* IE9 fallback */ 374 375 width: 100%; 376 377 padding-top: 20px; 378 379 padding-left: 20px; 380 381 vertical-align: top; 382 383 font-size: 16px; 384 385 /* Resetting font-size for horizontal gap fix */ 386 387 } 388 389 390 391 .grid-col_1of12 { 392 393 width: 8.33333%; 394 395 } 396 397 398 399 .grid-col_2of12 { 400 401 width: 16.66667%; 402 403 } 404 405 406 407 .grid-col_3of12 { 408 409 width: 25%; 410 411 } 412 413 414 415 .grid-col_4of12 { 416 417 width: 33.33333%; 418 419 } 420 421 422 423 .grid-col_5of12 { 424 425 width: 41.66667%; 426 427 } 428 429 430 431 .grid-col_6of12 { 432 433 width: 50%; 434 435 } 436 437 438 439 .grid-col_7of12 { 440 441 width: 58.33333%; 442 443 } 444 445 446 447 .grid-col_8of12 { 448 449 width: 66.66667%; 450 451 } 452 453 454 455 .grid-col_9of12 { 456 457 width: 75%; 458 459 } 460 461 462 463 .grid-col_10of12 { 464 465 width: 83.33333%; 466 467 } 468 469 470 471 .grid-col_11of12 { 472 473 width: 91.66667%; 474 475 } 476 477 478 479 .grid-col_12of12 { 480 481 width: 100%; 482 483 } 484 485 486 487 @media (min-width: 768px) { 488 489 .grid-col_1of12SM { 490 491 width: 8.33333%; 492 493 } 494 495 496 497 .grid-col_2of12SM { 498 499 width: 16.66667%; 500 501 } 502 503 504 505 .grid-col_3of12SM { 506 507 width: 25%; 508 509 } 510 511 512 513 .grid-col_4of12SM { 514 515 width: 33.33333%; 516 517 } 518 519 520 521 .grid-col_5of12SM { 522 523 width: 41.66667%; 524 525 } 526 527 528 529 .grid-col_6of12SM { 530 531 width: 50%; 532 533 } 534 535 536 537 .grid-col_7of12SM { 538 539 width: 58.33333%; 540 541 } 542 543 544 545 .grid-col_8of12SM { 546 547 width: 66.66667%; 548 549 } 550 551 552 553 .grid-col_9of12SM { 554 555 width: 75%; 556 557 } 558 559 560 561 .grid-col_10of12SM { 562 563 width: 83.33333%; 564 565 } 566 567 568 569 .grid-col_11of12SM { 570 571 width: 91.66667%; 572 573 } 574 575 576 577 .grid-col_12of12SM { 578 579 width: 100%; 580 581 } 582 583 } 584 585 @media (min-width: 960px) { 586 587 .grid-col_1of12MD { 588 589 width: 8.33333%; 590 591 } 592 593 594 595 .grid-col_2of12MD { 596 597 width: 16.66667%; 598 599 } 600 601 602 603 .grid-col_3of12MD { 604 605 width: 25%; 606 607 } 608 609 610 611 .grid-col_4of12MD { 612 613 width: 33.33333%; 614 615 } 616 617 618 619 .grid-col_5of12MD { 620 621 width: 41.66667%; 622 623 } 624 625 626 627 .grid-col_6of12MD { 628 629 width: 50%; 630 631 } 632 633 634 635 .grid-col_7of12MD { 636 637 width: 58.33333%; 638 639 } 640 641 642 643 .grid-col_8of12MD { 644 645 width: 66.66667%; 646 647 } 648 649 650 651 .grid-col_9of12MD { 652 653 width: 75%; 654 655 } 656 657 658 659 .grid-col_10of12MD { 660 661 width: 83.33333%; 662 663 } 664 665 666 667 .grid-col_11of12MD { 668 669 width: 91.66667%; 670 671 } 672 673 674 675 .grid-col_12of12MD { 676 677 width: 100%; 678 679 } 680 681 } 682 683 .u-srOnly { 684 685 width: 1px; 686 687 height: 1px; 688 689 padding: 0; 690 691 margin: -1px; 692 693 border: 0; 694 695 position: absolute; 696 697 clip: rect(0 0 0 0); 698 699 overflow: hidden; 700 701 } 702 703 704 705 body { 706 707 background-color: #737373; 708 709 } 710 711 712 713 .container { 714 715 position: absolute; 716 717 top: 50%; 718 719 left: 50%; 720 721 transform: translate(-50%, -50%); 722 723 cursor: pointer; 724 725 } 726 727 .container:after { 728 729 content: ‘‘; 730 731 position: absolute; 732 733 right: -19px; 734 735 bottom: -6px; 736 737 left: -5px; 738 739 height: 9px; 740 741 border-radius: 50%; 742 743 background-color: rgba(0, 0, 0, 0.25); 744 745 z-index: -1; 746 747 transition: background-color 0.5s cubic-bezier(0.77, 0, 0.175, 1); 748 749 } 750 751 752 753 .book { 754 755 position: relative; 756 757 width: 120px; 758 759 height: 30px; 760 761 margin-left: 6px; 762 763 background-color: #FF5420; 764 765 border-radius: 5px; 766 767 box-shadow: inset 0 -5px #ff4007; 768 769 transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); 770 771 } 772 773 .book:before, .book:after { 774 775 content: ‘‘; 776 777 width: 12px; 778 779 height: 5px; 780 781 position: absolute; 782 783 left: -6px; 784 785 border-radius: 5px; 786 787 background-color: #FF5420; 788 789 } 790 791 .book:after { 792 793 bottom: 0; 794 795 background-color: #ff4007; 796 797 } 798 799 800 801 .book-paper { 802 803 position: absolute; 804 805 top: 5px; 806 807 bottom: 5px; 808 809 width: 40px; 810 811 background-color: #f1f1f1; 812 813 border-top-right-radius: 3px; 814 815 border-bottom-right-radius: 3px; 816 817 } 818 819 .book-paper:before, .book-paper:after { 820 821 content: ‘‘; 822 823 position: absolute; 824 825 right: 0; 826 827 width: 20px; 828 829 height: 6px; 830 831 background-color: #dddddd; 832 833 border-radius: 3px; 834 835 } 836 837 .book-paper:before { 838 839 border-bottom-right-radius: 0; 840 841 } 842 843 .book-paper:after { 844 845 bottom: 0; 846 847 border-top-right-radius: 0; 848 849 } 850 851 852 853 .book-paper-shadow { 854 855 position: absolute; 856 857 top: 6px; 858 859 right: 0; 860 861 width: 13px; 862 863 height: 8px; 864 865 background-color: #dddddd; 866 867 } 868 869 .book-paper-shadow:before { 870 871 content: ‘‘; 872 873 position: absolute; 874 875 top: 0; 876 877 bottom: 0; 878 879 left: -3px; 880 881 width: 8px; 882 883 border-radius: 3px; 884 885 background-color: #f1f1f1; 886 887 } 888 889 890 891 .book:nth-child(1) { 892 893 left: 6px; 894 895 } 896 897 898 899 .book:nth-child(2) { 900 901 background-color: #4D4D4D; 902 903 box-shadow: inset 0 -5px #404040; 904 905 } 906 907 .book:nth-child(2):before { 908 909 background-color: #4D4D4D; 910 911 } 912 913 .book:nth-child(2):after { 914 915 background-color: #404040; 916 917 } 918 919 920 921 .book:nth-child(3) { 922 923 left: 8px; 924 925 background-color: #2BA7FF; 926 927 box-shadow: inset 0 -5px #129cff; 928 929 } 930 931 .book:nth-child(3):before { 932 933 background-color: #2BA7FF; 934 935 } 936 937 .book:nth-child(3):after { 938 939 background-color: #129cff; 940 941 } 942 943 944 945 .container:hover:after, 946 947 .container:focus:after { 948 949 background-color: rgba(0, 0, 0, 0.18); 950 951 } 952 953 .container:hover .book:nth-child(1), 954 955 .container:focus .book:nth-child(1) { 956 957 transform: translate(6px, -37px) rotateZ(-13deg); 958 959 } 960 961 .container:hover .book:nth-child(2), 962 963 .container:focus .book:nth-child(2) { 964 965 transform: translate(9px, -11px) rotateZ(11deg); 966 967 }
原文地址:https://www.cnblogs.com/mhxy13867806343/p/8447169.html
时间: 2024-11-08 19:50:15