纯css3写的仿真图书翻页效果
对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 <a href="http://bloglaotou.duapp.com" target="_blank">sanyecao</a> ©2013 </footer> </body> </html>
<!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 <a href="http://bloglaotou.duapp.com" target="_blank">sanyecao</a> ©2013 </footer> </body> </html>
