腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

使用CSS實(shí)現(xiàn)簡單的翻頁效果

發(fā)布時(shí)間：2024-03-06 15:17:13 作者：RGF

我要評論

這篇文章主要為大家詳細(xì)介紹了如何使用CSS實(shí)現(xiàn)簡單的翻頁效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下

基本原理

我們先來看一下翻頁的過程動(dòng)圖，如下：

觀察動(dòng)圖，大致將此翻頁過程分為三個(gè)狀態(tài)，書頁未翻開、書頁翻動(dòng)中、書頁翻動(dòng)完成，對應(yīng)的是“圖翻頁過程”?？梢钥闯觯撨^程中，第二頁是壓在第一頁上的，隨著旋轉(zhuǎn)角度增加，覆蓋面積逐漸增大，翻頁完成時(shí)，第二頁完全覆蓋第一頁，據(jù)此畫出兩頁的狀態(tài)，如圖“圖翻頁簡析”。

到此，可以用代碼先把項(xiàng)目的樹形結(jié)構(gòu)先寫出來

<!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)翻頁效果</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)翻頁效果</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)

觀察“圖翻頁簡析”得出page2旋轉(zhuǎn)，page1保持不動(dòng)，即可基本模擬出翻頁效果，運(yùn)用css的動(dòng)畫效果可以實(shí)現(xiàn)page2的連續(xù)旋轉(zhuǎn)，而動(dòng)畫的初始狀態(tài)對應(yīng)的是“圖翻頁簡析”的①，結(jié)束狀態(tài)則對應(yīng)③，接下來需要確定的是旋轉(zhuǎn)中心點(diǎn)以及旋轉(zhuǎn)軸，旋轉(zhuǎn)中心點(diǎn)可以是不斷變化的，但為了方便，我們?nèi)∫还潭ㄐD(zhuǎn)中心點(diǎn)就好，“圖翻頁簡析”中三條輔助線的相交點(diǎn)大致在左下方，可以確定旋轉(zhuǎn)中心點(diǎn)的位置范圍。以代碼圖形大小為基準(zhǔn)，畫出對應(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);
    }

考慮到翻頁是折角，相當(dāng)于page1隱藏折角，而page2只顯示這一部分折角，page1和page2顯示隱藏的劃分是線AC，在線AC左邊顯示，右邊隱藏，翻頁過程中，線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)相同的角度，那我們原定的旋轉(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ī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)翻頁效果</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)翻頁效果</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)

想要讓頁面初始狀態(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)簡單的翻頁效果的詳細(xì)內(nèi)容，更多關(guān)于CSS翻頁的資料請關(guān)注腳本之家其它相關(guān)文章！

Tag：css 翻頁

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

使用CSS實(shí)現(xiàn)簡單的翻頁效果

基本原理

代碼實(shí)現(xiàn)

頁面美化

小小改動(dòng)

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容