簡單作出HTML5翻頁效果文字特效

以前在網上看到一款比較有新意的HTML5文字特效，文字效果是當鼠標滑過是出現翻開摺疊的效果，相似書本翻頁。因而我興致勃勃的點開源碼看了一下，發現其實實現也挺簡單的，主要利用了CSS3的transform屬性，分別對X軸、Y軸、Z軸進行翻轉，先看一下效果截圖。

 

 

 

 

 

       看效果圖這些文字是否是頗有立體的感受，而這個立體的感受並非有投影和陰影來實現的，而是經過翻轉。       

DEMO演示效果

 

       接下來咱們來看一下源碼。首先是HTML代碼，很是簡單，列出咱們須要渲染的文字：

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>

複製代碼

         
      接下來是核心CSS3代碼，這裏咱們略去了控制頁面樣式的CSS代碼，把實現翻頁效果文字的CSS代碼提取出來。

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. }

複製代碼

      這樣咱們就讓這些字母安安靜靜的排列起來，並有了本身的背景顏色，等待強大的CSS3來渲染。

      接下來咱們要讓文字在鼠標滑過的時候產生翻轉傾斜的動畫。

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. 複製代碼

複製代碼

        這裏咱們利用了CSS3的僞類before和after來快速構造兩個相同的字母，而後利用transform屬性的rotateX，rotateY，rotateZ來翻轉，再利用skew來時文字傾斜。