之前在园子里看到一个HTML5/CSS3的文字特效(这里)，觉得挺好玩的所以小小的研究了下，不过发现代码都是针对webkit以及FF的所以IE跪了。
我将示例中的代码进行了精简，后来发现CSS大多数没有前缀，我很费解之后发现它引用过来一个PrefixFree，有了这个js就能不用写CSS3的前缀:)
<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
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>
完整代码
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。