[代码分享]CSS3翻书Book效果

2014-08-26 03:13:45 -0400

代码说明

CSS3制作实现的翻书效果，呵呵，个人觉得是比较基础的那种效果，与逼真的翻书效果相比，还差一点，不过从中，可以学习到很多CSS3的技巧，了解一下CSS3中相关属性的用法，也是很不错的事情，希望CSS3初学者能够喜欢。

HTML代码

<!DOCTYPE>
<html>
<head>
<style>
.table{border-collapse:collapse;width:100%;box-shadow:5px 5px 1px 1px #aaaaaa;}
.table,.table th,.table td{border:solid 1px #7788aa}
.table th{color:white;background-color:#556677}
#rotateDiv{width:600px}
#pager{padding-right:10px}
#pager .button{display:inline-block;width:75px;height:35px;line-height:35px;border:solid 1px #22aaff;text-align:center;vertical-align:center;border-radius:5px}
#pager .button:hover{background-color:#1188ee;cursor:pointer;color:white;-webkit-transform:scale(1.1,1.1)}
#pager .button:active{background-color:#0055aa;cursor:pointer;color:white;-webkit-transform:scale(0.95,0.95)}
.animation-rotate-left{-webkit-animation:rotate-left 0.5s ease-in}
.animation-rotate-left-back{-webkit-animation:rotate-left-back 0.5s ease-out}
.animation-rotate-right{-webkit-animation:rotate-right 0.5s ease-in}
.animation-rotate-right-back{-webkit-animation:rotate-right-back 0.5s ease-out}
@-webkit-keyframes rotate-left{0%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:1} 100%{-webkit-transform:perspective(1200px) rotateY(-90deg);opacity:0.5}}
@-webkit-keyframes rotate-left-back{0%{-webkit-transform:perspective(1200px) rotateY(90deg);opacity:0.5} 100%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:1}}
@-webkit-keyframes rotate-right{0%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:1} 100%{-webkit-transform:perspective(1200px) rotateY(90deg);opacity:0.5}}
@-webkit-keyframes rotate-right-back{0%{-webkit-transform:perspective(1200px) rotateY(-90deg);opacity:0.5} 100%{-webkit-transform:perspective(1200px) rotateY(0deg);opacity:1}} 
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="http://www.codefans.net/jscss/demoimg/wall5.jpg"/>
</div>
<div class="page" id="page2">
<img src="http://www.codefans.net/jscss/demoimg/wall6.jpg"/>
</div>
<div class="page" id="page3">
<img src="http://www.codefans.net/jscss/demoimg/wall7.jpg"/>
</div>
</div>
<footer>luozhihao.wodemo com</a> 2014  </footer>
</body>
</html>

代码演示

«Newer Older»

Back to home

Subscribe | Register | Login | N