经典文件结构 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