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

程序员文章站 2022-05-24 15:37:32

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

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

prefixfree

在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

复制代码

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(https://fonts.googleapis.com/css?family=lato:900);

10 *, *:before, *:after {

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

12 }

14 body {

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

16 }

18 p.foo {

19 width: 90%;

20 margin: 0 auto;

21 text-align: center;

22 }

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 }

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 }

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

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

46 }

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 }

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 }

61 .letter:hover:before {

62 color: #fafafa;

63 transform: rotatex(0deg) rotatey(-40deg) rotatez(0deg);

64 }

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="https://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

71 </head>

72 <body>

73 <p 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 </p>

81 </body>

82 </html>

上一篇： js操作Dom节点拼接表单及ajax提交表单

下一篇：有个MM裙子破了,她当众这样处理的晕倒!!

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

css3 transform 3d 使用css3创建动态3d立方体(html5实践)

使用css创建三角形使用CSS3创建3d四面体原理及代码(html5实践)