纯css写的仿真图书翻页效果

最新推荐文章于 2024-07-23 16:28:55 发布

weixin_34235105

最新推荐文章于 2024-07-23 16:28:55 发布

阅读量344

点赞数

原文链接：https://my.oschina.net/xiaopihailaotou/blog/162611

版权

2019独角兽企业重金招聘Python工程师标准>>>

对css3研究越深入，越觉得惊艳。css3说不上是万能的，但是它能实现的效果也超出了我的想象。它的高效率和动画效果的流畅性很多情况下能替代js的作用。个人习惯css3能实现的效果就不会用js,虽然在国内貌似没有css3的用武之地，这一点完成不能阻挡我对css3的热情。博主是一个地道的开源支持者，在学习css3的过程中写的一些demo会贴出来跟大家分享，都是一些想法最简单的实现，当然会有很多问题，希望大家指正，一起学习，一起进步。

下面贴一个纯css3实现的仿真图书翻页效果，只是一个很粗糙的雏形，后续会慢慢完善。欢迎大家提供宝贵的意见。

效果图

老规矩先上demo跟下载地址

查看示例

下载地址

下面是源码：

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3-book</title>
<style> 

footer {
font:14px/1.3 'Microsoft YaHei';
margin-top:150px;	
color: #000;
font-size: 15px;
line-height: 1.6;
padding: 60px 20px 0;
text-align: center;
display: block;
}
footer a{
	color:#000;
    text-decoration:none;
}
footer a:hover{
	text-decoration:underline;
	}
@keyframes book
	{
	0%		{transform: rotate(0deg);left:0px;}
	25%		{transform: rotate(20deg);left:0px;}
	50%		{transform: rotate(0deg);left:500px;}
	55%		{transform: rotate(0deg);left:500px;}
	70%		{transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100%	{transform: rotate(-360deg);left:0px;}
	}

@-webkit-keyframes book
	{
	0%		{-webkit-transform: rotate(0deg);left:0px;}
	25%		{-webkit-transform: rotate(20deg);left:0px;}
	50%		{-webkit-transform: rotate(0deg);left:500px;}
	55%		{-webkit-transform: rotate(0deg);left:500px;}
	70%		{-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100%	{-webkit-transform: rotate(-360deg);left:0px;}

	}

@-moz-keyframes book
	{
	0%   {-moz-transform: rotate(0deg);left:0px;}
	25%  {-moz-transform: rotate(20deg);left:0px;}
	50%  {-moz-transform: rotate(0deg);left:500px;}
	55%  {-moz-transform: rotate(0deg);left:500px;}
	70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100% {-moz-transform: rotate(-360deg);left:0px;}
	}

@-o-keyframes book
	{
	0%   {transform: rotate(0deg);left:0px;}
	25%  {transform: rotate(20deg);left:0px;}
	50%  {transform: rotate(0deg);left:500px;}
	55%  {transform: rotate(0deg);left:500px;}
	70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100% {transform: rotate(-360deg);left:0px;}
	}
	.container{
	position:relative;
	height:155px;
	width:236px;
	margin:40px auto;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
     transform-style:preserve-3d;
	}
	.page2{
    
	width:236px;
	height:155px;
	overflow:hidden;
	-webkit-animation:page 5s ease 1s infinite alternate;
	-moz-animation:page 5s ease 1s infinite alternate;
	-o-animation:page 5s ease 1s infinite alternate;
	animation:page 5s ease 1s infinite alternate;
	}
	#page1
	{
	 position:absolute;
	 left:0px;
	 width:236px;
	 height:155px;
	 overflow:hidden;
	}
	#page2
	{
	 position:absolute;
	 left:236px;
	 width:0px;
	 height:155px;
	 overflow:hidden;
	 -webkit-animation:page2 2s ease 1s infinite alternate;
	 -moz-animation:page2 2s ease 1s infinite alternate;
	 -o-animation:page2 2s ease 1s infinite alternate;
	 animation:page2 2s ease 1s infinite alternate;
	}
	#page3
	{
	 position:absolute;
	 left:236px;
	 width:0px;
	 height:155px;
	 overflow:hidden;
	 -webkit-animation:page3 2s ease 1s infinite alternate;
	 -moz-animation:page3 2s ease 1s infinite alternate;
	 -o-animation:page3 2s ease 1s infinite alternate;
	 animation:page3 2s ease 1s infinite alternate;
	}
	#page3 img{
	margin-left:-128px;
	-webkit-animation:pagei3 2s ease 1s infinite alternate;
	-moz-animation:pagei3 2s ease 1s infinite alternate;
	-o-animation:pagei3 2s ease 1s infinite alternate;
	animation:pagei3 2s ease 1s infinite alternate;
	}
	@-webkit-keyframes page2
	{
    from {width: 0px;left:236px}
    to {width: 128px;left:0px}
    }
	@-moz-keyframes page2
	{
    from {width: 0px;left:236px}
    to {width: 128px;left:0px}
    }
	@-o-keyframes page2
	{
    from {width: 0px;left:236px}
    to {width: 128px;left:0px}
    }
	@keyframes page2
	{
    from {width: 0px;left:236px}
    to {width: 128px;left:0px}
    }
	@-webkit-keyframes page3
	{
    from {width: 0px;left:236px}
    to {width: 128px;left:128px}
    }
	@-moz-keyframes page3
	{
    from {width: 0px;left:236px}
    to {width: 128px;left:128px}
    }
	@-o-keyframes page3
	{
    from {width: 0px;left:236px}
    to {width: 128px;left:128px}
    }
	@keyframes page3
	{
    from {width: 0px;left:236px}
    to {width: 128px;left:128px}
    }
	@-webkit-keyframes pagei3
	{
    from {margin-left:-236px}
    to {margin-left:-128px}
    }
	@-moz-keyframes pagei3
	{
    from {margin-left:-236px}
    to {margin-left:-128px}
    }
	@-o-keyframes pagei3
	{
    from {margin-left:-236px}
    to {margin-left:-128px}
    }
	@keyframes pagei3
	{
    from {margin-left:-236px}
    to {margin-left:-128px}
    }
</style>
</head>
<body>
<div class="container">
<div class="page" id="page1">
<img src="1.jpg"/>
</div>
<div class="page" id="page2">
<img src="2.jpg"/>
</div>
<div class="page" id="page3">
<img src="2.jpg"/>
</div>
</div>
<footer>Tutorial by &nbsp;&nbsp;<a href="http://bloglaotou.duapp.com" target="_blank">sanyecao</a>&nbsp;&nbsp;©2013&nbsp;&nbsp;</footer>
</body>
</html>

转载于:https://my.oschina.net/xiaopihailaotou/blog/162611