纯html+css3翻书效果
1、新建html文档。
2、书写hmtl代艨位雅剖码。<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>
3、初始化css代码。<style>* { margin: 0; padding: 0 }html { overflow-y: scroll }body, h1, h2, h3, p, div, dl, dt, dd, ul, ol, li, table, th, td, form, button, input, textarea, legend, hr { padding: 0; margin: 0 }body { padding: 0; margin: 0; color: #333; font: 12px/18px "微软雅黑", arial; height: 100% }button, input, select, textarea { font-size: 100% }textarea { font: 14px/20px "微软雅黑" }button { border: 0 }li { list-style: none }img { border: 0; }a { color: #06c; text-decoration: none; cursor: pointer; outline: none; hide-focus:expression(this.hideFocus = true);}a:hover { color: #06c; text-decoration: underline }.left{ float:left;}.right{ float:right;}.clear:after,ul:after{content:"";display:block;visibility:hidden;height:0;clear:both;}.clear,.area,.con:after{zoom:1}</style>
4、书写css代码。.book { position: absolute; top: 50%; left: 50%; margin-top: -150px; width: 300px; height: 300px; background-color: #fff; -webkit-transform: rotateX(30deg); -ms-transform: rotateX(30deg); -o-transform: rotateX(30deg); transform: rotateX(30deg); }.preserve-3d { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }.book-page { position: absolute; top: 0; left: 0; width: 300px; height: 300px; border: 1px solid #1976D2; text-align: center; }.book-page-box { -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }@keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}@-moz-keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}@-webkit-keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}@-o-keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}@keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}@-moz-keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}@-webkit-keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}@-o-keyframes flipBook2 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-150deg); -ms-transform: rotateY(-150deg); -o-transform: rotateY(-150deg); transform: rotateY(-150deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}@keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}@-moz-keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}@-webkit-keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}@-o-keyframes flipBook3 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);} 50% { -webkit-transform: rotateY(-140deg); -ms-transform: rotateY(-140deg); -o-transform: rotateY(-140deg); transform: rotateY(-140deg);} 100% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg);}}.book-page-1 .page-front { background-color: #1976D2; }.book-page-1 .page-back { background-color: #fff; }.book-page-1 .page-front p { font-size: 30px; color: #fff; margin-top: 100px; }.flip-animation-1 { animation: flipBook1 17s; -moz-animation: flipBook1 17s; /* Firefox */ -webkit-animation: flipBook1 17s; /* Safari and Chrome */ -o-animation: flipBook1 17s; }/*书的第二页*/.book-page-2 .page-back, .book-page-2 .page-front { background-color: #fff; }.book-page-2 .page-front p { font-size: 30px; color: #1976D2; margin-top: 100px; }.flip-animation-2 { animation: flipBook2 13s 2s; -moz-animation: flipBook2 13s 2s; /* Firefox */ -webkit-animation: flipBook2 13s 2s; /* Safari and Chrome */ -o-animation: flipBook2 13s 2s; }/*书的第三页*/.book-page-3 .page-back, .book-page-3 .page-front { background-color: #fff; }.book-page-3 .page-front p { font-size: 30px; color: #1976D2; margin-top: 100px; }.flip-animation-3 { animation: flipBook3 10s 3s; -moz-animation: flipBook3 10s 3s; /* Firefox */ -webkit-animation: flipBook3 10s 3s; /* Safari and Chrome */ -o-animation: flipBook3 10s 3s; }/*书的第四页*/.book-page-4 .page-front p { font-size: 30px; color: #1976D2; margin-top: 100px; }
5、代码整体结构。
6、查看效果。
