멋진 HTML5 전자책 페이지 넘김 애니메이션 효과_html5 튜토리얼 기술

이 기사에서는 멋진 HTML5 전자책 페이지 넘기기 애니메이션 효과를 공유합니다. 이 HTML5 페이지 넘기기 애니메이션은 마우스를 사용하여 페이지를 드래그하여 수동 페이지 넘기기 효과를 시뮬레이션할 수도 있습니다. 페이지를 빠르게 넘기려면 이전에 HTML5 3D 책 페이지 넘김 효과를 공유한 적이 있는데, 3D 시각 효과가 더 강렬합니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2016/html5-book-page/

구현 코드:

XML/HTML 코드클립보드에 콘텐츠 복사

1. <div id="shineflip" >  
2.       <div id="shinelip- 페이지">  
3.           <캔버스 id="shineflip- 캔버스">캔버스>  
4.           <캔버스 id="shineflip- 페이지 중간 캔버스">캔버스>  
5.           <섹션 수업="페이지" >  
6.              <div><img src="images/0.jpg" 너비= "475" 높이="482" /> div>  
7.              <스팬 스타일="왼쪽: 18px;"><img src="images/zh.png" 높이="482"  />스팬>  
8.           섹션>  
9.           <섹션 수업="페이지"  스타일="배경:url(images/left_pk.jpg)">  
10.              <div><img src="images/1.jpg" 너비= "466" 높이="463" 스타일="float:right;margin-top:9px;" /> div>  
11.           섹션>  
12.           <섹션 수업="페이지" >  
13.              <div><img src="images/2.jpg" 너비= "466" 높이="463" 스타일="float:left;margin-top:9px;" /> div>  
14.           섹션>  
15.           <섹션 수업="페이지" >  
16.              <div><img src="images/3.jpg" 너비= "466" 높이="463" 스타일="float:right;margin-top:9px;" /> div>  
17.           섹션>  
18.           <섹션 수업="페이지" >  
19.              <div><img src="images/4.jpg" 너비= "466" 높이="463" 스타일="float:left;margin-top:9px;" /> div>  
20.           섹션>  
21.           <섹션 수업="페이지" >  
22.              <div><img src="images/5.jpg" 너비= "466" 높이="463" 스타일="float:right;margin-top:9px;" /> div>  
23.           섹션>  
24.           <섹션 수업="페이지"  스타일="배경:url(images/right_pk.jpg)">  
25.              <div><img src="images/6.jpg" 너비= "466" 높이="463" 스타일="float:left;margin-top:9px;" /> div>  
26.           섹션>  
27.           <섹션 수업="페이지" >  
28.              <div><img src="images/24.jpg" 너비= "475" 높이="482" /> div>  
29.              <스팬 스타일="오른쪽: 18px;"><img src="images/zh.png" 높이="482"  />스팬>  
30.           섹션>  
31.       div>  
32.   div>  

CSS样式：

CSS 코드复复内容到剪贴板

1. 몸, h2, p {   
2.  여백: 0;   
3.  패딩: 0;   
4. }   
5.   
6. 본문 {   
7.  배경: url("../images/cover.jpg" ) 반복 금지;   
8.  -webkit-배경-크기: 표지;   
9.     -moz-배경-크기: 표지;   
10.     -o-배경-크기: 표지;   
11.     배경-크기: 표지;   
12.  색상: #333;   
13.  글꼴군: Helvetica, sans-serif;   
14.  텍스트 정렬:가운데;   
15. }   
16. #shineflip {   
17.  /*배경: url("../images/cover.jpg") 반복 없음;*/  
18.  -o-배경-크기: 100% 100%;    
19.  -webkit-배경-크기: 100% 100%;   
20.  -moz-배경-크기: 100% 100%;   
21.  배경-크기: 100% 100%;   
22.  위치: 절대;   
23. }   
24.   
25. #shinef립페이지    
26. {   
27. /*    배경색:#fafafa;*/  
28.     백그라운드 반복: 반복;   
29.     위치: 절대;   
30.     z-색인: 2;   
31. }   
32.   
33. #shineflip-pages section.cover_front, #shineflip-pages section.cover_Background{   
34.  위치: 절대;   
35.  오버플로: 숨김;   
36.  색상: #ffffff;   
37. }  
38.   
39. #shineflip-pages .cover_front_content   
40. {   
41.  위치: 절대;    
42.  z-색인: 1;   
43.  오버플로:숨김;   
44.  흰색공백:nowrap;   
45.  -ms-user-select:없음;   
46.  -webkit-user-select:없음;   
47.  -moz-user-select:없음;   
48. }   
49.   
50. #shineflip-pages.cover_front_back   
51. {   
52.  위치: 절대;    
53.  z-색인: 0;   
54. }   
55.   
56. #shineflip-pages .cover_Background_content   
57. {   
58.  위치: 절대;    
59.  z-색인: 1;   
60.  오버플로:숨김;   
61.  흰색공백:nowrap;   
62.  -ms-user-select:없음;   
63.  -webkit-user-select:없음;   
64.  -moz-user-select:없음;   
65. }   
66.   
67. #shineflip-pages.cover_Background_back   
68. {   
69.  위치: 절대;    
70.  z-색인: 0;   
71. }   
72.   
73. #shineflip-pages section.pageflip    
74. {   
75.  디스플레이: 차단;   
76.  위치: 절대;   
77.  오버플로: 숨김;   
78. }  
79.   
80. #shinef립페이지 섹션.페이지 {   
81.     //배경색: #fafafa;   
82.  디스플레이: 차단;   
83.  위치: 절대;   
84.  오버플로: 숨김;   
85. }   
86.  #shineflip-pages-flipcontent,#shineflip-pages 섹션>div {   
87.   디스플레이: 차단;   
88.   글꼴 크기: 12px;   
89.   위치: 절대;   
90.   오버플로: 숨김;   
91.   너비:100%;   
92.   높이:100%;   
93.  }   
94.  #shineflip-pages-flipcontent,#shineflip-pages 섹션>span {   
95.   디스플레이: 차단;   
96.   글꼴 크기: 12px;   
97.   위치: 절대;   
98.   오버플로: 숨김;   
99.  }   
100.  #shineflip-pages-flipcontent p,   
101.  #shineflip-pages-flipcontent h2,   
102.  #shineflip-pages 섹션 p,   
103.  #shineflip-pages 섹션 h2 {   
104.   줄 높이: 1.4em;   
105.   텍스트 정렬: 양측 정렬;   
106.  }   
107.   
108. #shinef립 캔버스 {   
109.  위치: 절대;   
110.  z-색인: 0;   
111. }
113. #shineflip-page-mid-canvas {
114. 위치: 절대
115. 포인터-이벤트: 없음
116. z-색인: 0
117. }

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.