HTML5翻页效果文字特效怎么实现呢

标签：style   http   color   os   io   for   ar   2014   

HTML5翻页效果文字特效怎么实现呢，之前在网上看到一款比较有新意的HTML5文字特效，文字效果是当鼠标滑过是出现翻开折叠的效果，类似书本翻页。于是我兴致勃勃的点开源码看了一下，发现其实实现也挺简单的，主要利用了CSS3的transform属性，分别对X轴、Y轴、Z轴进行翻转，先看一下效果截图。

       看效果图这些文字是不是很有立体的感觉，而这个立体的感觉并不是有投影和阴影来实现的，而是通过翻转。       

       接下来我们来看一下源码。首先是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. }
    

47. 
    

48. 复制代码

复制代码

        这里我们利用了CSS3的伪类before和after来快速构造两个相同的字母，然后利用transform属性的rotateX，rotateY，rotateZ来翻转，再利用skew来时文字倾斜。

文章来源:有招网转载请标明出处文章链接:http://www.youjobit.com/news_108.html

HTML5翻页效果文字特效怎么实现呢,布布扣,bubuko.com

HTML5翻页效果文字特效怎么实现呢

标签：style   http   color   os   io   for   ar   2014   

原文地址：http://my.oschina.net/u/1986176/blog/304432