CSS3文字标题动画效果特效代码

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

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

以下是 CSS3文字标题动画效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为CSS3文字标题动画效果，属于站长常用代码" />
<title>CSS3文字标题动画效果</title>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<!-- 代码 开始 -->
	<section class="cd-title">
		<h1>Animated Headlines</h1>
	</section>
	
	<section class="cd-intro">
		<h1 class="cd-headline rotate-1">
			<span>My favourite food is</span>
			<span class="cd-words-wrapper">
				<b class="is-visible">pizza</b>
				<b>sushi</b>
				<b>steak</b>
			</span>
		</h1>
	</section> <!-- cd-intro -->
	<section class="cd-intro">
		<h1 class="cd-headline letters type">
			<span>My favourite food is</span> 
			<span class="cd-words-wrapper waiting">
				<b class="is-visible">pizza</b>
				<b>sushi</b>
				<b>steak</b>
			</span>
		</h1>
	</section> <!-- cd-intro -->
	<section class="cd-intro">
		<h1 class="cd-headline letters rotate-2">
			<span>My favourite food is</span> 
			<span class="cd-words-wrapper">
				<b class="is-visible">pizza</b>
				<b>sushi</b>
				<b>steak</b>
			</span>
		</h1>
	</section> <!-- cd-intro -->
	<section class="cd-intro">
		<h1 class="cd-headline loading-bar">
			<span>My favourite food is</span>
			<span class="cd-words-wrapper">
				<b class="is-visible">pizza</b>
				<b>sushi</b>
				<b>steak</b>
			</span>
		</h1>
	</section> <!-- cd-intro -->
	<section class="cd-intro">
		<h1 class="cd-headline slide">
			<span>My favourite food is</span>
			<span class="cd-words-wrapper">
				<b class="is-visible">pizza</b>
				<b>sushi</b>
				<b>steak</b>
			</span>
		</h1>
	</section> <!-- cd-intro -->
	<section class="cd-intro">
		<h1 class="cd-headline clip is-full-width">
			<span>My favourite food is</span>
			<span class="cd-words-wrapper">
				<b class="is-visible">pizza</b>
				<b>sushi</b>
				<b>steak</b>
			</span>
		</h1>
	</section> <!-- cd-intro -->
	<section class="cd-intro">
		<h1 class="cd-headline zoom">
			<span>My favourite food is</span>
			<span class="cd-words-wrapper">
				<b class="is-visible">pizza</b>
				<b>sushi</b>
				<b>steak</b>
			</span>
		</h1>
	</section> <!-- cd-intro -->
	<section class="cd-intro">
		<h1 class="cd-headline letters rotate-3">
			<span>My favourite food is</span> 
			<span class="cd-words-wrapper">
				<b class="is-visible">pizza</b>
				<b>sushi</b>
				<b>steak</b>
			</span>
		</h1>
	</section> <!-- cd-intro -->
	<section class="cd-intro">
		<h1 class="cd-headline letters scale">
			<span>My favourite food is</span> 
			<span class="cd-words-wrapper">
				<b class="is-visible">pizza</b>
				<b>sushi</b>
				<b>steak</b>
			</span>
		</h1>
	</section> <!-- cd-intro -->
	<section class="cd-intro">
		<h1 class="cd-headline push">
			<span>My favourite food is</span>
			<span class="cd-words-wrapper">
				<b class="is-visible">pizza</b>
				<b>sushi</b>
				<b>steak</b>
			</span>
		</h1>
	</section> <!-- cd-intro -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<!-- 代码 结束 -->
</body>
</html>

JS代码(main.js):

jQuery(document).ready(function($){
	//set animation timingvar animationDelay = 2500,//loading bar effectbarAnimationDelay = 3800,barWaiting = barAnimationDelay - 3000,//3000 is the duration of the transition on the loading bar - set in the scss/css file//letters effectlettersDelay = 50,//type effecttypeLettersDelay = 150,selectionDuration = 500,typeAnimationDelay = selectionDuration + 800,//clip effectrevealDuration = 600,revealAnimationDelay = 1500;
	initHeadline();
	function initHeadline(){
	//insert <i> element for each letter of a changing wordsingleLetters($('.cd-headline.letters').find('b'));
	//initialise headline animationanimateHeadline($('.cd-headline'));
}
function singleLetters($words){
	$words.each(function(){
	var word = $(this),letters = word.text().split(''),selected = word.hasClass('is-visible');
	for (i in letters){
	if(word.parents('.rotate-2').length > 0) letters[i] = '<em>' + letters[i] + '</em>';
	letters[i] = (selected) ? '<i class="in">' + letters[i] + '</i>':'<i>' + letters[i] + '</i>';
}
var newLetters = letters.join('');
	word.html(newLetters);
}
);
}
function animateHeadline($headlines){
	var duration = animationDelay;
	$headlines.each(function(){
	var headline = $(this);
	if(headline.hasClass('loading-bar')){
	duration = barAnimationDelay;
	setTimeout(function(){
	headline.find('.cd-words-wrapper').addClass('is-loading')}
,barWaiting);
}
else if (headline.hasClass('clip')){
	var spanWrapper = headline.find('.cd-words-wrapper'),newWidth = spanWrapper.width() + 10spanWrapper.css('width',newWidth);
}
else if (!headline.hasClass('type') ){
	//assign to .cd-words-wrapper the width of its longest wordvar words = headline.find('.cd-words-wrapper b'),width = 0;
	words.each(function(){
	var wordWidth = $(this).width();
	if (wordWidth > width) width = wordWidth;
}
);
	headline.find('.cd-words-wrapper').css('width',width);
}
;
	//trigger animationsetTimeout(function(){
	hideWord( headline.find('.is-visible').eq(0) )}
,duration);
}
);
}
function hideWord($word){
	var nextWord = takeNext($word);
	if($word.parents('.cd-headline').hasClass('type')){
	var parentSpan = $word.parent('.cd-words-wrapper');
	parentSpan.addClass('selected').removeClass('waiting');
	setTimeout(function(){
	parentSpan.removeClass('selected');
	$word.removeClass('is-visible').addClass('is-hidden').children('i').removeClass('in').addClass('out');
}
,selectionDuration);
	setTimeout(function(){
	showWord(nextWord,typeLettersDelay)}
,typeAnimationDelay);
}
else if($word.parents('.cd-headline').hasClass('letters')){
	var bool = ($word.children('i').length >= nextWord.children('i').length) ? true:false;
	hideLetter($word.find('i').eq(0),$word,bool,lettersDelay);
	showLetter(nextWord.find('i').eq(0),nextWord,bool,lettersDelay);
}
else if($word.parents('.cd-headline').hasClass('clip')){
	$word.parents('.cd-words-wrapper').animate({
	width:'2px'}
,revealDuration,function(){
	switchWord($word,nextWord);
	showWord(nextWord);
}
);
}
else if ($word.parents('.cd-headline').hasClass('loading-bar')){
	$word.parents('.cd-words-wrapper').removeClass('is-loading');
	switchWord($word,nextWord);
	setTimeout(function(){
	hideWord(nextWord)}
,barAnimationDelay);
	setTimeout(function(){
	$word.parents('.cd-words-wrapper').addClass('is-loading')}
,barWaiting);
}
else{
	switchWord($word,nextWord);
	setTimeout(function(){
	hideWord(nextWord)}
,animationDelay);
}
}
function showWord($word,$duration){
	if($word.parents('.cd-headline').hasClass('type')){
	showLetter($word.find('i').eq(0),$word,false,$duration);
	$word.addClass('is-visible').removeClass('is-hidden');
}
else if($word.parents('.cd-headline').hasClass('clip')){
	$word.parents('.cd-words-wrapper').animate({
	'width':$word.width() + 10}
,revealDuration,function(){
	setTimeout(function(){
	hideWord($word)}
,revealAnimationDelay);
}
);
}
}
function hideLetter($letter,$word,$bool,$duration){
	$letter.removeClass('in').addClass('out');
	if(!$letter.is(':last-child')){
	setTimeout(function(){
	hideLetter($letter.next(),$word,$bool,$duration);
}
,$duration);
}
else if($bool){
	setTimeout(function(){
	hideWord(takeNext($word))}
,animationDelay);
}
if($letter.is(':last-child') && $('html').hasClass('no-csstransitions')){
	var nextWord = takeNext($word);
	switchWord($word,nextWord);
}
}
function showLetter($letter,$word,$bool,$duration){
	$letter.addClass('in').removeClass('out');
	if(!$letter.is(':last-child')){
	setTimeout(function(){
	showLetter($letter.next(),$word,$bool,$duration);
}
,$duration);
}
else{
	if($word.parents('.cd-headline').hasClass('type')){
	setTimeout(function(){
	$word.parents('.cd-words-wrapper').addClass('waiting');
}
,200);
}
if(!$bool){
	setTimeout(function(){
	hideWord($word)}
,animationDelay)}
}
}
function takeNext($word){
	return (!$word.is(':last-child')) ? $word.next():$word.parent().children().eq(0);
}
function takePrev($word){
	return (!$word.is(':first-child')) ? $word.prev():$word.parent().children().last();
}
function switchWord($oldWord,$newWord){
	$oldWord.removeClass('is-visible').addClass('is-hidden');
	$newWord.removeClass('is-hidden').addClass('is-visible');
}
}
);

CSS代码(reset.css):

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

CSS代码(style.css):

/* --------------------------------Primary style-------------------------------- */
*,*::after,*::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
html{font-size:8px;}
body{font-size:1.6rem;font-family:"Source Sans Pro",sans-serif;color:#aebcb9;background-color:#0d0d0d;}
a{text-decoration:none;}
.cd-title{position:relative;height:160px;line-height:230px;text-align:center;}
.cd-title h1{font-size:2.4rem;font-weight:700;}
@media only screen and (min-width:768px){.cd-title{line-height:250px;}
}
@media only screen and (min-width:1170px){.cd-title{height:200px;line-height:300px;}
.cd-title h1{font-size:3rem;}
}
.cd-intro{width:90%;max-width:768px;text-align:center;}
.cd-intro{margin:4em auto;}
@media only screen and (min-width:768px){.cd-intro{margin:5em auto;}
}
@media only screen and (min-width:1170px){.cd-intro{margin:6em auto;}
}
.cd-headline{font-size:3rem;line-height:1.2;}
@media only screen and (min-width:768px){.cd-headline{font-size:4.4rem;font-weight:300;}
}
@media only screen and (min-width:1170px){.cd-headline{font-size:6rem;}
}
.cd-words-wrapper{display:inline-block;position:relative;text-align:left;}
.cd-words-wrapper b{display:inline-block;position:absolute;white-space:nowrap;left:0;top:0;}
.cd-words-wrapper b.is-visible{position:relative;}
.no-js .cd-words-wrapper b{opacity:0;}
.no-js .cd-words-wrapper b.is-visible{opacity:1;}
/* --------------------------------xrotate-1-------------------------------- */
.cd-headline.rotate-1 .cd-words-wrapper{-webkit-perspective:300px;-moz-perspective:300px;perspective:300px;}
.cd-headline.rotate-1 b{opacity:0;-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg);}
.cd-headline.rotate-1 b.is-visible{opacity:1;-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);-ms-transform:rotateX(0deg);-o-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-animation:cd-rotate-1-in 1.2s;-moz-animation:cd-rotate-1-in 1.2s;animation:cd-rotate-1-in 1.2s;}
.cd-headline.rotate-1 b.is-hidden{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg);-webkit-animation:cd-rotate-1-out 1.2s;-moz-animation:cd-rotate-1-out 1.2s;animation:cd-rotate-1-out 1.2s;}
@-webkit-keyframes cd-rotate-1-in{0%{-webkit-transform:rotateX(180deg);opacity:0;}
35%{-webkit-transform:rotateX(120deg);opacity:0;}
65%{opacity:0;}
100%{-webkit-transform:rotateX(360deg);opacity:1;}
}
@-moz-keyframes cd-rotate-1-in{0%{-moz-transform:rotateX(180deg);opacity:0;}
35%{-moz-transform:rotateX(120deg);opacity:0;}
65%{opacity:0;}
100%{-moz-transform:rotateX(360deg);opacity:1;}
}
@keyframes cd-rotate-1-in{0%{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg);opacity:0;}
35%{-webkit-transform:rotateX(120deg);-moz-transform:rotateX(120deg);-ms-transform:rotateX(120deg);-o-transform:rotateX(120deg);transform:rotateX(120deg);opacity:0;}
65%{opacity:0;}
100%{-webkit-transform:rotateX(360deg);-moz-transform:rotateX(360deg);-ms-transform:rotateX(360deg);-o-transform:rotateX(360deg);transform:rotateX(360deg);opacity:1;}
}
@-webkit-keyframes cd-rotate-1-out{0%{-webkit-transform:rotateX(0deg);opacity:1;}
35%{-webkit-transform:rotateX(-40deg);opacity:1;}
65%{opacity:0;}
100%{-webkit-transform:rotateX(180deg);opacity:0;}
}
@-moz-keyframes cd-rotate-1-out{0%{-moz-transform:rotateX(0deg);opacity:1;}
35%{-moz-transform:rotateX(-40deg);opacity:1;}
65%{opacity:0;}
100%{-moz-transform:rotateX(180deg);opacity:0;}
}
@keyframes cd-rotate-1-out{0%{-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);-ms-transform:rotateX(0deg);-o-transform:rotateX(0deg);transform:rotateX(0deg);opacity:1;}
35%{-webkit-transform:rotateX(-40deg);-moz-transform:rotateX(-40deg);-ms-transform:rotateX(-40deg);-o-transform:rotateX(-40deg);transform:rotateX(-40deg);opacity:1;}
65%{opacity:0;}
100%{-webkit-transform:rotateX(180deg);-moz-transform:rotateX(180deg);-ms-transform:rotateX(180deg);-o-transform:rotateX(180deg);transform:rotateX(180deg);opacity:0;}
}
/* --------------------------------xtype-------------------------------- */
.cd-headline.type .cd-words-wrapper{vertical-align:top;overflow:hidden;}
.cd-headline.type .cd-words-wrapper::after{/* vertical bar */
 content:'';position:absolute;right:0;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);height:90%;width:1px;background-color:#aebcb9;}
.cd-headline.type .cd-words-wrapper.waiting::after{-webkit-animation:cd-pulse 1s infinite;-moz-animation:cd-pulse 1s infinite;animation:cd-pulse 1s infinite;}
.cd-headline.type .cd-words-wrapper.selected{background-color:#aebcb9;}
.cd-headline.type .cd-words-wrapper.selected::after{visibility:hidden;}
.cd-headline.type .cd-words-wrapper.selected b{color:#0d0d0d;}
.cd-headline.type b{visibility:hidden;}
.cd-headline.type b.is-visible{visibility:visible;}
.cd-headline.type i{position:absolute;visibility:hidden;}
.cd-headline.type i.in{position:relative;visibility:visible;}
@-webkit-keyframes cd-pulse{0%{-webkit-transform:translateY(-50%) scale(1);opacity:1;}
40%{-webkit-transform:translateY(-50%) scale(0.9);opacity:0;}
100%{-webkit-transform:translateY(-50%) scale(0);opacity:0;}
}
@-moz-keyframes cd-pulse{0%{-moz-transform:translateY(-50%) scale(1);opacity:1;}
40%{-moz-transform:translateY(-50%) scale(0.9);opacity:0;}
100%{-moz-transform:translateY(-50%) scale(0);opacity:0;}
}
@keyframes cd-pulse{0%{-webkit-transform:translateY(-50%) scale(1);-moz-transform:translateY(-50%) scale(1);-ms-transform:translateY(-50%) scale(1);-o-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);opacity:1;}
40%{-webkit-transform:translateY(-50%) scale(0.9);-moz-transform:translateY(-50%) scale(0.9);-ms-transform:translateY(-50%) scale(0.9);-o-transform:translateY(-50%) scale(0.9);transform:translateY(-50%) scale(0.9);opacity:0;}
100%{-webkit-transform:translateY(-50%) scale(0);-moz-transform:translateY(-50%) scale(0);-ms-transform:translateY(-50%) scale(0);-o-transform:translateY(-50%) scale(0);transform:translateY(-50%) scale(0);opacity:0;}
}
/* --------------------------------xrotate-2-------------------------------- */
.cd-headline.rotate-2 .cd-words-wrapper{-webkit-perspective:300px;-moz-perspective:300px;perspective:300px;}
.cd-headline.rotate-2 i,.cd-headline.rotate-2 em{display:inline-block;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.cd-headline.rotate-2 i{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translateZ(-20px) rotateX(90deg);-moz-transform:translateZ(-20px) rotateX(90deg);-ms-transform:translateZ(-20px) rotateX(90deg);-o-transform:translateZ(-20px) rotateX(90deg);transform:translateZ(-20px) rotateX(90deg);opacity:0;}
.is-visible .cd-headline.rotate-2 i{opacity:1;}
.cd-headline.rotate-2 i.in{-webkit-animation:cd-rotate-2-in 0.4s forwards;-moz-animation:cd-rotate-2-in 0.4s forwards;animation:cd-rotate-2-in 0.4s forwards;}
.cd-headline.rotate-2 i.out{-webkit-animation:cd-rotate-2-out 0.4s forwards;-moz-animation:cd-rotate-2-out 0.4s forwards;animation:cd-rotate-2-out 0.4s forwards;}
.cd-headline.rotate-2 em{-webkit-transform:translateZ(20px);-moz-transform:translateZ(20px);-ms-transform:translateZ(20px);-o-transform:translateZ(20px);transform:translateZ(20px);}
.no-csstransitions .cd-headline.rotate-2 i{-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);-ms-transform:rotateX(0deg);-o-transform:rotateX(0deg);transform:rotateX(0deg);opacity:0;}
.no-csstransitions .cd-headline.rotate-2 i em{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
.no-csstransitions .cd-headline.rotate-2 .is-visible i{opacity:1;}
@-webkit-keyframes cd-rotate-2-in{0%{opacity:0;-webkit-transform:translateZ(-20px) rotateX(90deg);}
60%{opacity:1;-webkit-transform:translateZ(-20px) rotateX(-10deg);}
100%{opacity:1;-webkit-transform:translateZ(-20px) rotateX(0deg);}
}
@-moz-keyframes cd-rotate-2-in{0%{opacity:0;-moz-transform:translateZ(-20px) rotateX(90deg);}
60%{opacity:1;-moz-transform:translateZ(-20px) rotateX(-10deg);}
100%{opacity:1;-moz-transform:translateZ(-20px) rotateX(0deg);}
}
@keyframes cd-rotate-2-in{0%{opacity:0;-webkit-transform:translateZ(-20px) rotateX(90deg);-moz-transform:translateZ(-20px) rotateX(90deg);-ms-transform:translateZ(-20px) rotateX(90deg);-o-transform:translateZ(-20px) rotateX(90deg);transform:translateZ(-20px) rotateX(90deg);}
60%{opacity:1;-webkit-transform:translateZ(-20px) rotateX(-10deg);-moz-transform:translateZ(-20px) rotateX(-10deg);-ms-transform:translateZ(-20px) rotateX(-10deg);-o-transform:translateZ(-20px) rotateX(-10deg);transform:translateZ(-20px) rotateX(-10deg);}
100%{opacity:1;-webkit-transform:translateZ(-20px) rotateX(0deg);-moz-transform:translateZ(-20px) rotateX(0deg);-ms-transform:translateZ(-20px) rotateX(0deg);-o-transform:translateZ(-20px) rotateX(0deg);transform:translateZ(-20px) rotateX(0deg);}
}
@-webkit-keyframes cd-rotate-2-out{0%{opacity:1;-webkit-transform:translateZ(-20px) rotateX(0);}
60%{opacity:0;-webkit-transform:translateZ(-20px) rotateX(-100deg);}
100%{opacity:0;-webkit-transform:translateZ(-20px) rotateX(-90deg);}
}
@-moz-keyframes cd-rotate-2-out{0%{opacity:1;-moz-transform:translateZ(-20px) rotateX(0);}
60%{opacity:0;-moz-transform:translateZ(-20px) rotateX(-100deg);}
100%{opacity:0;-moz-transform:translateZ(-20px) rotateX(-90deg);}
}
@keyframes cd-rotate-2-out{0%{opacity:1;-webkit-transform:translateZ(-20px) rotateX(0);-moz-transform:translateZ(-20px) rotateX(0);-ms-transform:translateZ(-20px) rotateX(0);-o-transform:translateZ(-20px) rotateX(0);transform:translateZ(-20px) rotateX(0);}
60%{opacity:0;-webkit-transform:translateZ(-20px) rotateX(-100deg);-moz-transform:translateZ(-20px) rotateX(-100deg);-ms-transform:translateZ(-20px) rotateX(-100deg);-o-transform:translateZ(-20px) rotateX(-100deg);transform:translateZ(-20px) rotateX(-100deg);}
100%{opacity:0;-webkit-transform:translateZ(-20px) rotateX(-90deg);-moz-transform:translateZ(-20px) rotateX(-90deg);-ms-transform:translateZ(-20px) rotateX(-90deg);-o-transform:translateZ(-20px) rotateX(-90deg);transform:translateZ(-20px) rotateX(-90deg);}
}
/* --------------------------------xloading-bar-------------------------------- */
.cd-headline.loading-bar span{display:inline-block;padding:.2em 0;}
.cd-headline.loading-bar .cd-words-wrapper{overflow:hidden;vertical-align:top;}
.cd-headline.loading-bar .cd-words-wrapper::after{/* loading bar */
 content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:#0096a7;z-index:2;-webkit-transition:width 0.3s -0.1s;-moz-transition:width 0.3s -0.1s;transition:width 0.3s -0.1s;}
.cd-headline.loading-bar .cd-words-wrapper.is-loading::after{width:100%;-webkit-transition:width 3s;-moz-transition:width 3s;transition:width 3s;}
.cd-headline.loading-bar b{top:.2em;opacity:0;-webkit-transition:opacity 0.3s;-moz-transition:opacity 0.3s;transition:opacity 0.3s;}
.cd-headline.loading-bar b.is-visible{opacity:1;top:0;}
/* --------------------------------xslide-------------------------------- */
.cd-headline.slide span{display:inline-block;padding:.2em 0;}
.cd-headline.slide .cd-words-wrapper{overflow:hidden;vertical-align:top;}
.cd-headline.slide b{opacity:0;top:.2em;}
.cd-headline.slide b.is-visible{top:0;opacity:1;-webkit-animation:slide-in 0.6s;-moz-animation:slide-in 0.6s;animation:slide-in 0.6s;}
.cd-headline.slide b.is-hidden{-webkit-animation:slide-out 0.6s;-moz-animation:slide-out 0.6s;animation:slide-out 0.6s;}
@-webkit-keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(-100%);}
60%{opacity:1;-webkit-transform:translateY(20%);}
100%{opacity:1;-webkit-transform:translateY(0);}
}
@-moz-keyframes slide-in{0%{opacity:0;-moz-transform:translateY(-100%);}
60%{opacity:1;-moz-transform:translateY(20%);}
100%{opacity:1;-moz-transform:translateY(0);}
}
@keyframes slide-in{0%{opacity:0;-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%);}
60%{opacity:1;-webkit-transform:translateY(20%);-moz-transform:translateY(20%);-ms-transform:translateY(20%);-o-transform:translateY(20%);transform:translateY(20%);}
100%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
}
@-webkit-keyframes slide-out{0%{opacity:1;-webkit-transform:translateY(0);}
60%{opacity:0;-webkit-transform:translateY(120%);}
100%{opacity:0;-webkit-transform:translateY(100%);}
}
@-moz-keyframes slide-out{0%{opacity:1;-moz-transform:translateY(0);}
60%{opacity:0;-moz-transform:translateY(120%);}
100%{opacity:0;-moz-transform:translateY(100%);}
}
@keyframes slide-out{0%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);}
60%{opacity:0;-webkit-transform:translateY(120%);-moz-transform:translateY(120%);-ms-transform:translateY(120%);-o-transform:translateY(120%);transform:translateY(120%);}
100%{opacity:0;-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%);}
}
/* --------------------------------xclip-------------------------------- */
.cd-headline.clip span{display:inline-block;padding:.2em 0;}
.cd-headline.clip .cd-words-wrapper{overflow:hidden;vertical-align:top;}
.cd-headline.clip .cd-words-wrapper::after{/* line */
 content:'';position:absolute;top:0;right:0;width:2px;height:100%;background-color:#aebcb9;}
.cd-headline.clip b{opacity:0;}
.cd-headline.clip b.is-visible{opacity:1;}
/* --------------------------------xzoom-------------------------------- */
.cd-headline.zoom .cd-words-wrapper{-webkit-perspective:300px;-moz-perspective:300px;perspective:300px;}
.cd-headline.zoom b{opacity:0;}
.cd-headline.zoom b.is-visible{opacity:1;-webkit-animation:zoom-in 0.8s;-moz-animation:zoom-in 0.8s;animation:zoom-in 0.8s;}
.cd-headline.zoom b.is-hidden{-webkit-animation:zoom-out 0.8s;-moz-animation:zoom-out 0.8s;animation:zoom-out 0.8s;}
@-webkit-keyframes zoom-in{0%{opacity:0;-webkit-transform:translateZ(100px);}
100%{opacity:1;-webkit-transform:translateZ(0);}
}
@-moz-keyframes zoom-in{0%{opacity:0;-moz-transform:translateZ(100px);}
100%{opacity:1;-moz-transform:translateZ(0);}
}
@keyframes zoom-in{0%{opacity:0;-webkit-transform:translateZ(100px);-moz-transform:translateZ(100px);-ms-transform:translateZ(100px);-o-transform:translateZ(100px);transform:translateZ(100px);}
100%{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);}
}
@-webkit-keyframes zoom-out{0%{opacity:1;-webkit-transform:translateZ(0);}
100%{opacity:0;-webkit-transform:translateZ(-100px);}
}
@-moz-keyframes zoom-out{0%{opacity:1;-moz-transform:translateZ(0);}
100%{opacity:0;-moz-transform:translateZ(-100px);}
}
@keyframes zoom-out{0%{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);}
100%{opacity:0;-webkit-transform:translateZ(-100px);-moz-transform:translateZ(-100px);-ms-transform:translateZ(-100px);-o-transform:translateZ(-100px);transform:translateZ(-100px);}
}
/* --------------------------------xrotate-3-------------------------------- */
.cd-headline.rotate-3 .cd-words-wrapper{-webkit-perspective:300px;-moz-perspective:300px;perspective:300px;}
.cd-headline.rotate-3 i{display:inline-block;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.is-visible .cd-headline.rotate-3 i{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);}
.cd-headline.rotate-3 i.in{-webkit-animation:cd-rotate-3-in 0.6s forwards;-moz-animation:cd-rotate-3-in 0.6s forwards;animation:cd-rotate-3-in 0.6s forwards;}
.cd-headline.rotate-3 i.out{-webkit-animation:cd-rotate-3-out 0.6s forwards;-moz-animation:cd-rotate-3-out 0.6s forwards;animation:cd-rotate-3-out 0.6s forwards;}
.no-csstransitions .cd-headline.rotate-3 i{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);opacity:0;}
.no-csstransitions .cd-headline.rotate-3 .is-visible i{opacity:1;}
@-webkit-keyframes cd-rotate-3-in{0%{-webkit-transform:rotateY(180deg);}
100%{-webkit-transform:rotateY(0deg);}
}
@-moz-keyframes cd-rotate-3-in{0%{-moz-transform:rotateY(180deg);}
100%{-moz-transform:rotateY(0deg);}
}
@keyframes cd-rotate-3-in{0%{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);}
100%{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);}
}
@-webkit-keyframes cd-rotate-3-out{0%{-webkit-transform:rotateY(0);}
100%{-webkit-transform:rotateY(-180deg);}
}
@-moz-keyframes cd-rotate-3-out{0%{-moz-transform:rotateY(0);}
100%{-moz-transform:rotateY(-180deg);}
}
@keyframes cd-rotate-3-out{0%{-webkit-transform:rotateY(0);-moz-transform:rotateY(0);-ms-transform:rotateY(0);-o-transform:rotateY(0);transform:rotateY(0);}
100%{-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);-o-transform:rotateY(-180deg);transform:rotateY(-180deg);}
}
/* --------------------------------xscale-------------------------------- */
.cd-headline.scale i{display:inline-block;opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);}
.is-visible .cd-headline.scale i{opacity:1;}
.cd-headline.scale i.in{-webkit-animation:scale-up 0.6s forwards;-moz-animation:scale-up 0.6s forwards;animation:scale-up 0.6s forwards;}
.cd-headline.scale i.out{-webkit-animation:scale-down 0.6s forwards;-moz-animation:scale-down 0.6s forwards;animation:scale-down 0.6s forwards;}
.no-csstransitions .cd-headline.scale i{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:0;}
.no-csstransitions .cd-headline.scale .is-visible i{opacity:1;}
@-webkit-keyframes scale-up{0%{-webkit-transform:scale(0);opacity:0;}
60%{-webkit-transform:scale(1.2);opacity:1;}
100%{-webkit-transform:scale(1);opacity:1;}
}
@-moz-keyframes scale-up{0%{-moz-transform:scale(0);opacity:0;}
60%{-moz-transform:scale(1.2);opacity:1;}
100%{-moz-transform:scale(1);opacity:1;}
}
@keyframes scale-up{0%{-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);opacity:0;}
60%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);opacity:1;}
100%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1;}
}
@-webkit-keyframes scale-down{0%{-webkit-transform:scale(1);opacity:1;}
60%{-webkit-transform:scale(0);opacity:0;}
}
@-moz-keyframes scale-down{0%{-moz-transform:scale(1);opacity:1;}
60%{-moz-transform:scale(0);opacity:0;}
}
@keyframes scale-down{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);opacity:1;}
60%{-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);opacity:0;}
}
/* --------------------------------xpush-------------------------------- */
.cd-headline.push b{opacity:0;}
.cd-headline.push b.is-visible{opacity:1;-webkit-animation:push-in 0.6s;-moz-animation:push-in 0.6s;animation:push-in 0.6s;}
.cd-headline.push b.is-hidden{-webkit-animation:push-out 0.6s;-moz-animation:push-out 0.6s;animation:push-out 0.6s;}
@-webkit-keyframes push-in{0%{opacity:0;-webkit-transform:translateX(-100%);}
60%{opacity:1;-webkit-transform:translateX(10%);}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes push-in{0%{opacity:0;-moz-transform:translateX(-100%);}
60%{opacity:1;-moz-transform:translateX(10%);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@keyframes push-in{0%{opacity:0;-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%);}
60%{opacity:1;-webkit-transform:translateX(10%);-moz-transform:translateX(10%);-ms-transform:translateX(10%);-o-transform:translateX(10%);transform:translateX(10%);}
100%{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
}
@-webkit-keyframes push-out{0%{opacity:1;-webkit-transform:translateX(0);}
60%{opacity:0;-webkit-transform:translateX(110%);}
100%{opacity:0;-webkit-transform:translateX(100%);}
}
@-moz-keyframes push-out{0%{opacity:1;-moz-transform:translateX(0);}
60%{opacity:0;-moz-transform:translateX(110%);}
100%{opacity:0;-moz-transform:translateX(100%);}
}
@keyframes push-out{0%{opacity:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
60%{opacity:0;-webkit-transform:translateX(110%);-moz-transform:translateX(110%);-ms-transform:translateX(110%);-o-transform:translateX(110%);transform:translateX(110%);}
100%{opacity:0;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);}
}

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