效果如图：
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 }
时间： 2024-10-08 03:23:05