jQuery创意字体特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery创意字体特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Creative Web Typography Styles</title>
        <meta name="description" content="Creative Web Typography Styles - Having fun with text styles and effects" />
        <meta name="keywords" content="css3, typography, styles, letters, creative, effects, transitions, animations" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<!--<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300|Sancreek|Raleway:100' rel='stylesheet' type='text/css' />-->
		<script type="text/javascript" src="js/modernizr.custom.79639.js"></script> 
		<!--[if lte IE 8]><style>.support-note .note-ie{display:block;}</style><![endif]-->
    </head>
    <body>
        <div class="container">
		
			<!-- Codrops top bar -->
            <div class="codrops-top">
                <a href="#">
                    <strong>&laquo; Previous Demo: </strong>BookBlock �?A Content Flip Plugin
                </a>
                <span class="right">
                	<a href="#">Image by Kevin Lallier</a>
                   <a href="#">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
			
			<header>
			
				<h1>Creative <strong>Web Typography</strong> Styles</h1>
				<h2>Fun with text styles and effects</h2>
				
				<nav class="codrops-demos">
					<a class="current-demo" href="index.html">Demo 1</a>
					<a href="index2.html">Demo 2</a>
					<a href="index3.html">Demo 3</a>
					<a href="index4.html">Demo 4</a>
					<a href="index5.html">Demo 5</a>
					<a href="index6.html">Demo 6</a>
					<a href="index7.html">Demo 7</a>
					<a href="index8.html">Demo 8</a>
				</nav>
				
				<div class="support-note"><!-- let's check browser support with modernizr -->
					<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
					<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>
				
			</header>
			
			<section class="main">
				
				<h2 class="cs-text">
					<span class="cs-text-cut">Smooth</span>
					<span class="cs-text-mid">Operator</span>
					<span class="cs-text-cut">Smooth</span>
				</h2>
				
			</section>
			
        </div>

        <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="js/jquery.lettering.js"></script>
		<script>
			$(document).ready(function() {
				$(".cs-text-cut").lettering('words');
			});
		</script>
    </body>
</html>

JS代码(jquery.lettering.js):

/*global jQuery */
/*!* Lettering.JS 0.6.1** Copyright 2010,Dave Rupert http://daverupert.com* Released under the WTFPL license* http://sam.zoy.org/wtfpl/** Thanks to Paul Irish - http://paulirish.com - for the feedback.** Date:Mon Sep 20 17:14:00 2010 -0600*/
(function($){
	function injector(t,splitter,klass,after){
	var a = t.text().split(splitter),inject = '';
	if (a.length){
	$(a).each(function(i,item){
	inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
}
);
	t.empty().append(inject);
}
}
var methods ={
	init:function(){
	return this.each(function(){
	injector($(this),'','char','');
}
);
}
,words:function(){
	return this.each(function(){
	injector($(this),' ','word',' ');
}
);
}
,lines:function(){
	return this.each(function(){
	var r = "eefec303079ad17405c889e092e105b0";
	// Because it's hard to split a <br/> tag consistently across browsers,// (*ahem* IE *ahem*),we replaces all <br/> instances with an md5 hash// (of the word "split"). If you're trying to use this plugin on that// md5 hash string,it will fail because you're being ridiculous.injector($(this).children("br").replaceWith(r).end(),r,'line','');
}
);
}
}
;
	$.fn.lettering = function( method ){
	// Method calling logicif ( method && methods[method] ){
	return methods[ method ].apply( this,[].slice.call( arguments,1 ));
}
else if ( method === 'letters' || ! method ){
	return methods.init.apply( this,[].slice.call( arguments,0 ) );
	// always pass an array}
$.error( 'Method ' + method + ' does not exist on jQuery.lettering' );
	return this;
}
;
}
)(jQuery);

CSS代码(demo.css):

@import url('normalize.css');/* General Demo Style */
body{font-family:'Open Sans Condensed','Arial Narrow',serif;background:#ddd url(../images/light_noise_diagonal.png) repeat top left;font-weight:400;font-size:15px;color:#333;-webkit-font-smoothing:antialiased;overflow-y:scroll;overflow-x:hidden;min-height:100%}
a{color:#555;text-decoration:none;}
.container{width:100%;position:relative;}
.clr{clear:both;padding:0;height:0;margin:0;}
.main{width:90%;margin:0 auto;position:relative;}
.container > header{margin:10px;padding:20px 10px 10px 10px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header h1{font-size:36px;line-height:36px;margin:0;position:relative;font-weight:300;color:#666;text-shadow:1px 1px 1px rgba(255,255,255,0.7);}
.container > header h2{font-size:14px;font-weight:300;margin:0;padding:15px 0 5px 0;color:#555;font-family:Cambria,Georgia,serif;font-style:italic;text-shadow:1px 1px 1px rgba(255,255,255,0.9);}
/* Header Style */
.codrops-top{line-height:24px;font-size:11px;background:#fff;background:rgba(255,255,255,0.5);text-transform:uppercase;z-index:9999;position:relative;font-family:Cambria,Georgia,serif;box-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;display:inline-block;}
.codrops-top a:hover{background:rgba(255,255,255,0.6);}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
/* Demo Buttons Style */
.codrops-demos{text-align:center;display:block;line-height:30px;padding:5px 0px;}
.codrops-demos a{display:inline-block;position:relative;line-height:22px;padding:0 8px;margin:0 3px;text-decoration:none;font-size:12px;font-weight:700;text-align:center;border-radius:2px;color:#555;border:1px solid #ddd;text-shadow:0px 1px 0px rgba(255,255,255,0.8);background:#f0f0f0;background:-moz-linear-gradient(top,#ffffff,#f0f0f0);background:-webkit-linear-gradient(top,#ffffff,#f0f0f0);background:-o-linear-gradient(top,#ffffff,#f0f0f0);background:-ms-linear-gradient(top,#ffffff,#f0f0f0);background:linear-gradient(top,#ffffff,#f0f0f0);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1),0 1px 1px rgba(0,0,0,0.2);}
.codrops-demos a:hover{background:#f0f0f0;}
.codrops-demos a:active{box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);}
.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{background:#777;border-color:rgba(0,0,0,0.01);color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.4);box-shadow:1px 1px 0 rgba(255,255,255,0.3),inset 0 1px 1px rgba(0,0,0,0.3);}
.support-note span{color:#ac375d;font-size:16px;display:none;font-weight:bold;text-align:center;padding:5px 0;}
.no-cssanimations .support-note span.no-cssanimations,.no-csstransforms .support-note span.no-csstransforms,.no-csstransforms3d .support-note span.no-csstransforms3d,.no-csstransitions .support-note span.no-csstransitions{display:block;}

CSS代码(style.css):

body{background:#ddd url(../images/field.jpg) no-repeat top left;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;}
.container > header h1,.container > header h2{color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.2);}
.cs-text{width:645px;margin:120px auto 30px;cursor:default;}
.cs-text > span{display:block;-webkit-backface-visibility:hidden;}
.cs-text-cut{width:100%;height:90px;overflow:hidden;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;-ms-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;}
.cs-text-cut:first-child{border-top:1px solid rgba(255,255,255,0.5);}
.cs-text-cut:last-child{border-bottom:1px solid rgba(255,255,255,0.5);}
.cs-text-cut span{display:block;line-height:180px;color:rgba(255,255,255,1);font-size:180px;font-weight:400;text-transform:uppercase;text-align:center;margin-top:6px;font-family:'Sancreek',cursive;text-shadow:7px 2px 0 rgba(255,255,255,0.3);}
.cs-text-cut:last-child span{margin-top:-84px;}
.cs-text-mid{font-family:'Raleway',sans-serif;font-weight:100;text-transform:uppercase;font-size:50px;letter-spacing:50px;line-height:50px;text-indent:20px;position:absolute;top:50%;margin-top:-25px;color:rgba(255,255,255,0.3);text-shadow:0 0 0 rgba(255,255,255,0.9);opacity:0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-o-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5);-webkit-transition:all 0.4s ease-in-out 0s;-moz-transition:all 0.4s ease-in-out 0s;-o-transition:all 0.4s ease-in-out 0s;-ms-transition:all 0.4s ease-in-out 0s;transition:all 0.4s ease-in-out 0s;}
.cs-text:hover .cs-text-cut:first-child{-webkit-transform:translateY(-25px);-moz-transform:translateY(-25px);-o-transform:translateY(-25px);-ms-transform:translateY(-25px);transform:translateY(-25px);opacity:0.5;}
.cs-text:hover .cs-text-cut:last-child{-webkit-transform:translateY(25px);-moz-transform:translateY(25px);-o-transform:translateY(25px);-ms-transform:translateY(25px);transform:translateY(25px);opacity:0.5;}
.cs-text:hover .cs-text-mid{-webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}

附件:下载该文件资源,减少时间成本(增值服务)