标签：des style blog http ar io color os sp
效果如图：
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 }
标签：des style blog http ar io color os sp
原文地址：http://www.cnblogs.com/geekpaul/p/4167521.html
