3D animation 書

// CCS

   <style>
        body {perspective: 1000px;}          //  透視
        .images{
            width: 1000px;
            height: 600px;
            margin: 0 auto;
            transform: rotateX(30deg);
            transform-style: preserve-3d;     // 3d效果
            position: relative;
            top: 200px;
        }
        .pageBox{
            width: 1000px;
            height: 600px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .page{
            width: 500px;
            height: 600px;
            position: absolute;
            top: 0;
            left: 50%;
            background-color: #fff;
            border: 1px solid #96a36e;
            border-left: 3px solid #84bbd7;
            text-align: center;
            box-shadow: 50px 50px 200px 1px #8dc2f4 inset
        }
        .page7{left: -3px;top: -1px;}
        .pageBox1{animation: amt1 20s;z-index: 10;top: -5px;}
        .pageBox2{animation: amt2 16s 2s;z-index: 9;top: -4px;}
        .pageBox3{animation: amt3 13s 3s;z-index: 8;top: -3px;}
        .pageBox4{animation: amt4 10s 4s;z-index: 7;top: -2px;}
        .pageBox5{animation: amt5 7s 5s;z-index: 6;top: -1px;}
        .pageBox6{z-index: 0}

        .page1{background: url("images/01.jpg") no-repeat 50% 50%;background-size: 100% 100%;}
        .page2{background: url("images/02.png") no-repeat 50% 50%;background-size: 95% 95%;}
        .page3{background: url("images/03.jpeg") no-repeat 50% 50%;background-size: 95% 95%;}
        .page4{background: url("images/04.jpg") no-repeat 50% 50%;background-size: 90% 90%;}
        .page5{background: url("images/05.jpg") no-repeat 50% 50%;background-size: 90% 90%;}
        .page6{box-shadow: 50px 50px 200px 1px #666;}
        .page7{background:#8dc2f4 url("images/06.jpg") no-repeat 50% 50%;background-size: 100% 100%;}

        @keyframes amt1 {
            0% {transform: rotateY(0deg)}
            50% {transform: rotateY(-180deg)}
            100% {transform: rotateY(0deg)}
        }
        @keyframes amt2 {
            0% {transform: rotateY(0deg)}
            50% {transform: rotateY(-170deg)}
            100% {transform: rotateY(0deg)}
        }
        @keyframes amt3 {
            0% {transform: rotateY(0deg)}
            50% {transform: rotateY(-160deg)}
            100% {transform: rotateY(0deg)}
        }
        @keyframes amt4 {
            0% {transform: rotateY(0deg)}
            50% {transform: rotateY(-150deg)}
            100% {transform: rotateY(0deg)}
        }
        @keyframes amt5 {
            0% {transform: rotateY(0deg)}
            50% {transform: rotateY(-140deg)}
            100% {transform: rotateY(0deg)}
        }
        p{
            margin-top: 550px;
            font-size: 25px;
            color: #8dc2f4;
            font-style: italic;
        }
    </style>

// HTML

<body>
<div class="images">
    <div class="pageBox pageBox1">
        <div class="page page1"></div>
    </div>
    <div class="pageBox pageBox2">
        <div class="page page2"></div>
    </div>
    <div class="pageBox pageBox3">
        <div class="page page3"></div>
    </div>
    <div class="pageBox pageBox4">
        <div class="page page4"></div>
    </div>
    <div class="pageBox pageBox5">
        <div class="page page5"></div>
    </div>
    <div class="pageBox pageBox6">
        <div class="page page6">
            <div class="page page7">
                <p>yuxiaohu 2017.9.22</p>
            </div>
        </div>
    </div>
</div>
</body>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 秋是飽滿的,也是清瘦的;秋是詩(shī)意的,也是蕭瑟的;秋是清歡的,也是悲涼的。從來(lái)不說(shuō),鐘愛(ài)某一個(gè)季節(jié),深信每一個(gè)季節(jié),...
    開(kāi)心呢閱讀 279評(píng)論 0 0
  • 北京時(shí)間10月2日,據(jù)美媒體報(bào)道,由于護(hù)照更新延遲,勇士隊(duì)主帥史蒂夫-科爾將和勇士隊(duì)球員分開(kāi)前往中國(guó)。 據(jù)了解,護(hù)...
    coco9981閱讀 359評(píng)論 0 1
  • 很無(wú)聊 寫第一篇文章 表示北京時(shí)間16:46 2016:06:20T16:46:35 +08:00 UTC時(shí)間 2...
    0誅仙0閱讀 450評(píng)論 1 1
  • 不知道怎么生活下去
    大胖子又吃胖了閱讀 134評(píng)論 0 0
  • 你大概是我看過(guò)的電影,你寫的主題曲我唱的片尾曲。請(qǐng)給我一首歌的時(shí)間,我想說(shuō)說(shuō)你。電影很短,片名就叫《鈴鐺》。 風(fēng)鈴...
    闔秋閱讀 563評(píng)論 0 1