采用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 }