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

時間 2019-12-10

標籤 html5 html css3 css prefixfree.js prefixfree 3d 文字特效欄目 HTML5 简体版

原文原文鏈接

以前在園子裏看到一個HTML5/CSS3的文字特效(這裏)，以爲挺好玩的因此小小的研究了下，不過發現代碼都是針對webkit以及FF的因此IE跪了。javascript

我將示例中的代碼進行了精簡，後來發現CSS大多數沒有前綴，我很費解以後發現它引用過來一個PrefixFree，有了這個js就能不用寫CSS3的前綴:)html

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

在link中，或是style中，或是dom元素的style中書寫CSS3 code，或是jQuery .css()方法此腳本會自動補上須要的前綴，讓響應的瀏覽器支持該CSS3屬性java

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

這樣就不須要添加這些前綴太方便來了 ;)git

-khtml- Konquerorgithub

-rim- RIMweb

-ms- Microsoft（IE）sql

-0- Operacanvas

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