使用CSS實(shí)現(xiàn)簡(jiǎn)單的翻頁(yè)效果
我要評(píng)論基本原理
我們先來(lái)看一下翻頁(yè)的過(guò)程動(dòng)圖，如下：
觀察動(dòng)圖，大致將此翻頁(yè)過(guò)程分為三個(gè)狀態(tài)，書頁(yè)未翻開、書頁(yè)翻動(dòng)中、書頁(yè)翻動(dòng)完成，對(duì)應(yīng)的是“圖 翻頁(yè)過(guò)程”?？梢钥闯?，翻頁(yè)過(guò)程中，第二頁(yè)是壓在第一頁(yè)上的，隨著旋轉(zhuǎn)角度增加，覆蓋面積逐漸增大，翻頁(yè)完成時(shí)，第二頁(yè)完全覆蓋第一頁(yè)，據(jù)此畫出兩頁(yè)的狀態(tài)，如圖“圖 翻頁(yè)簡(jiǎn)析”。
到此，可以用代碼先把項(xiàng)目的樹形結(jié)構(gòu)先寫出來(lái)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS實(shí)現(xiàn)翻頁(yè)效果</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
min-height: 100vh;
}
h1 {
position: absolute;
top: 20px;
left: 0;
width: 100%;
font-size: 36px;
text-align: center;
margin-top: 100px;
}
article {
position: relative;
width: 300px;
height: 400px;
padding: 40px 80px 40px 380px;
background-color: bisque;
margin: auto;
}
.book {
background-color: cornflowerblue;
position: relative;
}
.pageItem {
position: absolute;
width: 300px;
height: 400px;
font-size: 32px;
line-height: 400px;
text-align: center;
background-color: #fda3a3;
}
.front {
background-color: #fac8bf;
z-index: 10;
}
.back {
background-color: #a990d2;
z-index: 10;
}
</style>
</head>
<body>
<h1>CSS實(shí)現(xiàn)翻頁(yè)效果</h1>
<article>
<div class="book">
<div class="pageItem front">Page 1</div>
<div class="pageItem back">Page 2</div>
<div class="pageItem">Page 3</div>
</div>
</article>
</body>
</html>代碼實(shí)現(xiàn)
觀察“圖 翻頁(yè)簡(jiǎn)析”得出page2旋轉(zhuǎn)，page1保持不動(dòng)，即可基本模擬出翻頁(yè)效果，運(yùn)用css的動(dòng)畫效果可以實(shí)現(xiàn)page2的連續(xù)旋轉(zhuǎn)，而動(dòng)畫的初始狀態(tài)對(duì)應(yīng)的是“圖 翻頁(yè)簡(jiǎn)析”的①，結(jié)束狀態(tài)則對(duì)應(yīng)③，接下來(lái)需要確定的是旋轉(zhuǎn)中心點(diǎn)以及旋轉(zhuǎn)軸，旋轉(zhuǎn)中心點(diǎn)可以是不斷變化的，但為了方便，我們?nèi)∫还潭ㄐD(zhuǎn)中心點(diǎn)就好，“圖 翻頁(yè)簡(jiǎn)析”中三條輔助線的相交點(diǎn)大致在左下方，可以確定旋轉(zhuǎn)中心點(diǎn)的位置范圍。以代碼圖形大小為基準(zhǔn)，畫出對(duì)應(yīng)的坐標(biāo)系以及旋轉(zhuǎn)中心點(diǎn)，如“圖 旋轉(zhuǎn)示意圖”：
在上圖中，旋轉(zhuǎn)中心點(diǎn)為點(diǎn)A，旋轉(zhuǎn)軸為線AB，另外，初始旋轉(zhuǎn)角度即∠DAB的大小，記∠ACD為角c，∠DAB=2∠DAC=2(90-∠ACD)=180-2c，由tanc=AD/CD,求出c≈33.7,可得∠DAB=112.6。
修改代碼，為page2添加旋轉(zhuǎn)動(dòng)畫：
.back {
//...
left: -300px;
transform-origin:300px 600px;
transform: rotate(112.6deg);
transition: 1s;
}
article:hover .back{
transform: rotate(0deg);
}考慮到翻頁(yè)是折角，相當(dāng)于page1隱藏折角，而page2只顯示這一部分折角，page1和page2顯示隱藏的劃分是線AC，在線AC左邊顯示，右邊隱藏，翻頁(yè)過(guò)程中，線AC也是在旋轉(zhuǎn)的。要實(shí)現(xiàn)部分顯示功能，css中的overflow:hidden不就可以。想象一下，一個(gè)以線AC為邊線的盒子套上page1和page2,使得盒子內(nèi)的內(nèi)容顯示，盒子外則隱藏，那不就能達(dá)到我們想要的效果了嗎？當(dāng)然，此父盒子也是要同步旋轉(zhuǎn)的，但是，由于盒子內(nèi)的元素也會(huì)和盒子旋轉(zhuǎn)相同的角度，那我們?cè)ǖ男D(zhuǎn)角度就會(huì)因此發(fā)生偏移，如下圖①：
如上圖所示，添加父盒子，設(shè)定父盒子的旋轉(zhuǎn)中心點(diǎn)同是點(diǎn)A。偏移的角度即上圖③中父盒子的旋轉(zhuǎn)角度，該角和角c為內(nèi)錯(cuò)角，因此該旋轉(zhuǎn)角度為33.7°。page1和page2只要朝反方向旋轉(zhuǎn)相同的角度就能回復(fù)原本位置。編寫代碼時(shí)按照上圖步驟一步步進(jìn)行調(diào)整，最終添加父盒子后的代碼為：
<style>
.rotateBox {
position: absolute;
z-index: 10;
width: 800px;
height: 800px;
bottom: -600px;
transform-origin: 0px 800px;
/* border: 4px dashed #b0b0b0; */
transform: rotate(-33.7deg);
transition: 1s;
overflow: hidden;
}
.front {
//...
//- z-index: 10;
bottom: 200px;
transform-origin: 0 600px;
transform: rotate(33.7deg);
transition: 1s;
}
.back {
//...
//- z-index: 10;
//- transform-origin:300px 600px;
//- transform: rotate(112.6deg);
transform-origin: 300px 600px;
transform: rotate(146.3deg);
bottom: 200px;
}
article:hover .rotateBox {
transform: rotate(-90deg);
}
article:hover .front {
transform: rotate(90deg);
}
article:hover .back {
//- transform: rotate(0deg);
transform: rotate(90deg);
}
</style>頁(yè)面美化
最后，為了使效果更為逼真，添加相應(yīng)的陰影，替換圖片進(jìn)行美化。
最終代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS實(shí)現(xiàn)翻頁(yè)效果</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
min-height: 100vh;
}
h1 {
position: absolute;
top: 20px;
left: 0;
width: 100%;
font-size: 36px;
text-align: center;
margin-top: 100px;
}
article {
position: relative;
width: 300px;
height: 400px;
padding: 40px 80px 40px 380px;
margin: auto;
box-shadow: 2px 3px 5px 6px #3f1300;
background-image: url(https://cdn.pixabay.com/photo/2016/12/18/09/05/trees-1915245_1280.jpg);
}
.book {
background-color: cornflowerblue;
position: relative;
}
.rotateBox {
position: absolute;
z-index: 10;
width: 800px;
height: 800px;
bottom: -600px;
transform-origin: 0px 800px;
/* border: 4px dashed #b0b0b0; */
transform: rotate(-33.7deg);
transition: 1s;
overflow: hidden;
}
.pageItem {
position: absolute;
width: 300px;
height: 400px;
font-size: 32px;
text-align: center;
box-shadow: 0 0 11px rgba(0, 0, 0, .5);
}
.front {
bottom: 200px;
transform-origin: 0 600px;
transform: rotate(33.7deg);
transition: 1s;
}
.back {
left: -300px;
transform-origin: 300px 600px;
transform: rotate(146.3deg);
transition: 1s;
bottom: 200px;
}
figure img {
width: 100%;
height: 100%;
aspect-ratio: 3/4;
object-fit: cover;
}
figure figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-wrap: nowrap;
color: #fff;
background-color: rgba(255, 255, 255, .5);
padding: 1em;
border: 4px double #fff;
}
article:hover .rotateBox {
transform: rotate(-90deg);
}
article:hover .front {
transform: rotate(90deg);
}
article:hover .back {
transform: rotate(90deg);
}
</style>
</head>
<body>
<h1>CSS實(shí)現(xiàn)翻頁(yè)效果</h1>
<article>
<div class="book">
<div class="rotateBox">
<div class="pageItem front">
<figure>
<img src="https://cdn.pixabay.com/photo/2023/11/22/18/13/beach-8406104_640.jpg" alt="">
<figcaption>Page 1</figcaption>
</figure>
</div>
<div class="pageItem back">
<figure>
<img src="https://cdn.pixabay.com/photo/2023/07/07/15/51/sea-8112910_640.jpg" alt="">
<figcaption>Page 2</figcaption>
</figure>
</div>
</div>
<div class="pageItem">
<figure>
<img src="https://cdn.pixabay.com/photo/2021/11/26/17/26/dubai-desert-safari-6826298_640.jpg"
alt="">
<figcaption>Page 3</figcaption>
</figure>
</div>
</div>
</article>
</body>
</html>小小改動(dòng)
想要讓頁(yè)面初始狀態(tài)有個(gè)小小的折角，只要設(shè)置初始角度>33.7°，以45°為例，需要修改上述代碼如下：
<style>
.rotateBox {
//...
//- transform: rotate(-33.7deg);
transform: rotate(-45deg);
}
.front {
//...
//- transform: rotate(33.7deg);
transform: rotate(45deg);
}
.back {
//...
//- transform: rotate(146.3deg);
transform: rotate(135deg);
}
</style>以上就是使用CSS實(shí)現(xiàn)簡(jiǎn)單的翻頁(yè)效果的詳細(xì)內(nèi)容，更多關(guān)于CSS翻頁(yè)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時(shí)控制行和列，相比 Flex（一維布局），更適合用在整體頁(yè)面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非?；A(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性，用于告訴瀏覽器某個(gè)元素在未來(lái)可能會(huì)發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來(lái)控制網(wǎng)頁(yè)的外觀和布局，更是實(shí)現(xiàn)復(fù)雜交互和動(dòng)態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級(jí),本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場(chǎng)景、常見問(wèn)題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會(huì)失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語(yǔ)法、常見使用場(chǎng)景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁(yè)控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過(guò)鼠標(biāo)懸浮顯示提示文字效果,通過(guò)設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動(dòng)態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動(dòng)態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對(duì)象語(yǔ)法和數(shù)組語(yǔ)法,通過(guò)對(duì)象語(yǔ)法,可以根據(jù)條件動(dòng)態(tài)切換類名或樣式；通過(guò)數(shù)組語(yǔ)法,可以同時(shí)綁定多個(gè)類名或樣式,此外2025-02-26
