很酷的HTML5电子书翻页动画特效_html5教程技巧

CSS Code复制内容到剪贴板

1. body, h2, p {
2. margin: 0;
3. padding: 0;
4. }
6. body {
7. background: url("../images/cover.jpg") no-repeat;
8. -webkit-background-size: cover;
9. -moz-background-size: cover;
10. -o-background-size: cover;
11. background-size: cover;
12. color: #333;
13. font-family: Helvetica, sans-serif;
14. text-align:center;
15. }
16. #shineflip {
17. /*background: url("../images/cover.jpg") no-repeat;*/
18. -o-background-size: 100% 100%;
19. -webkit-background-size: 100% 100%;
20. -moz-background-size: 100% 100%;
21. background-size: 100% 100%;
22. position: absolute;
23. }
25. #shineflip-pages
26. {
27. /* background-color:#fafafa;*/
28. background-repeat: repeat;
29. position: absolute;
30. z-index: 2;
31. }
33. #shineflip-pages section.cover_front, #shineflip-pages section.cover_background{
34. position: absolute;
35. overflow: hidden;
36. color: #ffffff;
37. }
39. #shineflip-pages .cover_front_content
40. {
41. position: absolute;
42. z-index: 1;
43. overflow:hidden;
44. whitewhite-space:nowrap;
45. -ms-user-select:none;
46. -webkit-user-select:none;
47. -moz-user-select:none;
48. }
50. #shineflip-pages .cover_front_back
51. {
52. position: absolute;
53. z-index: 0;
54. }
56. #shineflip-pages .cover_background_content
57. {
58. position: absolute;
59. z-index: 1;
60. overflow:hidden;
61. whitewhite-space:nowrap;
62. -ms-user-select:none;
63. -webkit-user-select:none;
64. -moz-user-select:none;
65. }
67. #shineflip-pages .cover_background_back
68. {
69. position: absolute;
70. z-index: 0;
71. }
73. #shineflip-pages section.pageflip
74. {
75. display: block;
76. position: absolute;
77. overflow: hidden;
78. }
80. #shineflip-pages section.page {
81. //background-color: #fafafa;
82. display: block;
83. position: absolute;
84. overflow: hidden;
85. }
86. #shineflip-pages-flipcontent,#shineflip-pages section>p {
87. display: block;
88. font-size: 12px;
89. position: absolute;
90. overflow: hidden;
91. width:100%;
92. height:100%;
93. }
94. #shineflip-pages-flipcontent,#shineflip-pages section>span {
95. display: block;
96. font-size: 12px;
97. position: absolute;
98. overflow: hidden;
99. }
100. #shineflip-pages-flipcontent p,
101. #shineflip-pages-flipcontent h2,
102. #shineflip-pages section p,
103. #shineflip-pages section h2 {
104. line-height: 1.4em;
105. text-align: justify;
106. }
108. #shineflip-canvas {
109. position: absolute;
110. z-index: 0;
111. }
113. #shineflip-page-mid-canvas {
114. position: absolute;
115. pointer-events: none;
116. z-index: 0;
117. }