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

 

你可能感兴趣的:(风格)