首页 > 代码库 > 1024的页面文字风格（比滑板鞋还炫酷！）
1024的页面文字风格（比滑板鞋还炫酷！）
效果如图：
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 -060012 */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 logic57 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 array61 }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 }
1024的页面文字风格（比滑板鞋还炫酷！）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。