久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

簡(jiǎn)單做出HTML5翻頁(yè)效果文字特效

html5教程 html5模板網(wǎng)
之前在網(wǎng)上看到一款比較有新意的HTML5文字特效，文字效果是當(dāng)鼠標(biāo)滑過(guò)是出現(xiàn)翻開折疊的效果，類似書本翻頁(yè)。于是我興致勃勃的點(diǎn)開源碼看了一下，發(fā)現(xiàn)其實(shí)實(shí)現(xiàn)也挺簡(jiǎn)單的，主要利
       之前在網(wǎng)上看到一款比較有新意的HTML5文字特效，文字效果是當(dāng)鼠標(biāo)滑過(guò)是出現(xiàn)翻開折疊的效果，類似書本翻頁(yè)。于是我興致勃勃的點(diǎn)開源碼看了一下，發(fā)現(xiàn)其實(shí)實(shí)現(xiàn)也挺簡(jiǎn)單的，主要利用了CSS3的transform屬性，分別對(duì)X軸、Y軸、Z軸進(jìn)行翻轉(zhuǎn)，先看一下效果截圖。


Z.jpg






       看效果圖這些文字是不是很有立體的感覺，而這個(gè)立體的感覺并不是有投影和陰影來(lái)實(shí)現(xiàn)的，而是通過(guò)翻轉(zhuǎn)。       

DEMO演示效果


       接下來(lái)我們來(lái)看一下源碼。首先是HTML代碼，非常簡(jiǎn)單，列出我們需要渲染的文字：

  1. <div class="foo">
  2.   <span class="letter" data-letter="A">A</span>
  3.   <span class="letter" data-letter="B">B</span>
  4.   <span class="letter" data-letter="C">C</span>
  5.   <span class="letter" data-letter="D">D</span>
  6.   <span class="letter" data-letter="E">E</span>
  7.   <span class="letter" data-letter="F">F</span>
  8.   <span class="letter" data-letter="G">G</span>
  9.   <span class="letter" data-letter="H">H</span>
  10.   <span class="letter" data-letter="I">I</span>
  11.   <span class="letter" data-letter="L">L</span>
  12.   <span class="letter" data-letter="M">M</span>
  13.   <span class="letter" data-letter="N">N</span>
  14.   <span class="letter" data-letter="O">O</span>
  15.   <span class="letter" data-letter="P">P</span>
  16.   <span class="letter" data-letter="Q">Q</span>
  17.   <span class="letter" data-letter="R">R</span>
  18.   <span class="letter" data-letter="S">S</span>
  19.   <span class="letter" data-letter="T">T</span>
  20.   <span class="letter" data-letter="U">U</span>
  21.   <span class="letter" data-letter="V">V</span>
  22.   <span class="letter" data-letter="Z">Z</span>
  23. </div>
復(fù)制代碼
         
      接下來(lái)是核心CSS3代碼，這里我們略去了控制頁(yè)面樣式的CSS代碼，把實(shí)現(xiàn)翻頁(yè)效果文字的CSS代碼提取出來(lái)。

  1. .letter{
  2.   display: inline-block;
  3.   font-weight: 900;
  4.   font-size: 8em;
  5.   margin: 0.2em;
  6.   position: relative;
  7.   color: #00B4F1;
  8.   transform-style: preserve-3d;
  9.   perspective: 400;
  10.   z-index: 1;
  11. }
復(fù)制代碼

      這樣我們就讓這些字母安安靜靜的排列起來(lái)，并有了自己的背景顏色，等待強(qiáng)大的CSS3來(lái)渲染。

      接下來(lái)我們要讓文字在鼠標(biāo)滑過(guò)的時(shí)候產(chǎn)生翻轉(zhuǎn)傾斜的動(dòng)畫。

  1. .letter:before, .letter:after{
  2.   position:absolute;
  3.   content: attr(data-letter);
  4.   transform-origin: top left;
  5.   top:0;
  6.   left:0;
  7. }
  8. .letter, .letter:before, .letter:after{
  9.   transition: all 0.3s ease-in-out;
  10. }
  11. .letter:before{
  12.   color: #fff;
  13.   text-shadow:
  14.     -1px 0px 1px rgba(255,255,255,.8),
  15.     1px 0px 1px rgba(0,0,0,.8);
  16.   z-index: 3;
  17.   transform:
  18.     rotateX(0deg)
  19.     rotateY(-15deg)
  20.     rotateZ(0deg);
  21. }
  22. .letter:after{
  23.   color: rgba(0,0,0,.11);
  24.   z-index:2;
  25.   transform:
  26.     scale(1.08,1)
  27.     rotateX(0deg)
  28.     rotateY(0deg)
  29.     rotateZ(0deg)
  30.     skew(0deg,1deg);
  31. }
  32. .letter:hover:before{
  33.   color: #fafafa;
  34.   transform:
  35.     rotateX(0deg)
  36.     rotateY(-40deg)
  37.     rotateZ(0deg);
  38. }
  39. .letter:hover:after{
  40.   transform:
  41.     scale(1.08,1)
  42.     rotateX(0deg)
  43.     rotateY(40deg)
  44.     rotateZ(0deg)
  45.     skew(0deg,22deg);
  46. }

  48. 復(fù)制代碼
復(fù)制代碼

        這里我們利用了CSS3的偽類before和after來(lái)快速構(gòu)造兩個(gè)相同的字母，然后利用transform屬性的rotateX，rotateY，rotateZ來(lái)翻轉(zhuǎn)，再利用skew來(lái)時(shí)文字傾斜。





轉(zhuǎn)自：http://www.cnblogs.com/html5tricks/p/3653672.html


【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過(guò)測(cè)試外，其他素材未做測(cè)試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。

相關(guān)文檔推薦

由于實(shí)際運(yùn)行環(huán)境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會(huì)達(dá)到，所以這部分不是開發(fā)者能夠決定的，開發(fā)者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個(gè)自定義的視頻播放器，需要用到HTML5提供的video標(biāo)簽、以及HTML5提供的對(duì)JavascriptAPI的擴(kuò)展。，HTML5中國(guó)，中國(guó)最大的HTML5中文門戶。
隨著 Hybrid 應(yīng)用的豐富，HTML5 工程師們已經(jīng)不滿足于把桌面端體驗(yàn)簡(jiǎn)單移植到移動(dòng)端，他們覬覦移動(dòng)原生應(yīng)用人性化的操作體驗(yàn)，特別是原生應(yīng)用與生俱來(lái)的豐富的手勢(shì)系統(tǒng)。HTML5 沒有提
你想要在自己網(wǎng)站上分享一個(gè)產(chǎn)品，或者是一個(gè)作品集，又或者僅僅只是一個(gè)靈感。在你發(fā)布到網(wǎng)上之前，你想讓它看起來(lái)有吸引力，專業(yè)，或者至少得看起來(lái)像那么回事。那么你接下
H5廣告，包括H5廣告的設(shè)計(jì)流程，究竟有什么講究，和階段。為了能幫助更多的人了解H5廣告，我專門做了一個(gè)講義。同時(shí)，也讓我意外的收到了非常好反饋和認(rèn)!這是對(duì)我的極大鼓勵(lì)!我的
本文主要內(nèi)容有：框架與組件、構(gòu)建生態(tài)、開發(fā)技巧與調(diào)試、html、css與重構(gòu)、native/hybrid/桌面開發(fā)、前端/H5優(yōu)化、全棧/全端開發(fā)、研究實(shí)驗(yàn)、數(shù)據(jù)分析與監(jiān)控、其它軟技能、前端技術(shù)網(wǎng)
主站蜘蛛池模板： 黄免费观看视频 | 欧美激情一区二区三级高清视频 | 中文字幕观看 | 成人在线一区二区三区 | 日韩视频在线播放 | www.久久| 欧美一区二区三区在线观看 | 亚洲国产乱码 | 免费色网址 | 99热热99| 欧美视频二区 | 亚洲一区二区三区四区五区中文 | 成人免费大片黄在线播放 | 91精品国产综合久久久动漫日韩 | 日韩欧美在线不卡 | 精品国产乱码久久久久久丨区2区 | 欧美精品一区二区三区一线天视频 | 久久r免费视频 | 久久久久久亚洲国产精品 | 成人在线精品视频 | 欧美日韩看片 | 天天操天天摸天天干 | 成人黄色电影在线观看 | 国产精品成人一区二区 | 99久久婷婷国产精品综合 | 精品成人一区二区 | 国产一区二区在线视频 | 麻豆久久久久久 | 羞羞视频在线观看网站 | 中文字幕高清 | 国产一区二区三区 | 国产欧美一区二区三区在线看蜜臀 | 国产精品一区二区三 | 女女爱爱视频 | 91精品久久久久久久99 | 国产精品久久久久久久久久久久冷 | 日韩国产一区二区三区 | 亚洲国产精品va在线看黑人 | 国产精品高潮呻吟久久久久 | 午夜精品久久久久久久久久久久 | 激情91 |