1024的页面文字风格（比滑板鞋还炫酷！） - Within_Temptation

公告

效果如图：

html代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <title>PAUL</title>
 5         <meta charset="UTF-8" />
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 7         <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 8         <meta name="description" content="paul" />
 9         <meta name="keywords" content="css3" />
10         <meta name="author" content="fuk" />
11             
12         <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css' />
13     <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
14     </head>
15     <body>
16         <div class="container">
17             
18                     <div id="letter-container-sun" class="letter-container-sun">
19                         <h2><a href="#">Paul</a></h2>
20                     </div>
21                     
22           <div id="letter-container" class="letter-container">
23                         <h2><a href="#">Esp horizon II...</a></h2>
24                     </div>
25 
26         </div>
27     </body>
28 </html>

js代码：

 1 /*global jQuery */
 2 /*!    
 3 * Lettering.JS 0.6.1
 4 *
 5 * Copyright 2010, Dave Rupert http://daverupert.com
 6 * Released under the WTFPL license 
 7 * http://sam.zoy.org/wtfpl/
 8 *
 9 * Thanks to Paul Irish - http://paulirish.com - for the feedback.
10 *
11 * Date: Mon Sep 20 17:14:00 2010 -0600
12 */
13 (function($){
14     function injector(t, splitter, klass, after) {
15         var a = t.text().split(splitter), inject = '';
16         if (a.length) {
17             $(a).each(function(i, item) {
18                 inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
19             });    
20             t.empty().append(inject);
21         }
22     }
23     
24     var methods = {
25         init : function() {
26 
27             return this.each(function() {
28                 injector($(this), '', 'char', '');
29             });
30 
31         },
32 
33         words : function() {
34 
35             return this.each(function() {
36                 injector($(this), ' ', 'word', ' ');
37             });
38 
39         },
40         
41         lines : function() {
42 
43             return this.each(function() {
44                 var r = "eefec303079ad17405c889e092e105b0";
45                 // Because it's hard to split a <br/> tag consistently across browsers,
46                 // (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash 
47                 // (of the word "split").  If you're trying to use this plugin on that 
48                 // md5 hash string, it will fail because you're being ridiculous.
49                 injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
50             });
51 
52         }
53     };
54 
55     $.fn.lettering = function( method ) {
56         // Method calling logic
57         if ( method && methods[method] ) {
58             return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
59         } else if ( method === 'letters' || ! method ) {
60             return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
61         }
62         $.error( 'Method ' +  method + ' does not exist on jQuery.lettering' );
63         return this;
64     };
65 
66 })(jQuery);
67 
68 
69 
70 $(function() {
71     
72     $("#letter-container-sun h2 a").lettering();
73     $("#letter-container h2 a").lettering();
74     
75 });

css样式：

  1 body {
  2     background: #222 url(/uploads/rs/439/akgpvyo1/micro_carbon.png) repeat top left;
  3     font-family: 'Terminal Dosis', Arial, sans-serif;
  4     color: #f6e7ce;
  5 }
  6 a{
  7     color: #fff;
  8     text-decoration: none;
  9 }
 10 
 11 
 12 
 13 .letter-container-sun{
 14     border-bottom: 1px dashed rgba(255,255,255,0.3);
 15     border-top: 1px dashed rgba(255,255,255,0.3);
 16     margin: 20px;
 17     padding: 20px;
 18 }
 19 .letter-container-sun h2{
 20     text-align: center;
 21 }
 22 .letter-container-sun h2 a{
 23     text-align: center;
 24     padding: 20px;
 25     text-transform: uppercase;
 26 }
 27 .letter-container-sun h2 a span{
 28     display: inline-block;
 29     background: #bfd4e2;
 30     color: #ecf0f2;
 31     text-shadow: 1px 1px 2px rgba(120,155,179,0.5);
 32     width: 200px;
 33     height: 200px;
 34     line-height: 200px;
 35     font-size: 100px;
 36     margin: 3px;
 37     cursor: pointer;
 38     -moz-border-radius:100px;
 39     -webkit-border-radius: 100px;
 40     border-radius: 50%;
 41     -webkit-box-shadow: 2px 2px 10px rgba(43,54,61, 0.4), 0px 0px 0px 9px rgba(116,161,191,0.3) inset;
 42     -moz-box-shadow: 2px 2px 10px rgba(43,54,61, 0.4), 0px 0px 0px 9px rgba(116,161,191,0.3) inset;
 43     box-shadow: 2px 2px 10px rgba(43,54,61, 0.4), 0px 0px 0px 9px rgba(116,161,191,0.3) inset;
 44     -webkit-transition: all 0.3s ease-in-out;
 45     -moz-transition: all 0.3s ease-in-out;
 46     -o-transition: all 0.3s ease-in-out;
 47     -ms-transition: all 0.3s ease-in-out;
 48     transition: all 0.3s ease-in-out;
 49 }
 50 .letter-container-sun h2 a:hover span{
 51     opacity: 0.3;
 52     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
 53     filter: alpha(opacity=30);
 54 }
 55 /* Radial gradient, great intro: http://www.impressivewebs.com/css3-radial-gradient-syntax/ */
 56 .letter-container-sun h2 a span:hover{
 57     opacity: 1;
 58     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
 59     filter: alpha(opacity=99);
 60     -webkit-box-shadow: 2px 2px 10px rgba(43,54,61, 0.4), 0px 0px 0px 0px #fedc3f inset, 0px 0px 100px 30px rgba(255,244,193,0.8);
 61     -moz-box-shadow: 2px 2px 10px rgba(43,54,61, 0.4), 0px 0px 0px 0px #fedc3f inset, 0px 0px 100px 30px rgba(255,244,193,0.8);
 62     box-shadow: 2px 2px 10px rgba(43,54,61, 0.4), 0px 0px 0px 0px #fedc3f inset, 0px 0px 100px 30px rgba(255,244,193,0.8);
 63     color: #ff8624;
 64     text-shadow: 1px 1px 2px rgba(166,97,41,0.5), 1px 1px 1px #e66212, 3px 3px 1px #fdff64, 4px 4px 6px #ff7420;
 65     background: #fedc3f; /* fallback for non-supporting browsers */
 66     background-image: -webkit-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
 67     background-image: -moz-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
 68     background-image: -ms-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
 69     background-image: -o-radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
 70     background-image: radial-gradient(center center, circle contain, #fedc3f 0%, #ff7420 100%);
 71 }
 72 
 73 
 74 
 75 .letter-container {
 76     border-bottom: 1px dashed rgba(255,255,255,0.3);
 77     border-top: 1px dashed rgba(255,255,255,0.3);
 78     margin: 20px;
 79     padding: 20px;
 80     height: 340px;
 81 }
 82 .letter-container h2 {
 83     text-align: center;
 84     font-family: 'Niconne', Arial, sans-serif;
 85     letter-spacing: 3px;
 86 }
 87 .letter-container h2 a {
 88     text-align: center;
 89     font-size: 130px;
 90     line-height: 160px;
 91     display: block;
 92     padding-bottom: 30px;
 93     -webkit-mask: url(/uploads/rs/439/akgpvyo1/mask.png) repeat;
 94     -o-mask: url(/uploads/rs/439/akgpvyo1/mask.png) repeat;
 95     -moz-mask: url(/uploads/rs/439/akgpvyo1/mask.png) repeat;
 96     -ms-mask: url(/uploads/rs/439/akgpvyo1/mask.png) repeat;
 97     mask: url(/uploads/rs/439/akgpvyo1/mask.png) repeat;
 98 }
 99 .letter-container h2 a span {
100     color: #fff;
101        opacity: 1;
102        text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
103     -webkit-transition: all 0.3s linear;
104     -moz-transition: all 0.3s linear;
105     -o-transition: all 0.3s linear;
106     -ms-transition: all 0.3s linear;
107     transition: all 0.3s linear;
108     -webkit-animation: sharpen 0.9s linear backwards;
109     -moz-animation: sharpen 0.9s linear backwards;
110     -ms-animation: sharpen 0.9s linear backwards;
111     animation: sharpen 0.9s linear backwards;
112 }
113 .letter-container h2 a span:hover{
114     text-shadow: 0px 0px 40px #fff;
115 }
116 .letter-container h2 a span:nth-child(1) {
117     -webkit-animation-delay: 0s;
118     -moz-animation-delay: 0s;
119     -ms-animation-delay: 0s;
120     animation-delay: 0s;
121 }
122 .letter-container h2 a span:nth-child(2) {
123     -webkit-animation-delay: 0.1s;
124     -moz-animation-delay: 0.1s;
125     -ms-animation-delay: 0.1s;
126     animation-delay: 0.1s;
127 }
128 .letter-container h2 a span:nth-child(3) {
129     -webkit-animation-delay: 0.2s;
130     -moz-animation-delay: 0.2s;
131     -ms-animation-delay: 0.2s;
132     animation-delay: 0.2s;
133 }
134 .letter-container h2 a span:nth-child(4) {
135     -webkit-animation-delay: 0.3s;
136     -moz-animation-delay: 0.3s;
137     -ms-animation-delay: 0.3s;
138     animation-delay: 0.3s;
139 }
140 .letter-container h2 a span:nth-child(5) {
141     -webkit-animation-delay: 0.4s;
142     -moz-animation-delay: 0.4s;
143     -ms-animation-delay: 0.4s;
144     animation-delay: 0.4s;
145 }
146 .letter-container h2 a span:nth-child(6) {
147     -webkit-animation-delay: 0.5s;
148     -moz-animation-delay: 0.5s;
149     -ms-animation-delay: 0.5s;
150     animation-delay: 0.5s;
151 }
152 .letter-container h2 a span:nth-child(7) {
153     -webkit-animation-delay: 0.6s;
154     -moz-animation-delay: 0.6s;
155     -ms-animation-delay: 0.6s;
156     animation-delay: 0.6s;
157 }
158 .letter-container h2 a span:nth-child(8) {
159     -webkit-animation-delay: 0.7s;
160     -moz-animation-delay: 0.7s;
161     -ms-animation-delay: 0.7s;
162     animation-delay: 0.7s;
163 }
164 .letter-container h2 a span:nth-child(9) {
165     -webkit-animation-delay: 0.8s;
166     -moz-animation-delay: 0.8s;
167     -ms-animation-delay: 0.8s;
168     animation-delay: 0.8s;
169 }
170 .letter-container h2 a span:nth-child(10) {
171     -webkit-animation-delay: 0.9s;
172     -moz-animation-delay: 0.9s;
173     -ms-animation-delay: 0.9s;
174     animation-delay: 0.9s;
175 }
176 .letter-container h2 a span:nth-child(11) {
177     -webkit-animation-delay: 1s;
178     -moz-animation-delay: 1s;
179     -ms-animation-delay: 1s;
180     animation-delay: 1s;
181 }
182 .letter-container h2 a span:nth-child(12) {
183     -webkit-animation-delay: 1.1s;
184     -moz-animation-delay: 1.1s;
185     -ms-animation-delay: 1.1s;
186     animation-delay: 1.1s;
187 }
188 .letter-container h2 a span:nth-child(13) {
189     -webkit-animation-delay: 1.2s;
190     -moz-animation-delay: 1.2s;
191     -ms-animation-delay: 1.2s;
192     animation-delay: 1.2s;
193 }
194 .letter-container h2 a span:nth-child(14) {
195     -webkit-animation-delay: 1.3s;
196     -moz-animation-delay: 1.3s;
197     -ms-animation-delay: 1.3s;
198     animation-delay: 1.3s;
199 }
200 .letter-container h2 a span:nth-child(15) {
201     -webkit-animation-delay: 1.4s;
202     -moz-animation-delay: 1.4s;
203     -ms-animation-delay: 1.4s;
204     animation-delay: 1.4s;
205 }
206 .letter-container h2 a span:nth-child(16) {
207     -webkit-animation-delay: 1.5s;
208     -moz-animation-delay: 1.5s;
209     -ms-animation-delay: 1.5s;
210     animation-delay: 1.5s;
211 }
212 .letter-container h2 a span:nth-child(17) {
213     -webkit-animation-delay: 1.6s;
214     -moz-animation-delay: 1.6s;
215     -ms-animation-delay: 1.6s;
216     animation-delay: 1.6s;
217 }
218 .letter-container h2 a span:nth-child(17) {
219     -webkit-animation-delay: 1.6s;
220     -moz-animation-delay: 1.6s;
221     -ms-animation-delay: 1.6s;
222     animation-delay: 1.6s;
223 }
224 .letter-container h2 a span:nth-child(18) {
225     -webkit-animation-delay: 1.7s;
226     -moz-animation-delay: 1.7s;
227     -ms-animation-delay: 1.7s;
228     animation-delay: 1.7s;
229 }
230 .letter-container h2 a span:nth-child(19) {
231     -webkit-animation-delay: 1.8s;
232     -moz-animation-delay: 1.8s;
233     -ms-animation-delay: 1.8s;
234     animation-delay: 1.8s;
235 }
236 .letter-container h2 a span:nth-child(20) {
237     -webkit-animation-delay: 1.9s;
238     -moz-animation-delay: 1.9s;
239     -ms-animation-delay: 1.9s;
240     animation-delay: 1.9s;
241 }
242 .letter-container h2 a span:nth-child(21) {
243     -webkit-animation-delay: 2s;
244     -moz-animation-delay: 2s;
245     -ms-animation-delay: 2s;
246     animation-delay: 2s;
247 }
248 .letter-container h2 a span:nth-child(22) {
249     -webkit-animation-delay: 2.1s;
250     -moz-animation-delay: 2.1s;
251     -ms-animation-delay: 2.1s;
252     animation-delay: 2.1s;
253 }
254 .letter-container h2 a span:nth-child(23) {
255     -webkit-animation-delay: 2.2s;
256     -moz-animation-delay: 2.2s;
257     -ms-animation-delay: 2.2s;
258     animation-delay: 2.2s;
259 }
260 .letter-container h2 a span:nth-child(24) {
261     -webkit-animation-delay: 2.3s;
262     -moz-animation-delay: 2.3s;
263     -ms-animation-delay: 2.3s;
264     animation-delay: 2.3s;
265 }
266 .letter-container h2 a span:nth-child(25) {
267     -webkit-animation-delay: 2.4s;
268     -moz-animation-delay: 2.4s;
269     -ms-animation-delay: 2.4s;
270     animation-delay: 2.4s;
271 }
272 .letter-container h2 a span:nth-child(26) {
273     -webkit-animation-delay: 2.5s;
274     -moz-animation-delay: 2.5s;
275     -ms-animation-delay: 2.5s;
276     animation-delay: 2.5s;
277 }
278 .letter-container h2 a span:nth-child(27) {
279     -webkit-animation-delay: 2.6s;
280     -moz-animation-delay: 2.6s;
281     -ms-animation-delay: 2.6s;
282     animation-delay: 2.6s;
283 }
284 .letter-container h2 a span:nth-child(28) {
285     -webkit-animation-delay: 2.7s;
286     -moz-animation-delay: 2.7s;
287     -ms-animation-delay: 2.7s;
288     animation-delay: 2.7s;
289 }
290 .letter-container h2 a span:nth-child(29) {
291     -webkit-animation-delay: 2.8s;
292     -moz-animation-delay: 2.8s;
293     -ms-animation-delay: 2.8s;
294     animation-delay: 2.8s;
295 }
296 .letter-container h2 a span:nth-child(30) {
297     -webkit-animation-delay: 2.9s;
298     -moz-animation-delay: 2.9s;
299     -ms-animation-delay: 2.9s;
300     animation-delay: 2.9s;
301 }
302 .letter-container h2 a span:nth-child(31) {
303     -webkit-animation-delay: 3s;
304     -moz-animation-delay: 3s;
305     -ms-animation-delay: 3s;
306     animation-delay: 3s;
307 }
308 .letter-container h2 a span:nth-child(32) {
309     -webkit-animation-delay: 3.1s;
310     -moz-animation-delay: 3.1s;
311     -ms-animation-delay: 3.1s;
312     animation-delay: 3.1s;
313 }
314 .letter-container h2 a span:nth-child(33) {
315     -webkit-animation-delay: 3.2s;
316     -moz-animation-delay: 3.2s;
317     -ms-animation-delay: 3.2s;
318     animation-delay: 3.2s;
319 }
320 @keyframes sharpen {
321  0% {
322        opacity: 0;
323        text-shadow: 0px 0px 100px #fff;
324        color: transparent;
325  }
326  90% {
327        opacity: 0.9;
328        text-shadow: 0px 0px 10px #fff;
329        color: transparent;
330  }
331  100% {
332     color: #fff;
333        opacity: 1;
334        text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
335  }
336 }
337 @-moz-keyframes sharpen {
338  0% {
339        opacity: 0;
340        text-shadow: 0px 0px 100px #fff;
341        color: transparent;
342  }
343  90% {
344        opacity: 0.9;
345        text-shadow: 0px 0px 10px #fff;
346        color: transparent;
347  }
348  100% {
349     color: #fff;
350        opacity: 1;
351        text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
352  }
353 }
354 @-webkit-keyframes sharpen {
355  0% {
356        opacity: 0;
357        text-shadow: 0px 0px 100px #fff;
358        color: transparent;
359  }
360  90% {
361        opacity: 0.9;
362        text-shadow: 0px 0px 10px #fff;
363        color: transparent;
364  }
365  100% {
366     color: #fff;
367        opacity: 1;
368        text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
369  }
370 }
371 @-ms-keyframes sharpen {
372  0% {
373        opacity: 0;
374        text-shadow: 0px 0px 100px #fff;
375        color: transparent;
376  }
377  90% {
378        opacity: 0.9;
379        text-shadow: 0px 0px 10px #fff;
380        color: transparent;
381  }
382  100% {
383     color: #fff;
384        opacity: 1;
385        text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
386  }
387 }

posted on 2014-12-16 17:00 Within_Temptation 阅读(416) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Copyright @ 2024 Within_Temptation
Powered by .NET 8.0 on Kubernetes
Powered by: .Text and ASP.NET
Theme by: .NET Monster

Within Temptation

公告