3D實(shí)現(xiàn)字帖畫卷

效果圖

畫紙.gif

代碼如下

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='Content-Type' content="text/html; charset=utf-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>3D畫卷</title>
</head>
<style>
    *{margin:0px;padding:0px;}
    .wrap{width:1200px;height:600px;position:absolute;left:50%;top:50%;margin-left: -600px;margin-top:-300px;border:1px solid #ccc;-webkit-perspective: 2400px;-webkit-transform-style: preserve-3d; }
    .wrap h1{height:600px;width:100px;word-wrap:break-word;color:black;font-size:70px;letter-spacing: 4px;position:relative;text-align:center;z-index:999;background:black;color:white;}
    .wrap h1 button{width:60px;height:60px;text-align:center;}
    .wrap div{position:absolute;left:101px;top:0px;width:100px;height:100%;-webkit-transform-style: preserve-3d;-webkit-transform-origin: left;-webkit-transform: rotateY(180deg);}
    .wrap>div{left:100px;}
    .wrap div span{height:600px;width:100px;word-wrap:break-word;color:white;background:black;font-size:56px;text-align:center;display:block;border-right:1px dashed white;}
    .wrap div.show{-webkit-animation: 1.3s show;-webkit-transform: rotateY(0deg);}
    .wrap div.hide{-webkit-animation: 1.3s hide;-webkit-transform: rotateY(180deg);}
    @-webkit-keyframes show {
        0%{-webkit-transform: rotateY(180deg)}
        25%{-webkit-transform: rotateY(-30deg)}
        50%{-webkit-transform: rotateY(15deg)}
        75%{-webkit-transform: rotateY(8deg)}
        85%{-webkit-transform: rotateY(-8deg)}
        90%{-webkit-transform: rotateY(4deg)}
        100%{-webkit-transform: rotateY(0deg)}
    }
    @-webkit-keyframes hide {
        0%{-webkit-transform: rotateY(0deg);}
        100%{-webkit-transform: rotateY(180deg);}
    }
</style>
<body>
<div class="wrap" id="wrap">
    <h1>笠翁對(duì)韻<button id="btn">展開</button></h1>
    <div>
        <span>天對(duì)地,雨對(duì)風(fēng)蕉朵。</span>
        <div>
            <span>大陸對(duì)長空。</span>
            <div>
                <span>山花對(duì)海樹,</span>
                 <div>
                     <span>
                       赤日對(duì)蒼穹咐容。
                     </span>
                     <div>
                         <span>
                          雷隱隱纽门,霧蒙蒙黎休。
                         </span>
                         <div>
                             <span>
                               日下對(duì)天中。
                             </span>
                             <div>
                                 <span>
                                     風(fēng)高秋月白反镇,
                                 </span>
                                 <div>
                                     <span>
                                           雨霽晚霞紅。
                                     </span>
                                     <div>
                                         <span>
                                           牛女二星河左右娘汞,
                                         </span>
                                         <div>
                                             <span>
                                                參商兩曜斗西東歹茶。
                                             </span>
                                               <div>
                                                   <span>
                                                       請(qǐng)看下頁
                                                   </span>
                                               </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
            </div>
        </div>
    </div>
</div>

</body>
<script>
    var btn = document.getElementById("btn");
    var wrap = document.getElementById("wrap");
    var flag = true;
    var index = 0 ;
    var timer = null;
    btn.onclick = function(){
        //開始前清空定時(shí)器
        clearInterval(timer);
        if(flag)
        {
            timer = setInterval(function(){
                wrap.getElementsByTagName("div")[index].className = "show";
                ++index;
                if(index == wrap.getElementsByTagName("div").length)
                {
                    clearInterval(timer);
                    flag = false;
                    btn.innerHTML = "收縮";
                }

            },100)
        }else
        {
            timer = setInterval(function(){
                --index;
                wrap.getElementsByTagName("div")[index].className = "hide";
                if(index == 0)
                {
                    clearInterval(timer);
                    flag = true;
                    btn.innerHTML = "展開";
                }
            },100)
        }
    }
</script>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市你弦,隨后出現(xiàn)的幾起案子惊豺,更是在濱河造成了極大的恐慌,老刑警劉巖禽作,帶你破解...
    沈念sama閱讀 211,496評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件扮叨,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡领迈,警方通過查閱死者的電腦和手機(jī)彻磁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門碍沐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人衷蜓,你說我怎么就攤上這事累提。” “怎么了磁浇?”我有些...
    開封第一講書人閱讀 157,091評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵斋陪,是天一觀的道長。 經(jīng)常有香客問我置吓,道長无虚,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,458評(píng)論 1 283
  • 正文 為了忘掉前任衍锚,我火速辦了婚禮友题,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘戴质。我一直安慰自己度宦,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,542評(píng)論 6 385
  • 文/花漫 我一把揭開白布告匠。 她就那樣靜靜地躺著戈抄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪后专。 梳的紋絲不亂的頭發(fā)上划鸽,一...
    開封第一講書人閱讀 49,802評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音戚哎,去河邊找鬼漾稀。 笑死,一個(gè)胖子當(dāng)著我的面吹牛建瘫,可吹牛的內(nèi)容都是我干的崭捍。 我是一名探鬼主播,決...
    沈念sama閱讀 38,945評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼啰脚,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼殷蛇!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起橄浓,我...
    開封第一講書人閱讀 37,709評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤粒梦,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后荸实,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體匀们,經(jīng)...
    沈念sama閱讀 44,158評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,502評(píng)論 2 327
  • 正文 我和宋清朗相戀三年准给,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了泄朴。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片重抖。...
    茶點(diǎn)故事閱讀 38,637評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖祖灰,靈堂內(nèi)的尸體忽然破棺而出钟沛,到底是詐尸還是另有隱情,我是刑警寧澤局扶,帶...
    沈念sama閱讀 34,300評(píng)論 4 329
  • 正文 年R本政府宣布恨统,位于F島的核電站,受9級(jí)特大地震影響三妈,放射性物質(zhì)發(fā)生泄漏畜埋。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,911評(píng)論 3 313
  • 文/蒙蒙 一畴蒲、第九天 我趴在偏房一處隱蔽的房頂上張望悠鞍。 院中可真熱鬧,春花似錦饿凛、人聲如沸狞玛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,744評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至锭亏,卻和暖如春纠吴,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背慧瘤。 一陣腳步聲響...
    開封第一講書人閱讀 31,982評(píng)論 1 266
  • 我被黑心中介騙來泰國打工戴已, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人锅减。 一個(gè)月前我還...
    沈念sama閱讀 46,344評(píng)論 2 360
  • 正文 我出身青樓糖儡,卻偏偏與公主長得像,于是被迫代替她去往敵國和親怔匣。 傳聞我的和親對(duì)象是個(gè)殘疾皇子握联,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,500評(píng)論 2 348

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件每瞒、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,063評(píng)論 4 62
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,768評(píng)論 25 707
  • 所有相遇和回眸都是緣分剿骨,當(dāng)你愛上某個(gè)背影代芜,意味你已經(jīng)心系一段情緣!只是緣深緣淺浓利,任誰都無叢把握挤庇,聚散無由钞速,流水落花...
    弱水三千629閱讀 135評(píng)論 0 0
  • 17歲,明艷張揚(yáng)罚随;28歲玉工,沉重小心翼翼。17歲淘菩,一眼愛情遵班,愛得濃烈勇敢;28歲潮改,認(rèn)定習(xí)慣狭郑,迷失自己,愛得膽怯...
    櫻木的跑籃衫閱讀 227評(píng)論 0 0
  • 大臉\文 首發(fā)于個(gè)人微信公眾號(hào):大臉and小臉 從小到大,看慣了男人們?cè)趲藓秃逋捱@件事情上的無能及無所作為糕殉,不敢...
    大臉and小臉閱讀 237評(píng)論 0 0