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