HTML5/CSS3(PrefixFree.js) 3D文字特效

之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了。

Runjs

我将示例中的代码进行了精简,后来发现CSS大多数没有前缀,我很费解之后发现它引用过来一个PrefixFree,有了这个js就能不用写CSS3的前缀:)

PrefixFree

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

在link中,或是style中,或是dom元素的style中书写CSS3 code,或是jQuery .css()方法此脚本会自动补上需要的前缀,让响应的浏览器支持该CSS3属性

background-color: #a0b3d6;

background-image: linear-gradient(top, #beceeb, #34538b);

这样就不需要添加这些前缀太方便来了 ;)

-khtml-     Konqueror

-rim-         RIM

-ms-         Microsoft(IE)

-0-            Opera

-moz-       Mozilla(如Firefox)

-webkit-   Webkit

 

HTML5/CSS3(PrefixFree.js) 3D文字特效
 1 <!DOCTYPE html>

 2 <html style="" class=" -moz- js no-flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

 3 <head>

 4     <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 5     <meta charset="UTF-8">

 6     <title>HTML5/CSS3 3D文字特效</title>

 7     <style>

 8         @import url(http://fonts.googleapis.com/css?family=Lato:900);

 9 

10         *, *:before, *:after {

11             -moz-box-sizing: border-box;

12         }

13 

14         body {

15             font-family: 'Lato', sans-serif;

16         }

17 

18         div.foo {

19             width: 90%;

20             margin: 0 auto;

21             text-align: center;

22         }

23 

24         .letter {

25             display: inline-block;

26             font-weight: 900;

27             font-size: 8em;

28             margin: 0.2em;

29             position: relative;

30             color: #00B4F1;

31             transform-style: preserve-3d;

32             perspective: 400;

33             z-index: 1;

34         }

35 

36             .letter:before, .letter:after {

37                 position: absolute;

38                 content: attr(data-letter);

39                 transform-origin: top left;

40                 top: 0;

41                 left: 0;

42             }

43 

44             .letter, .letter:before, .letter:after {

45                 transition: all 0.3s ease-in-out;

46             }

47 

48                 .letter:before {

49                     color: #fff;

50                     text-shadow: -1px 0px 1px rgba(255,255,255,.8), 1px 0px 1px rgba(0,0,0,.8);

51                     z-index: 3;

52                     transform: rotateX(0deg) rotateY(-15deg) rotateZ(0deg);

53                 }

54 

55                 .letter:after {

56                     color: rgba(0,0,0,.11);

57                     z-index: 2;

58                     transform: scale(1.08,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,1deg);

59                 }

60 

61                 .letter:hover:before {

62                     color: #fafafa;

63                     transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg);

64                 }

65 

66                 .letter:hover:after {

67                     transform: scale(1.08,1) rotateX(0deg) rotateY(40deg) rotateZ(0deg) skew(0deg,22deg);

68                 }

69     </style>

70     <script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

71 </head>

72 <body>

73     <div class="foo">

74         <span class="letter" data-letter="C">C</span>

75         <span class="letter" data-letter="N">N</span>

76         <span class="letter" data-letter="B">B</span>

77         <span class="letter" data-letter="L">L</span>

78         <span class="letter" data-letter="O">O</span>

79         <span class="letter" data-letter="G">G</span>

80     </div>

81 </body>

82 </html>
完整代码

 Runjs演示

特效原文地址

你可能感兴趣的:(html5)