css3幾種常見的翻頁特效
阿新 • • 發佈:2018-11-26
翻頁特效
html:
<div class="book preserve-3d"> <div class="now_page point"> <div class="book-page"> <p>第三頁</p> </div> </div> <div class="now_page point"> <div class="book-page"> <p>第二頁</p> </div> </div> <div class="now_page point"> <div class="book-page "> <p>第一頁</p> </div> </div> <!--封面--> <div class="point now_page"> <div class="book-page first-page"> <p>封面</p> </div> </div> </div>
css:
.book{ height: 10rem; width: 40%; background: #FFF; position: absolute; right:10%; top:4rem; transform: rotateX(30deg); -webkit-transform: rotateX(30deg); -ms-transform: rotateX(30deg); -o-transform: rotateX(30deg); } /*每頁的公共樣式*/ .book-page { position: absolute; top: 0; left: 0; width: 100%; height:10rem; border: 1px solid #1976D2; text-align: center; background-color: #fff; } .book-page p{ font-size: 1.2rem; margin-top: 2rem; color: #ff6300; backface-visibility:hidden; -webkit-backface-visibility:hidden; } /*首頁樣式*/ .first-page{ background-color: #1976D2; } /*動畫部分*/ /*I'm the home page動畫*/ .flip-animation-start { animation: flipBook1 3s forwards; -moz-animation: flipBook1 3s forwards; /* Firefox */ -webkit-animation: flipBook1 3s forwards; /* Safari and Chrome */ -o-animation: flipBook1 3s forwards; /* Opera */ } .flip-animation-end { animation: flipBook2 3s forwards; -moz-animation: flipBook2 3s forwards; /* Firefox */ -webkit-animation: flipBook2 3s forwards; /* Safari and Chrome */ -o-animation: flipBook2 3s forwards; /* Opera */ } @keyframes flipBook1 { 0% { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg); } } /*關閉書頁*/ @keyframes flipBook2 { 0% { -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); } }
js:
$('.now_page').click(function(){
if($(this).hasClass('flip-animation-start')){
$(this).removeClass('flip-animation-start').addClass('flip-animation-end');
}else{
$(this).removeClass('flip-animation-end').addClass('flip-animation-start');
}
})
這樣寫出來的翻頁效果在正反面都可看見,如果想要隱藏反面可見,需要用到css3屬性:backface-visibility:hidden;這個屬性可以在元素在反面是隱藏。
反面隱藏
加入backface-visibility屬性,注意:此條屬性要搭配父級擁有屬性transform-style: preserve-3d才可生效,必要時可以給所有父級新增。
.book-page p{
font-size: 1.2rem;
margin-top: 2rem;
color: #ff6300;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
效果:
雙面展示不同內容
如果想在同一頁的正反面展示不同的內容,此時將上一條的backface-visibility屬性靈活運用一下即可。即先將背面的內容倒轉,這樣背面的內容在正面時隱藏,在反面時顯示。
<!--封面-->
<div class="point now_page preserve-3d">
<div class="book-page first-page preserve-3d">
<p>封面</p>
</div>
<div class="back_book_page preserve-3d">
<p>反面</p>
</div>
</div>
css:
/*反面*/
.back_book_page{width:100%;background:#ff6300;height:10rem;position:absolute;top:0;left:0;transform:rotateY(180deg);}
.back_book_page>p{color:white;font-size:1.2rem;text-align:center;margin-top:2rem;}
效果: