Html
    Css
    Js

    
                        
@charset "utf-8";
	/*框架预览 CSS*/
.mkeBody {
	background:#121212;
}
.mkeHeadBox {
	padding:30px 10px;
	text-overflow:ellipsis;
	white-space:nowrap;
	margin:0;
	color:#fff;
	text-align:center;
	overflow:hidden;
	border-bottom:3px solid #666;
	box-shadow:inset 0 -2px 3px #000000;
	letter-spacing:1px;
	font:26px/26px "微软雅黑";
}
.mkeFooterBox {
	padding:25px 10px;
	text-overflow:ellipsis;
	margin:0;
	color:#fff;
	font-size:14px;
	line-height:24px;
	text-align:center;
	overflow:hidden;
	border-top:3px solid #666;
	box-shadow:inset 0 2px 3px #000000;
}
.mkeContentBox {
	background:#222222;
	padding:0
}
.mkeContentBox:after {
	height:0;
	clear:both;
}
.mkeFooterBox p,.mkeFooterBox div {
	padding:0;
	margin:0;
	line-height:26px;
	font-size:14px;
}
.mkeFooterBox a {
	color:#fff;
	white-space:nowrap
}
.mkeButton {
	background:#F36;
	display:inline-block;
	text-decoration:none;
	width:102px;
	border-radius:0.3em;
	transition:all 0.3s ease
}
.mkeButton:hover {
	background:#FF1550;
}
.mkeURL {
	font-size:24px;
}
.mkeFooterBox .mKeBannerAD {
	width:728px;
	height:90px;
	margin:18px auto 0;
}
.mkeFooterBox .mSmallKeBannerAD {
	display:none;
}
@media only screen and (max-width:900px) {
	.mkeButton {
	display:block;
	margin:8px auto 0;
}
}@media only screen and (max-width:767px) {
	.mkeHeadBox {
	font-size:18px;
	padding:15px 10px;
}
.mkeFooterBox p,.mkeFooterBox div {
	line-height:24px;
	font-size:12px;
}
.mkeURL {
	font-size:22px;
}
.mkeFooterBox .mKeBannerAD {
	display:none;
}
.mkeFooterBox .mSmallKeBannerAD {
	width:300px;
	height:250px;
	margin:18px auto 0;
	display:block;
}
}/*End*/

/*主要CSS*/
* {
	padding:0px;
	margin:0px;
	font-size:16px;
	font-family:"Microsoft YaHei";
}
a,a:link,a:visited,a:hover,a:active {
	text-decoration:none;
}
::-moz-selection {
	background:#338FFF;
	color:#fff;
}
::-webkit-selection {
	background:#338FFF;
	color:#fff;
}
::selection {
	background:#338FFF;
	color:#fff;
}
.clear::after {
	content:"";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
}
.response-img {
	display:block;
	max-width:100%;
}
.text-overflow {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
body {
	width:100%;
	max-width:1920px;
	min-width:1200px;
}
#knowledge {
	width:100%;
	height:100%;
	position:relative;
	color:#333;
	padding:40px 0;
}
.bookBox {
	width:1000px;
	height:600px;
	position:relative;
	margin:30px auto;
	-webkit-perspective-origin:50% 60%;
	perspective-origin:50% 60%;
	-webkit-perspective:1500px;
	perspective:1500px;
	background:url(http://www.jq22.com/img/cs/500x500-1.png) no-repeat 0 0;
	background-size:100% 100%;
}
.bookBox:hover .lastBtn {
	display:block;
}
.bookBox:hover .nextBtn {
	display:block;
}
/*书的高度*/
.bookPage {
	position:absolute;
	width:500px;
	height:580px;
	top:0;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-ms-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-transition:all linear 2s;
	-moz-transition:all linear 2s;
	-ms-transition:all linear 2s;
	-o-transition:all linear 2s;
	transition:all linear 2s;
	background:url(http://www.jq22.com/img/cs/500x500-2.png) no-repeat;
	background-size:479.26px 780px;
	background-position:20.74px 8.3px;
}
.bookPage img {
	position:absolute;
	top:50px;
	left:50px;
	display:inline-block;
	width:400px;
}
.bookWord {
	position:absolute;
	top:50px;
	left:50px;
	display:inline-block;
	width:360px;
	padding:20px;
	font-size:20px;
	line-height:27px;
	backface-visibility:visible;
	background-color:#f0f0f0;
	word-break:break-all;
	-webkit-column-count:2;
	-webkit-column-gap:40px;
	-moz-column-count:2;
	-moz-column-gap:40px;
	-ms-column-count:2;
	-ms-column-gap:40px;
	column-count:2;
	column-gap:40px;
}
.bookWord span {
	font-size:30px;
	font-weight:600;
	line-height:40px;
}
.frist {
	left:0;
	z-index:1;
}
.frist img {
	z-index:1;
}
.last {
	right:0;
	z-index:1;
}
.last p {
	z-index:1;
}
.runPage {
	right:0;
	-webkit-transform-origin:0 0;
	-moz-transform-origin:0 0;
	-ms-transform-origin:0 0;
	-o-transform-origin:0 0;
	transform-origin:0 0;
}
/*书的高度*/
.runPage,.bookPage:last-child {
	background:url(http://www.jq22.com/img/cs/500x500-3.png) no-repeat;
	background-size:479.26px 780px;
	background-position:0 8.3px;
}
.runClass {
	-webkit-transform:rotateY(-180deg);
	-moz-transform:rotateY(-180deg);
	-ms-transform:rotateY(-180deg);
	-o-transform:rotateY(-180deg);
	transform:rotateY(-180deg);
}
.lastBtn,.nextBtn {
	display:none;
	position:absolute;
	top:300px;
	cursor:pointer;
	z-index:999;
	font-size:50px;
	line-height:100px;
	color:#fff;
	text-decoration:none;
	background-color:rgba(0,0,0,.5);
}
.lastBtn {
	left:0;
}
.nextBtn {
	right:0;
}
.canvasBox {
	display:block;
	width:158px;
	height:158px;
}
/*页序号*/
.pageNumber {
	position:absolute;
	bottom:-40px;
	right:0;
	font-size:20px!important;
	line-height:30px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

HTML5电子书翻页动画特效

0