jQuery Metro Tooltip插件js特效代码

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

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

以下是 jQuery Metro Tooltip插件js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>jQuery Metro Tooltip���</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
</head>

<body>

<div align="center">
	<div class="content">
		<h2>Metro Tooltip</h2>
		Metro tooltip is a powerful
		<span class="mtTool purp" mttitle="Tooltip" mtcontent="Can be strong and pretty" mtcolor="#7514b5">
		Tool</span>, to show information that you need for your
		<span class="mtTool purp" mttitle="It's easy to set up" mtcontent="A good way to show help &lt;br/&gt;So your website or application can be simpler" mtimg="img/1.png">
		users.</span><br>
		<br>
		Tooltips can be awesome with cool animations like
		<span class="mtTool pink" mttitle="boinceIn" mtcolor="#ec008c" mtanimation="bounceIn" mtposition="top">
		bounceIn</span>,
		<span class="mtTool pink" mttitle="wobble" mtanimation="wobble" mtcolor="#ec008c" mtposition="top">
		wobble</span>,
		<span class="mtTool pink" mttitle="shake" mtanimation="shake" mtcolor="#ec008c" mtposition="top">
		shake</span>,
		<span class="mtTool pink" mttitle="tada" mtanimation="tada" mtcolor="#ec008c" mtposition="top">
		tada</span>,
		<span class="mtTool pink" mttitle="fadeInDown" mtanimation="fadeInDown fast" mtcolor="#ec008c" mtposition="top">
		fadeInDown</span> and much
		<span class="mtTool pink" mttitle="Many animations" mtanimation="bounceInDown" mtcolor="#ec008c" mtposition="top">
		more!</span> (Animations are not available on
		<span class="mtTool pink" mtcontent="&lt;img src='img/IE-64.png' style='width:32px;float:left;'&gt;">
		IE.</span> It will display a soft fade in instead). <br>
		<br>
		Also has positioning
		<span class="mtTool teal" mttitle="Top Position" mtcolor="#0072bc" mtposition="top">
		top</span>,
		<span class="mtTool teal" mttitle="Bottom Position" mtcolor="#0072bc" mtposition="bottom">
		bottom</span>,
		<span class="mtTool teal" mttitle="Right Position" mtcolor="#0072bc" mtposition="right">
		right</span>,
		<span class="mtTool teal" mttitle="Left Position" mtcolor="#0072bc" mtposition="left">
		left</span>. Don&#39;t worry to customize all the tooltips, you can set a <spna class="mtTool teal" mttitle="Metro Tooltip" mtcolor="#0072bc" mtposition="bottom" mtcontent="mtcolor: &nbsp&nbsp&nbsp&nbsp'#0072bc',<br/>mtposition: 'bottom',<br/>mttitle: &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'Metro Tooltip',<br/> and much more...">
		default values </spna> for all of them or to specific ones. <br>
		<br>
		What? do you want more? Ok, what if you can show a big map of
		<span class="mtTool green" mtcolor="#39b54a" mtpersist="1" mttitle="This is my business" mtcontent="&lt;iframe width='100%' height='300px' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='https://maps.google.es/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=san+jose+costa+rica&amp;aq=&amp;sll=43.281204,-7.921143&amp;sspn=2.847262,5.811768&amp;ie=UTF8&amp;hq=&amp;hnear=San+Jos%C3%A9,+Costa+Rica&amp;ll=9.927128,-84.082012&amp;spn=0.060197,0.090809&amp;t=m&amp;z=14&amp;output=embed'&gt;&lt;/iframe&gt;">
		your location</span> and hold the tooltip until you close it? <br>
		<br>
		Not enough?, Humm, looks like you know what you want. Let&#39;s show a
		<span class="mtTool red" mttitle="Ironman Trailer" mtpersist="1" mtcolor="#f30009" mtposition="bottom" mtcontent="&lt;iframe width='100%' height='315px' src='#' frameborder='0' allowfullscreen&gt;&lt;/iframe&gt;">
		youtube</span> video. <br>
		<br>
		Metro Tooltip is powerful, but also looks great on Macs with
		<span class="mtTool purp" mttitle="Retina Display" mtposition="bottom" mtcontent="Have a high enough pixel density that the human eye &lt;br/&gt;is unable to notice pixelation at a typical viewing distance." mtimg="img/Airdrop@2x.png">
		retina.</span> And with an amazing icon set thanks to
		<span class="mtTool purp" mtposition="top" mtpersist="1" mtcontent="&lt;iframe width='100%' height='300px' frameborder='0' src='#'&gt;&lt;/iframe&gt;">
		www.pixellove.com </span>(free icon set), this works even better!, but you 
		can use any kind of image. <br>
		<br>
		Let&#39;s check some examples
		<ul>
			<li>A social network...
			<span class="mtTool facebook" mttitle="facebook" mtcolor="#3e5c9a" mtcontent="&lt;div style='width:300px;'&gt;Facebook is an online social networking service. Its name stems from the colloquial name for the book given to students at the start of the academic year by some American university administrations to help students get to know one another.&lt;/div&gt;" mtimg="img/Facebook@2x.png">
			facebook</span></li>
			<li>A blogging tool...
			<span class="mtTool wordpress" mttitle="Wordpress" mtposition="left" mtcolor="#21759b" mtcontent="&lt;div style='width:400px;'&gt;WordPress is a free and open source blogging tool and a content-management system (CMS) based on PHP and MySQL, which runs on a web hosting service.[3] Features include a plug-in architecture and a template system.&lt;/div&gt;" mtimg="img/Wordpress@2x.png">
			Wordpress</span></li>
			<li>A voiceIP service...
			<span class="mtTool skype" mttitle="Wordpress" mtposition="top" mtcolor="#29abe2" mtcontent="Skype (skaip) is a freemium voice-over-IP service and instant &lt;br/&gt;messaging client that is currently developed by the Microsoft Skype Division.&lt;br/&gt; The name originally derived from 'sky' and 'peer'." mtimg="img/Skype@2x.png">
			Skype</span></li>
			<li>A video-sharing website...
			<span class="mtTool youtube" mttitle="Youtube" mtposition="bottom" mtcolor="#ec2727" mtcontent="YouTube is a video-sharing website, &lt;br/&gt;created by three former PayPal employees in February 2005 and owned by Google since late 2006,&lt;br/&gt; on which users can upload, view and share videos." mtimg="img/YouTube@2x.png">
			Youtube</span></li>
		</ul>
		<br>
		<br>
		Now... this is a
		<span class="mtTool pink" mtcolor="#ec008c" mtcontent="&lt;img src='img/jquery.png' style='width:100px;'&gt;">
		jQuery </span>plugin with css styles. So, in the bottom of your page or 
		on form load, you need to
		<span class="mtTool pink" mtcolor="#ec008c" mttitle="Initialize with some default parameters" mtcontent="$.MetroTooltipInit({&lt;br/&gt;&nbsp;&nbsp;&amp;nbspanimation: 'fadeInLeft fast',&lt;br/&gt;&nbsp;&nbsp;&amp;nbsppersist: 0,&lt;br/&gt;});">
		initialize it.</span><br>
		<br>
		The problem that you may think, is &quot;What happen if I dynamically add elements 
		with tooltip?&quot; <br>
		<br>
		<span class="mtTool teal" mtcolor="#0072bc" mttitle="It wont work :(" mtcontent="BUT! There's a way to make it! :D">
		Answer!</span><br>
		<br>
		<br>
		I created a super light function that will initialize the new tooltips.
		<br />
		<br />
		<button id="AddTool" class="mtTool botTeal" mtposition="top" mtcontent="Nice and easy, no aditional configuration... works with any HTML element and the help icon can be disabled." mtanimation="fadeInDown fast" mthelpicon="0" mtimg="img/Fencing@2x.png" mtcolor="#0072bc" mttitle="Yes, Also works on buttons">
		Add New Element</button><br>
		<br>
		<div id="NewTools">
		</div>
		<br>
		<br>
		And remember, this product is avalaible only on
		<span class="mtTool red" mttitle="&lt;span style='color:black;'&gt;Codecanyon&lt;/span&gt;" mtcolor="#ffffff" mtcontent="&lt;img src='img/codecanyon.png' style='width:150px'&gt;">
		Codecanyon</span></div>
</div>
<script type="text/javascript">$(document).ready(function(){$.MetroTooltipInit({animation:"fadeInLeft fast",persist:0,})});var ColorCount=1;$("#AddTool").on("click",function(){switch(ColorCount){case 1:var a='Hi, I\'m a new element with <span class="mtTool purp" mttitle="Hello :)" mtcolor="#7514b5">Metro Tooltip</span><br/>';ColorCount=2;break;case 2:var a='Hi, I\'m a new element with <span class="mtTool pink" mttitle="Hello :)" mtcolor="#ec008c">Metro Tooltip</span><br/>';ColorCount=3;break;case 3:var a='Hi, I\'m a new element with <span class="mtTool teal" mttitle="Hello :)" mtcolor="#0072bc">Metro Tooltip</span><br/>';ColorCount=4;break;case 4:var a='Hi, I\'m a new element with <span class="mtTool green" mttitle="Hello :)" mtcolor="#39b54a">Metro Tooltip</span><br/>';ColorCount=1;break}$("#NewTools").append(a);$.mtReInit()});</script>
</body>
</html>

CSS代码(style.css):

body{font-family:'Segoe UI',Tahoma,Helvetica,Sans-Serif}
h2{color:#7514b5;font-weight:normal;font-size:30px}
.content{margin-top:100px;width:400px;text-align:left;margin-bottom:200px}
.purp{color:#7514b5;font-size:20px}
.pink{color:#ec008c;font-size:20px}
.teal{color:#0072bc;font-size:20px}
.green{color:#39b54a;font-size:20px}
.red{color:#f30009;font-size:20px}
.facebook{color:#3e5c9a;font-size:20px}
.wordpress{color:#21759b;font-size:20px}
.skype{color:#29abe2;font-size:20px}
.youtube{color:#ec2727;font-size:20px}
button{padding:10px;padding-left:20px;padding-right:20px;color:white;border:0}
.botTeal{background-color:#0072bc}
.botTeal:hover{background-color:#0363a1}
.mtHelpIcon{cursor:help}
.mtContent{position:absolute;font-family:'Segoe UI',Tahoma,Helvetica,Sans-Serif;color:white;background-color:#32a89e;text-align:left;padding:5px;-webkit-box-shadow:0 0 11px rgba(50,50,50,0.56);-moz-box-shadow:0 0 11px rgba(50,50,50,0.56);box-shadow:0 0 11px rgba(50,50,50,0.56)}
.mtContentTitle{display:block;font-size:15px;float:left}
.mtCloseCross{position:absolute;right:5px;top:0;float:right;font-size:15px;cursor:pointer}
.mtContentBody{font-size:12px}
.mtToolImage{display:block;width:32px;height:32px;float:right;margin-left:10px}
.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}
.animated.fast{-webkit-animation-duration:.4s;-moz-animation-duration:.4s;-ms-animation-duration:.4s;-o-animation-duration:.4s;animation-duration:.4s}
@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0)}
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}
20%,40%,60%,80%{-webkit-transform:translateX(10px)}
}
@-moz-keyframes shake{0%,100%{-moz-transform:translateX(0)}
10%,30%,50%,70%,90%{-moz-transform:translateX(-10px)}
20%,40%,60%,80%{-moz-transform:translateX(10px)}
}
@-o-keyframes shake{0%,100%{-o-transform:translateX(0)}
10%,30%,50%,70%,90%{-o-transform:translateX(-10px)}
20%,40%,60%,80%{-o-transform:translateX(10px)}
}
@keyframes shake{0%,100%{transform:translateX(0)}
10%,30%,50%,70%,90%{transform:translateX(-10px)}
20%,40%,60%,80%{transform:translateX(10px)}
}
.shake{-webkit-animation-name:shake;-moz-animation-name:shake;-o-animation-name:shake;animation-name:shake}
@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-30px)}
60%{-webkit-transform:translateY(-15px)}
}
@-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0)}
40%{-moz-transform:translateY(-30px)}
60%{-moz-transform:translateY(-15px)}
}
@-o-keyframes bounce{0%,20%,50%,80%,100%{-o-transform:translateY(0)}
40%{-o-transform:translateY(-30px)}
60%{-o-transform:translateY(-15px)}
}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}
40%{transform:translateY(-30px)}
60%{transform:translateY(-15px)}
}
.bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-o-animation-name:bounce;animation-name:bounce}
@-webkit-keyframes tada{0%{-webkit-transform:scale(1)}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
100%{-webkit-transform:scale(1) rotate(0)}
}
@-moz-keyframes tada{0%{-moz-transform:scale(1)}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
100%{-moz-transform:scale(1) rotate(0)}
}
@-o-keyframes tada{0%{-o-transform:scale(1)}
10%,20%{-o-transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-o-transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg)}
100%{-o-transform:scale(1) rotate(0)}
}
@keyframes tada{0%{transform:scale(1)}
10%,20%{transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}
40%,60%,80%{transform:scale(1.1) rotate(-3deg)}
100%{transform:scale(1) rotate(0)}
}
.tada{-webkit-animation-name:tada;-moz-animation-name:tada;-o-animation-name:tada;animation-name:tada}
@-webkit-keyframes swing{20%,40%,60%,80%,100%{-webkit-transform-origin:top center}
20%{-webkit-transform:rotate(15deg)}
40%{-webkit-transform:rotate(-10deg)}
60%{-webkit-transform:rotate(5deg)}
80%{-webkit-transform:rotate(-5deg)}
100%{-webkit-transform:rotate(0deg)}
}
@-moz-keyframes swing{20%{-moz-transform:rotate(15deg)}
40%{-moz-transform:rotate(-10deg)}
60%{-moz-transform:rotate(5deg)}
80%{-moz-transform:rotate(-5deg)}
100%{-moz-transform:rotate(0deg)}
}
@-o-keyframes swing{20%{-o-transform:rotate(15deg)}
40%{-o-transform:rotate(-10deg)}
60%{-o-transform:rotate(5deg)}
80%{-o-transform:rotate(-5deg)}
100%{-o-transform:rotate(0deg)}
}
@keyframes swing{20%{transform:rotate(15deg)}
40%{transform:rotate(-10deg)}
60%{transform:rotate(5deg)}
80%{transform:rotate(-5deg)}
100%{transform:rotate(0deg)}
}
.swing{-webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;-moz-animation-name:swing;-o-animation-name:swing;animation-name:swing}
@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%)}
15%{-webkit-transform:translateX(-25%) rotate(-5deg)}
30%{-webkit-transform:translateX(20%) rotate(3deg)}
45%{-webkit-transform:translateX(-15%) rotate(-3deg)}
60%{-webkit-transform:translateX(10%) rotate(2deg)}
75%{-webkit-transform:translateX(-5%) rotate(-1deg)}
100%{-webkit-transform:translateX(0%)}
}
@-moz-keyframes wobble{0%{-moz-transform:translateX(0%)}
15%{-moz-transform:translateX(-25%) rotate(-5deg)}
30%{-moz-transform:translateX(20%) rotate(3deg)}
45%{-moz-transform:translateX(-15%) rotate(-3deg)}
60%{-moz-transform:translateX(10%) rotate(2deg)}
75%{-moz-transform:translateX(-5%) rotate(-1deg)}
100%{-moz-transform:translateX(0%)}
}
@-o-keyframes wobble{0%{-o-transform:translateX(0%)}
15%{-o-transform:translateX(-25%) rotate(-5deg)}
30%{-o-transform:translateX(20%) rotate(3deg)}
45%{-o-transform:translateX(-15%) rotate(-3deg)}
60%{-o-transform:translateX(10%) rotate(2deg)}
75%{-o-transform:translateX(-5%) rotate(-1deg)}
100%{-o-transform:translateX(0%)}
}
@keyframes wobble{0%{transform:translateX(0%)}
15%{transform:translateX(-25%) rotate(-5deg)}
30%{transform:translateX(20%) rotate(3deg)}
45%{transform:translateX(-15%) rotate(-3deg)}
60%{transform:translateX(10%) rotate(2deg)}
75%{transform:translateX(-5%) rotate(-1deg)}
100%{transform:translateX(0%)}
}
.wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-o-animation-name:wobble;animation-name:wobble}
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1)}
50%{-webkit-transform:scale(1.1)}
100%{-webkit-transform:scale(1)}
}
@-moz-keyframes pulse{0%{-moz-transform:scale(1)}
50%{-moz-transform:scale(1.1)}
100%{-moz-transform:scale(1)}
}
@-o-keyframes pulse{0%{-o-transform:scale(1)}
50%{-o-transform:scale(1.1)}
100%{-o-transform:scale(1)}
}
@keyframes pulse{0%{transform:scale(1)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}
.pulse{-webkit-animation-name:pulse;-moz-animation-name:pulse;-o-animation-name:pulse;animation-name:pulse}
@-webkit-keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
@-moz-keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
@-o-keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
@keyframes fadeIn{0%{opacity:0}
100%{opacity:1}
}
.fadeIn{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;animation-name:fadeIn}
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translateY(20px)}
100%{opacity:1;-moz-transform:translateY(0)}
}
@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translateY(20px)}
100%{opacity:1;-o-transform:translateY(0)}
}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}
100%{opacity:1;transform:translateY(0)}
}
.fadeInUp{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp}
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px)}
100%{opacity:1;-moz-transform:translateY(0)}
}
@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translateY(-20px)}
100%{opacity:1;-o-transform:translateY(0)}
}
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}
100%{opacity:1;transform:translateY(0)}
}
.fadeInDown{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown}
@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-20px)}
100%{opacity:1;-moz-transform:translateX(0)}
}
@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(-20px)}
100%{opacity:1;-o-transform:translateX(0)}
}
@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px)}
100%{opacity:1;transform:translateX(0)}
}
.fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(20px)}
100%{opacity:1;-moz-transform:translateX(0)}
}
@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(20px)}
100%{opacity:1;-o-transform:translateX(0)}
}
@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px)}
100%{opacity:1;transform:translateX(0)}
}
.fadeInRight{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight}
@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInUpBig{0%{opacity:0;-moz-transform:translateY(2000px)}
100%{opacity:1;-moz-transform:translateY(0)}
}
@-o-keyframes fadeInUpBig{0%{opacity:0;-o-transform:translateY(2000px)}
100%{opacity:1;-o-transform:translateY(0)}
}
@keyframes fadeInUpBig{0%{opacity:0;transform:translateY(2000px)}
100%{opacity:1;transform:translateY(0)}
}
.fadeInUpBig{-webkit-animation-name:fadeInUpBig;-moz-animation-name:fadeInUpBig;-o-animation-name:fadeInUpBig;animation-name:fadeInUpBig}
@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDownBig{0%{opacity:0;-moz-transform:translateY(-2000px)}
100%{opacity:1;-moz-transform:translateY(0)}
}
@-o-keyframes fadeInDownBig{0%{opacity:0;-o-transform:translateY(-2000px)}
100%{opacity:1;-o-transform:translateY(0)}
}
@keyframes fadeInDownBig{0%{opacity:0;transform:translateY(-2000px)}
100%{opacity:1;transform:translateY(0)}
}
.fadeInDownBig{-webkit-animation-name:fadeInDownBig;-moz-animation-name:fadeInDownBig;-o-animation-name:fadeInDownBig;animation-name:fadeInDownBig}
@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeftBig{0%{opacity:0;-moz-transform:translateX(-2000px)}
100%{opacity:1;-moz-transform:translateX(0)}
}
@-o-keyframes fadeInLeftBig{0%{opacity:0;-o-transform:translateX(-2000px)}
100%{opacity:1;-o-transform:translateX(0)}
}
@keyframes fadeInLeftBig{0%{opacity:0;transform:translateX(-2000px)}
100%{opacity:1;transform:translateX(0)}
}
.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;-moz-animation-name:fadeInLeftBig;-o-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}
@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px)}
100%{opacity:1;-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRightBig{0%{opacity:0;-moz-transform:translateX(2000px)}
100%{opacity:1;-moz-transform:translateX(0)}
}
@-o-keyframes fadeInRightBig{0%{opacity:0;-o-transform:translateX(2000px)}
100%{opacity:1;-o-transform:translateX(0)}
}
@keyframes fadeInRightBig{0%{opacity:0;transform:translateX(2000px)}
100%{opacity:1;transform:translateX(0)}
}
.fadeInRightBig{-webkit-animation-name:fadeInRightBig;-moz-animation-name:fadeInRightBig;-o-animation-name:fadeInRightBig;animation-name:fadeInRightBig}
@-webkit-keyframes bounceIn{0%{-webkit-transform:scale(.3)}
50%{-webkit-transform:scale(1.05)}
70%{-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1)}
}
@-moz-keyframes bounceIn{0%{-moz-transform:scale(.3)}
50%{-moz-transform:scale(1.05)}
70%{-moz-transform:scale(.9)}
100%{-moz-transform:scale(1)}
}
@-o-keyframes bounceIn{0%{-o-transform:scale(.3)}
50%{-o-transform:scale(1.05)}
70%{-o-transform:scale(.9)}
100%{-o-transform:scale(1)}
}
@keyframes bounceIn{0%{transform:scale(.3)}
50%{transform:scale(1.05)}
70%{transform:scale(.9)}
100%{transform:scale(1)}
}
.bounceIn{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn}
@-webkit-keyframes bounceInUp{0%{-webkit-transform:translateY(2000px)}
60%{-webkit-transform:translateY(-30px)}
80%{-webkit-transform:translateY(10px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceInUp{0%{-moz-transform:translateY(2000px)}
60%{-moz-transform:translateY(-30px)}
80%{-moz-transform:translateY(10px)}
100%{-moz-transform:translateY(0)}
}
@-o-keyframes bounceInUp{0%{-o-transform:translateY(2000px)}
60%{-o-transform:translateY(-30px)}
80%{-o-transform:translateY(10px)}
100%{-o-transform:translateY(0)}
}
@keyframes bounceInUp{0%{transform:translateY(2000px)}
60%{transform:translateY(-30px)}
80%{transform:translateY(10px)}
100%{transform:translateY(0)}
}
.bounceInUp{-webkit-animation-name:bounceInUp;-moz-animation-name:bounceInUp;-o-animation-name:bounceInUp;animation-name:bounceInUp}
@-webkit-keyframes bounceInDown{0%{-webkit-transform:translateY(-2000px)}
60%{-webkit-transform:translateY(30px)}
80%{-webkit-transform:translateY(-10px)}
100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceInDown{0%{-moz-transform:translateY(-2000px)}
60%{-moz-transform:translateY(30px)}
80%{-moz-transform:translateY(-10px)}
100%{-moz-transform:translateY(0)}
}
@-o-keyframes bounceInDown{0%{-o-transform:translateY(-2000px)}
60%{-o-transform:translateY(30px)}
80%{-o-transform:translateY(-10px)}
100%{-o-transform:translateY(0)}
}
@keyframes bounceInDown{0%{transform:translateY(-2000px)}
60%{transform:translateY(30px)}
80%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}
.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown}
@-webkit-keyframes bounceInLeft{0%{-webkit-transform:translateX(-2000px)}
60%{-webkit-transform:translateX(30px)}
80%{-webkit-transform:translateX(-10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceInLeft{0%{-moz-transform:translateX(-2000px)}
60%{-moz-transform:translateX(30px)}
80%{-moz-transform:translateX(-10px)}
100%{-moz-transform:translateX(0)}
}
@-o-keyframes bounceInLeft{0%{-o-transform:translateX(-2000px)}
60%{-o-transform:translateX(30px)}
80%{-o-transform:translateX(-10px)}
100%{-o-transform:translateX(0)}
}
@keyframes bounceInLeft{0%{transform:translateX(-2000px)}
60%{transform:translateX(30px)}
80%{transform:translateX(-10px)}
100%{transform:translateX(0)}
}
.bounceInLeft{-webkit-animation-name:bounceInLeft;-moz-animation-name:bounceInLeft;-o-animation-name:bounceInLeft;animation-name:bounceInLeft}
@-webkit-keyframes bounceInRight{0%{-webkit-transform:translateX(2000px)}
60%{-webkit-transform:translateX(-30px)}
80%{-webkit-transform:translateX(10px)}
100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes bounceInRight{0%{-moz-transform:translateX(2000px)}
60%{-moz-transform:translateX(-30px)}
80%{-moz-transform:translateX(10px)}
100%{-moz-transform:translateX(0)}
}
@-o-keyframes bounceInRight{0%{-o-transform:translateX(2000px)}
60%{-o-transform:translateX(-30px)}
80%{-o-transform:translateX(10px)}
100%{-o-transform:translateX(0)}
}
@keyframes bounceInRight{0%{transform:translateX(2000px)}
60%{transform:translateX(-30px)}
80%{transform:translateX(10px)}
100%{transform:translateX(0)}
}
.bounceInRight{-webkit-animation-name:bounceInRight;-moz-animation-name:bounceInRight;-o-animation-name:bounceInRight;animation-name:bounceInRight}
@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg)}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0)}
}
@-moz-keyframes rotateInUpLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg)}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0)}
}
@-o-keyframes rotateInUpLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(90deg)}
100%{-o-transform-origin:left bottom;-o-transform:rotate(0)}
}
@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(90deg)}
100%{transform-origin:left bottom;transform:rotate(0)}
}
.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;-moz-animation-name:rotateInUpLeft;-o-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}
@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg)}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0)}
}
@-moz-keyframes rotateInDownLeft{0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg)}
100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0)}
}
@-o-keyframes rotateInDownLeft{0%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg)}
100%{-o-transform-origin:left bottom;-o-transform:rotate(0)}
}
@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-90deg)}
100%{transform-origin:left bottom;transform:rotate(0)}
}
.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;-moz-animation-name:rotateInDownLeft;-o-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}
@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg)}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0)}
}
@-moz-keyframes rotateInUpRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg)}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0)}
}
@-o-keyframes rotateInUpRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg)}
100%{-o-transform-origin:right bottom;-o-transform:rotate(0)}
}
@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg)}
100%{transform-origin:right bottom;transform:rotate(0)}
}
.rotateInUpRight{-webkit-animation-name:rotateInUpRight;-moz-animation-name:rotateInUpRight;-o-animation-name:rotateInUpRight;animation-name:rotateInUpRight}
@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg)}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0)}
}
@-moz-keyframes rotateInDownRight{0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg)}
100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0)}
}
@-o-keyframes rotateInDownRight{0%{-o-transform-origin:right bottom;-o-transform:rotate(90deg)}
100%{-o-transform-origin:right bottom;-o-transform:rotate(0)}
}
@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(90deg)}
100%{transform-origin:right bottom;transform:rotate(0)}
}
.rotateInDownRight{-webkit-animation-name:rotateInDownRight;-moz-animation-name:rotateInDownRight;-o-animation-name:rotateInDownRight;animation-name:rotateInDownRight}

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