CSS3实现逼真翻书效果代码下载


CSS3实现逼真翻书效果代码下载
CSS3实现逼真翻书效果代码下载以及实现逼真翻书等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代码

<div style="height:500px; width:100%; position:relative;">
	<!-- 书的主体 -->
	<div class="book preserve-3d">
		<!-- 书的最后一页 -->
		<div class="book-page-box book-page-4 preserve-3d">
			<div class="book-page page-front">
				<p>第三页</p>
			</div>
		</div>
		<!-- 书的第三页 -->
		<div class="book-page-box book-page-3 preserve-3d flip-animation-3">
			<div class="book-page page-front">
				<p>第二页</p>
			</div>
		</div>
		<!-- 书的第二页 -->
		<div class="book-page-box book-page-2 preserve-3d flip-animation-2">
			<div class="book-page page-front">
				<p>第一页</p>
			</div>
		</div>
		<!-- 书的封面 -->
		<div class="book-page-box book-page-1 preserve-3d flip-animation-1">
			<div class="book-page page-front">
				<p>
					翻页特效
					<br>
					flip-book
				</p>
			</div>
		</div>
	</div>
</div>
<div style="text-align:center;margin:20px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>

相关推荐

发表评论

相关文章