经验分享程序开发文档资料数据资源其它资源

jQuery+CSS3多功能下拉菜单特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3多功能下拉菜单特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery+CSS3多功能下拉菜单特效代码

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width">
<title>jQuery+CSS3多功能下拉菜单</title>
<link rel="stylesheet" type="text/css" href="font/titillium/stylesheet.css">
<link rel="stylesheet" type="text/css" href="font/exo-demibold/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/animation.css">
<link rel="stylesheet" type="text/css" href="css/blue/responsive.css">
<link rel="stylesheet" type="text/css" href="css/blue/color.css">

<link rel="stylesheet" type="text/css" href="css/live-preview.css">
<link rel="stylesheet" type="text/css" href="live-font/stylesheet.css">

<script type="text/javascript" src="js/modernizr.custom.29473.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/dropdown.js"></script>

<!--[if IE 7]>
	<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->

<!--[if lte IE 9]>
	<link href="css/blue/desktop-ie.css" rel="stylesheet" type="text/css">
<![endif]-->

</head>
<body>
<!-- Live Preview -->
<div class="live">
  <h3>His - Animated Mega Menu</h3>
  <h4>07 Color Scheme</h4>
  <h4>65 Animation Effects</h4>
  <h5>Free Update</h5>
</div>

<ul class="nav">
  
  <!-- Start Home -->
  <li id="first">
    <div id="cover1"><a href="#">Home<i class="icon-chevron-down"></i></a></div>
    <div id="icon"><i class="icon-home" ></i></div>
     <ul class="one" id="home">
     	<li>
        	<h3><i class="icon-user"></i>Welcome</h3>
            <p id="p-first">In the past, HTML alone provided basic formatting options for text, images, tables, and other web page elements. But today, professional web designers use CSS to style their pages. In fact, the older HTML tags used to format text and other page elements have been phased out by the World Wide Web Consortium (W3C), the organization that defines Web standards, in favor of CSS.</p>
            <img src="img/thumb2.png">
            <p>In the past, HTML alone provided basic formatting options for text, images, tables, and other web page elements.</p>
        </li>
     </ul>
  </li>
  
  <!-- Start Portfolio -->
  <li>
    <div id="cover1"><a href="#">Portfolio<i class="icon-chevron-down"></i></a></div>
    <div id="icon"><i class="icon-briefcase" ></i></div>
    <ul class="one" id="menu">
      <li><a href="#">sample 1</a></li>
      
      <!-- Start sample 2 -->
      <li> <a href="#">sample 2<i class="icon-chevron-right"></i><i class="icon-chevron-down"></i></a>
        <ul class="one" id="sub-menu">
          <li><a href="#">Page 1</a></li>
          
          <!-- Start page 2 -->
          <li> <a href="#">Page 2<i class="icon-chevron-right"></i></a>
            <ul class="one test" id="sub-menu">
              <li><a href="#">Page 1</a></li>
              <li><a href="#">Page 2</a></li>
              <li><a href="#">Page 3</a></li>
              <li><a href="#">Page 4</a></li>
            </ul>
          </li>
          <!-- End page 2 -->
          
          <li><a href="#">Page 3</a></li>
        </ul>
      </li>
      <!-- End sample 2 -->
      
      <li ><a href="#">sample 3</a></li>
    </ul>
  </li>
  
  <!-- Start Services -->
  <li>
    <div id="cover1"><a href="#">Service<i class="icon-chevron-down"></i></a></div>
    <div id="icon"><i class="icon-truck" ></i></div>
    <ul class="one" id="menu">
      <li><a href="#">Sample 1</a></li>
      <li><a href="#">Sample 2</a></li>
      
      <!-- Start Sample 3 -->
      <li> <a href="#" class="sub-menu">Sample 3<i class="icon-chevron-right"></i><i class="icon-chevron-down"></i></a>
        <ul class="one" id="sub-menu">
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </li>
      <!-- End Sample 3 -->
      
      <li ><a href="#">Sample 4</a></li>
    </ul>
  </li>
  
  <!-- Start Links -->
  <li>
    <div id="cover1"><a href="#">Links<i class="icon-chevron-down"></i></a></div>
    <div id="icon"><i class="icon-list" ></i></div>
    <ul class="one" id="links">
      <li>
        <div id="link-1" class="link-block light-color">
          <h4><i class="icon-laptop"></i>Links 1</h4>
          <ul>
            <li><a href="#"><i class="icon-ok"></i> Css</a></li>
            <li><a href="#"><i class="icon-ok"></i> Html5</a></li>
            <li><a href="#"><i class="icon-ok"></i> java Script</a></li>
            <li><a href="#"><i class="icon-ok"></i> Php</a></li>
            <li><a href="#"><i class="icon-ok"></i> JQuery</a></li>
            <li><a href="#"><i class="icon-ok"></i> Css 3</a></li>
            <li><a href="#"><i class="icon-ok"></i> Asp.Net</a></li>
          </ul>
        </div>
        <div id="link-2" class="link-block light-color">
          <h4><i class="icon-camera-retro"></i>Links 2</h4>
          <ul>
            <li><a href="#"><i class="icon-ok"></i> Photoshop</a></li>
            <li><a href="#"><i class="icon-ok"></i> Dreamweaver</a></li>
            <li><a href="#"><i class="icon-ok"></i> Fireworks</a></li>
            <li><a href="#"><i class="icon-ok"></i> Expression Web</a></li>
            <li><a href="#"><i class="icon-ok"></i> Corel</a></li>
            <li><a href="#"><i class="icon-ok"></i> Visual Studio</a></li>
            <li><a href="#"><i class="icon-ok"></i> Adobe</a></li>
          </ul>
        </div>
        <div id="link-3" class="link-block light-color">
          <h4><i class="icon-desktop"></i>Links 3</h4>
          <ul>
            <li><a href="#"><i class="icon-ok"></i> Forms</a></li>
            <li><a href="#"><i class="icon-ok"></i> Sliders</a></li>
            <li><a href="#"><i class="icon-ok"></i> Navigation</a></li>
            <li><a href="#"><i class="icon-ok"></i> Layouts</a></li>
            <li><a href="#"><i class="icon-ok"></i> Buttons</a></li>
            <li><a href="#"><i class="icon-ok"></i> tabs</a></li>
            <li><a href="#"><i class="icon-ok"></i> Menu</a></li>
          </ul>
        </div>
        
      </li>
    </ul>
  </li>
  
  <!-- Start About -->
  <li>
    <div id="cover1"><a href="#">About<i class="icon-chevron-down"></i></a></div>
    <div id="icon"><i class="icon-book" ></i></div>
    <ul class="one" id="about">
      <li><img src="img/thumb1.png" alt="image">
        <h3><i class="icon-user"></i>About Us</h3>
        <p>In the past, HTML alone provided basic formatting options for text, images, tables, and other web page elements. But today, professional web designers use CSS to style their pages. In fact, the older HTML tags used to format text and other page elements have been phased out by the World Wide Web Consortium (W3C), the organization that defines Web standards, in favor of CSS.</p>
        <h6><i class="icon-quote-left"></i>Is there a way to apply styles to an element only if it’s embedded within a
          particular element, rather than universally? In other words, can you ask for
          example that italics within headlines be boldface<i class="icon-quote-right"></i></h6>
      </li>
    </ul>
  </li>
  
  <!-- Start Contact -->
  <li>
    <div id="cover1"><a href="#">Contact<i class="icon-chevron-down"></i></a></div>
    <div id="icon"><i class="icon-envelope" ></i></div>
    <ul class="one" id="contact">
      <li id="part-right">
        <p>Name<em>*</em></p>
        <input name="name" type="text" id="name">
        <p>E-mail<em>*</em></p>
        <input name="email" type="text" id="email">
        <p>Message<em>*</em></p>
        <textarea name="comment" cols="" rows="" id="comment"></textarea>
        <input name="send" type="button" id="send" value="Send">
      </li>
    </ul>
  </li>
  
  <!-- Start Search -->
  <li id="search">
    <input name="search" type="text" placeholder="Search" id="txt_search2">
    <a href="#"><i class="icon-search"></i></a> 
  </li>
  
  <!-- Start Social -->
  <li id="social">
    <div><a href="#"><i class="icon-facebook-sign" ></i></a>
    	 <a href="#"><i class="icon-twitter-sign" ></i></a>
         <a href="#"><i class="icon-linkedin-sign" ></i></a>
         <a href="#"><i class="icon-google-plus-sign" ></i></a>
    </div>
  </li>
</ul>
</body>
</html>

JS代码(modernizr.custom.29473.js):

/* Modernizr 2.0.6 (Custom Build) | MIT & BSD * Build:http://www.modernizr.com/download/#-cssanimations-iepp-cssclasses-testprop-testallprops-domprefixes-load */
;
	window.Modernizr=function(a,b,c){
	function A(a,b){
	var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+n.join(c+" ")+c).split(" ");
	return z(d,b)}
function z(a,b){
	for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;
	return!1}
function y(a,b){
	return!!~(""+a).indexOf(b)}
function x(a,b){
	return typeof a===b}
function w(a,b){
	return v(prefixes.join(a+";
	")+(b||""))}
function v(a){
	k.cssText=a}
var d="2.0.6",e={
}
,f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n="Webkit Moz O ms Khtml".split(" "),o={
}
,p={
}
,q={
}
,r=[],s,t={
}
.hasOwnProperty,u;
	!x(t,c)&&!x(t.call,c)?u=function(a,b){
	return t.call(a,b)}
:u=function(a,b){
	return b in a&&x(a.constructor.prototype[b],c)}
,o.cssanimations=function(){
	return A("animationName")}
;
	for(var B in o)u(o,B)&&(s=B.toLowerCase(),e[s]=o[B](),r.push((e[s]?"":"no-")+s));
	v(""),j=l=null,a.attachEvent&&function(){
	var a=b.createElement("div");
	a.innerHTML="<elem></elem>";
	return a.childNodes.length!==1}
()&&function(a,b){
	function s(a){
	var b=-1;
	while(++b<g)a.createElement(f[b])}
a.iepp=a.iepp||{
}
;
	var d=a.iepp,e=d.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",f=e.split("|"),g=f.length,h=new RegExp("(^|\\s)("+e+")","gi"),i=new RegExp("<(/*)("+e+")","gi"),j=/^\s*[\{
	\}
]\s*$/,k=new RegExp("(^|[^\\n]*?\\s)("+e+")([^\\n]*)({
	[\\n\\w\\W]*?}
)","gi"),l=b.createDocumentFragment(),m=b.documentElement,n=m.firstChild,o=b.createElement("body"),p=b.createElement("style"),q=/print|all/,r;
	d.getCSS=function(a,b){
	if(a+""===c)return"";
	var e=-1,f=a.length,g,h=[];
	while(++e<f){
	g=a[e];
	if(g.disabled)continue;
	b=g.media||b,q.test(b)&&h.push(d.getCSS(g.imports,b),g.cssText),b="all"}
return h.join("")}
,d.parseCSS=function(a){
	var b=[],c;
	while((c=k.exec(a))!=null)b.push(((j.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(h,"$1.iepp_$2")+c[4]);
	return b.join("\n")}
,d.writeHTML=function(){
	var a=-1;
	r=r||b.body;
	while(++a<g){
	var c=b.getElementsByTagName(f[a]),d=c.length,e=-1;
	while(++e<d)c[e].className.indexOf("iepp_")<0&&(c[e].className+=" iepp_"+f[a])}
l.appendChild(r),m.appendChild(o),o.className=r.className,o.id=r.id,o.innerHTML=r.innerHTML.replace(i,"<$1font")}
,d._beforePrint=function(){
	p.styleSheet.cssText=d.parseCSS(d.getCSS(b.styleSheets,"all")),d.writeHTML()}
,d.restoreHTML=function(){
	o.innerHTML="",m.removeChild(o),m.appendChild(r)}
,d._afterPrint=function(){
	d.restoreHTML(),p.styleSheet.cssText=""}
,s(b),s(l);
	d.disablePP||(n.insertBefore(p,n.firstChild),p.media="print",p.className="iepp-printshim",a.attachEvent("onbeforeprint",d._beforePrint),a.attachEvent("onafterprint",d._afterPrint))}
(a,b),e._version=d,e._domPrefixes=n,e.testProp=function(a){
	return z([a])}
,e.testAllProps=A,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+r.join(" "):"");
	return e}
(this,this.document),function(a,b,c){
	function k(a){
	return!a||a=="loaded"||a=="complete"}
function j(){
	var a=1,b=-1;
	while(p.length- ++b)if(p[b].s&&!(a=p[b].r))break;
	a&&g()}
function i(a){
	var c=b.createElement("script"),d;
	c.src=a.s,c.onreadystatechange=c.onload=function(){
	!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)}
,m(function(){
	d||(d=1,j())}
,H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}
function h(a){
	var c=b.createElement("link"),d;
	c.href=a.s,c.rel="stylesheet",c.type="text/css";
	if(!a.e&&(w||r)){
	var e=function(a){
	m(function(){
	if(!d)try{
	a.sheet.cssRules.length?(d=1,j()):e(a)}
catch(b){
	b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,m(function(){
	j()}
,0)):e(a)}
}
,0)}
;
	e(c)}
else c.onload=function(){
	d||(d=1,m(function(){
	j()}
,0))}
,a.e&&c.onload();
	m(function(){
	d||(d=1,j())}
,H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}
function g(){
	var a=p.shift();
	q=1,a?a.t?m(function(){
	a.t=="c"?h(a):i(a)}
,0):(a(),j()):q=0}
function f(a,c,d,e,f,h){
	function i(){
	!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){
	u.removeChild(l)}
,0))}
var l=b.createElement(a),o=0,r={
	t:d,s:c,e:h}
;
	l.src=l.data=c,!s&&(l.style.display="none"),l.width=l.height="0",a!="object"&&(l.type=d),l.onload=l.onreadystatechange=i,a=="img"?l.onerror=i:a=="script"&&(l.onerror=function(){
	r.e=r.r=1,g()}
),p.splice(e,0,r),u.insertBefore(l,s?null:n),m(function(){
	o||(u.removeChild(l),r.r=r.e=o=1,j())}
,H.errorTimeout)}
function e(a,b,c){
	var d=b=="c"?z:y;
	q=0,b=b||"j",C(a)?f(d,a,b,this.i++,l,c):(p.splice(this.i++,0,a),p.length==1&&g());
	return this}
function d(){
	var a=H;
	a.loader={
	load:e,i:0}
;
	return a}
var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={
}
.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=r&&!s,u=s?l:n.parentNode,v=a.opera&&o.call(a.opera)=="[object Opera]",w="webkitAppearance"in l.style,x=w&&"async"in b.createElement("script"),y=r?"object":v||x?"img":"script",z=w?"img":y,A=Array.isArray||function(a){
	return o.call(a)=="[object Array]"}
,B=function(a){
	return Object(a)===a}
,C=function(a){
	return typeof a=="string"}
,D=function(a){
	return o.call(a)=="[object Function]"}
,E=[],F={
}
,G,H;
	H=function(a){
	function f(a){
	var b=a.split("!"),c=E.length,d=b.pop(),e=b.length,f={
	url:d,origUrl:d,prefixes:b}
,g,h;
	for(h=0;
	h<e;
	h++)g=F[b[h]],g&&(f=g(f));
	for(h=0;
	h<c;
	h++)f=E[h](f);
	return f}
function e(a,b,e,g,h){
	var i=f(a),j=i.autoCallback;
	if(!i.bypass){
	b&&(b=D(b)?b:b[a]||b[g]||b[a.split("/").pop().split("?")[0]]);
	if(i.instead)return i.instead(a,b,e,g,h);
	e.load(i.url,i.forceCSS||!i.forceJS&&/css$/.test(i.url)?"c":c,i.noexec),(D(b)||D(j))&&e.load(function(){
	d(),b&&b(i.origUrl,h,g),j&&j(i.origUrl,h,g)}
)}
}
function b(a,b){
	function c(a){
	if(C(a))e(a,h,b,0,d);
	else if(B(a))for(i in a)a.hasOwnProperty(i)&&e(a[i],h,b,i,d)}
var d=!!a.test,f=d?a.yep:a.nope,g=a.load||a.both,h=a.callback,i;
	c(f),c(g),a.complete&&b.load(a.complete)}
var g,h,i=this.yepnope.loader;
	if(C(a))e(a,0,i,0);
	else if(A(a))for(g=0;
	g<a.length;
	g++)h=a[g],C(h)?e(h,0,i,0):A(h)?H(h):B(h)&&b(h,i);
	else B(a)&&b(a,i)}
,H.addPrefix=function(a,b){
	F[a]=b}
,H.addFilter=function(a){
	E.push(a)}
,H.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",G=function(){
	b.removeEventListener("DOMContentLoaded",G,0),b.readyState="complete"}
,0)),a.yepnope=d()}
(this,this.document),Modernizr.load=function(){
	yepnope.apply(window,[].slice.call(arguments,0))}
;

CSS代码(animation.css):

@charset "UTF-8";/*** 01 flash *************************/
@-webkit-keyframes flash{0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
@keyframes flash{0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
.flash{-webkit-animation-name:flash;-moz-animation-name:flash;-o-animation-name:flash;animation-name:flash;}
/*** 02 shake *************************/
@-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);}
}
@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;}
/*** 03 bounce *************************/
@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
40%{-webkit-transform:translateY(-30px);}
60%{-webkit-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;}
/*** 04 tada *************************/
@-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);}
}
@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;}
/*** 05 swing *************************/
@-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);}
}
@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;}
/*** 06 wobble *************************/
@-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%);}
}
@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;}
/*** 07 pulse *************************/
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);}
50%{-webkit-transform:scale(1.1);}
100%{-webkit-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;}
/*** 08 flip *************************/
@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;}
40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;}
50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}
80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;}
100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}
}
@keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;}
40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}
50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}
80%{transform:perspective(400px) rotateY(360deg) scale(.95);animation-timing-function:ease-in;}
100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}
}
.flip{-webkit-backface-visibility:visible !important;-webkit-animation-name:flip;-moz-backface-visibility:visible !important;-moz-animation-name:flip;-o-backface-visibility:visible !important;-o-animation-name:flip;backface-visibility:visible !important;animation-name:flip;}
/*** 09 flipInX *************************/
@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px) rotateX(-10deg);}
70%{-webkit-transform:perspective(400px) rotateX(10deg);}
100%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}
}
@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0;}
40%{transform:perspective(400px) rotateX(-10deg);}
70%{transform:perspective(400px) rotateX(10deg);}
100%{transform:perspective(400px) rotateX(0deg);opacity:1;}
}
.flipInX{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInX;-moz-backface-visibility:visible !important;-moz-animation-name:flipInX;-o-backface-visibility:visible !important;-o-animation-name:flipInX;backface-visibility:visible !important;animation-name:flipInX;}
/*** 10 flipOutX *************************/
@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);opacity:1;}
100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;}
}
@keyframes flipOutX{0%{transform:perspective(400px) rotateX(0deg);opacity:1;}
100%{transform:perspective(400px) rotateX(90deg);opacity:0;}
}
.flipOutX{-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible !important;-moz-animation-name:flipOutX;-moz-backface-visibility:visible !important;-o-animation-name:flipOutX;-o-backface-visibility:visible !important;animation-name:flipOutX;backface-visibility:visible !important;}
/*** 11 flipInY *************************/
@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
70%{-webkit-transform:perspective(400px) rotateY(10deg);}
100%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;}
}
@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0;}
40%{transform:perspective(400px) rotateY(-10deg);}
70%{transform:perspective(400px) rotateY(10deg);}
100%{transform:perspective(400px) rotateY(0deg);opacity:1;}
}
.flipInY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInY;-moz-backface-visibility:visible !important;-moz-animation-name:flipInY;-o-backface-visibility:visible !important;-o-animation-name:flipInY;backface-visibility:visible !important;animation-name:flipInY;}
/*** 12 flipOutY *************************/
@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1;}
100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;}
}
@keyframes flipOutY{0%{transform:perspective(400px) rotateY(0deg);opacity:1;}
100%{transform:perspective(400px) rotateY(90deg);opacity:0;}
}
.flipOutY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipOutY;-moz-backface-visibility:visible !important;-moz-animation-name:flipOutY;-o-backface-visibility:visible !important;-o-animation-name:flipOutY;backface-visibility:visible !important;animation-name:flipOutY;}
/*** 13 fadeIn *************************/
@-webkit-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;}
/*** 14 fadeInUp *************************/
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);}
100%{opacity:1;-webkit-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;}
/*** 15 fadeInDown *************************/
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);}
100%{opacity:1;-webkit-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;}
/*** 16 fadeInLeft *************************/
@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);}
100%{opacity:1;-webkit-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;}
/*** 17 fadeInRight *************************/
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);}
100%{opacity:1;-webkit-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;}
/*** 18 fadeInUpBig *************************/
@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);}
100%{opacity:1;-webkit-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;}
/*** 19 fadeInDownBig *************************/
@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);}
100%{opacity:1;-webkit-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;}
/*** 20 fadeInLeftBig *************************/
@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);}
100%{opacity:1;-webkit-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;}
/*** 21 fadeInRightBig *************************/
@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);}
100%{opacity:1;-webkit-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;}
/*** 22 fadeOut *************************/
@-webkit-keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
@keyframes fadeOut{0%{opacity:1;}
100%{opacity:0;}
}
.fadeOut{-webkit-animation-name:fadeOut;-moz-animation-name:fadeOut;-o-animation-name:fadeOut;animation-name:fadeOut;}
/*** 23 fadeOutUp *************************/
@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(-20px);}
}
@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(-20px);}
}
.fadeOutUp{-webkit-animation-name:fadeOutUp;-moz-animation-name:fadeOutUp;-o-animation-name:fadeOutUp;animation-name:fadeOutUp;}
/*** 24 fadeOutDown *************************/
@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(20px);}
}
@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(20px);}
}
.fadeOutDown{-webkit-animation-name:fadeOutDown;-moz-animation-name:fadeOutDown;-o-animation-name:fadeOutDown;animation-name:fadeOutDown;}
/*** 25 fadeOutLeft *************************/
@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(-20px);}
}
@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(-20px);}
}
.fadeOutLeft{-webkit-animation-name:fadeOutLeft;-moz-animation-name:fadeOutLeft;-o-animation-name:fadeOutLeft;animation-name:fadeOutLeft;}
/*** 26 fadeOutRight *************************/
@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(20px);}
}
@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(20px);}
}
.fadeOutRight{-webkit-animation-name:fadeOutRight;-moz-animation-name:fadeOutRight;-o-animation-name:fadeOutRight;animation-name:fadeOutRight;}
/*** 27 fadeOutUpBig *************************/
@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(-2000px);}
}
@keyframes fadeOutUpBig{0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(-2000px);}
}
.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;-moz-animation-name:fadeOutUpBig;-o-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig;}
/*** 28 fadeOutDownBig *************************/
@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);}
100%{opacity:0;-webkit-transform:translateY(2000px);}
}
@keyframes fadeOutDownBig{0%{opacity:1;transform:translateY(0);}
100%{opacity:0;transform:translateY(2000px);}
}
.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;-moz-animation-name:fadeOutDownBig;-o-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig;}
/*** 29 fadeOutLeftBig *************************/
@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(-2000px);}
}
@keyframes fadeOutLeftBig{0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(-2000px);}
}
.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;-moz-animation-name:fadeOutLeftBig;-o-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig;}
/*** 30 fadeOutRightBig *************************/
@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);}
100%{opacity:0;-webkit-transform:translateX(2000px);}
}
@keyframes fadeOutRightBig{0%{opacity:1;transform:translateX(0);}
100%{opacity:0;transform:translateX(2000px);}
}
.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;-moz-animation-name:fadeOutRightBig;-o-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig;}
/*** 31 bounceIn *************************/
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);}
50%{opacity:1;-webkit-transform:scale(1.05);}
70%{-webkit-transform:scale(.9);}
100%{-webkit-transform:scale(1);}
}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3);}
50%{opacity:1;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;}
/*** 32 bounceInUp *************************/
@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);}
60%{opacity:1;-webkit-transform:translateY(-30px);}
80%{-webkit-transform:translateY(10px);}
100%{-webkit-transform:translateY(0);}
}
@keyframes bounceInUp{0%{opacity:0;transform:translateY(2000px);}
60%{opacity:1;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;}
/*** 33 bounceInDown *************************/
@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);}
60%{opacity:1;-webkit-transform:translateY(30px);}
80%{-webkit-transform:translateY(-10px);}
100%{-webkit-transform:translateY(0);}
}
@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px);}
60%{opacity:1;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;}
/*** 34 bounceInLeft *************************/
@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);}
60%{opacity:1;-webkit-transform:translateX(30px);}
80%{-webkit-transform:translateX(-10px);}
100%{-webkit-transform:translateX(0);}
}
@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px);}
60%{opacity:1;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;}
/*** 35 bounceInRight *************************/
@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);}
60%{opacity:1;-webkit-transform:translateX(-30px);}
80%{-webkit-transform:translateX(10px);}
100%{-webkit-transform:translateX(0);}
}
@keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px);}
60%{opacity:1;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;}
/*** 36 bounceOut *************************/
@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);}
25%{-webkit-transform:scale(.95);}
50%{opacity:1;-webkit-transform:scale(1.1);}
100%{opacity:0;-webkit-transform:scale(.3);}
}
@keyframes bounceOut{0%{transform:scale(1);}
25%{transform:scale(.95);}
50%{opacity:1;transform:scale(1.1);}
100%{opacity:0;transform:scale(.3);}
}
.bounceOut{-webkit-animation-name:bounceOut;-moz-animation-name:bounceOut;-o-animation-name:bounceOut;animation-name:bounceOut;}
/*** 37 bounceOutUp *************************/
@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);}
20%{opacity:1;-webkit-transform:translateY(20px);}
100%{opacity:0;-webkit-transform:translateY(-2000px);}
}
@keyframes bounceOutUp{0%{transform:translateY(0);}
20%{opacity:1;transform:translateY(20px);}
100%{opacity:0;transform:translateY(-2000px);}
}
.bounceOutUp{-webkit-animation-name:bounceOutUp;-moz-animation-name:bounceOutUp;-o-animation-name:bounceOutUp;animation-name:bounceOutUp;}
/*** 38 bounceOutDown *************************/
@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);}
20%{opacity:1;-webkit-transform:translateY(-20px);}
100%{opacity:0;-webkit-transform:translateY(2000px);}
}
@keyframes bounceOutDown{0%{transform:translateY(0);}
20%{opacity:1;transform:translateY(-20px);}
100%{opacity:0;transform:translateY(2000px);}
}
.bounceOutDown{-webkit-animation-name:bounceOutDown;-moz-animation-name:bounceOutDown;-o-animation-name:bounceOutDown;animation-name:bounceOutDown;}
/*** 39 bounceOutLeft *************************/
@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);}
20%{opacity:1;-webkit-transform:translateX(20px);}
100%{opacity:0;-webkit-transform:translateX(-2000px);}
}
@keyframes bounceOutLeft{0%{transform:translateX(0);}
20%{opacity:1;transform:translateX(20px);}
100%{opacity:0;transform:translateX(-2000px);}
}
.bounceOutLeft{-webkit-animation-name:bounceOutLeft;-moz-animation-name:bounceOutLeft;-o-animation-name:bounceOutLeft;animation-name:bounceOutLeft;}
/*** 40 bounceOutRight *************************/
@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);}
20%{opacity:1;-webkit-transform:translateX(-20px);}
100%{opacity:0;-webkit-transform:translateX(2000px);}
}
@keyframes bounceOutRight{0%{transform:translateX(0);}
20%{opacity:1;transform:translateX(-20px);}
100%{opacity:0;transform:translateX(2000px);}
}
.bounceOutRight{-webkit-animation-name:bounceOutRight;-moz-animation-name:bounceOutRight;-o-animation-name:bounceOutRight;animation-name:bounceOutRight;}
/*** 41 rotateIn *************************/
@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(-200deg);opacity:0;}
100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}
}
@keyframes rotateIn{0%{transform-origin:center center;transform:rotate(-200deg);opacity:0;}
100%{transform-origin:center center;transform:rotate(0);opacity:1;}
}
.rotateIn{-webkit-animation-name:rotateIn;-moz-animation-name:rotateIn;-o-animation-name:rotateIn;animation-name:rotateIn;}
/*** 42 rotateInUpLeft *************************/
@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
}
@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;-moz-animation-name:rotateInUpLeft;-o-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;}
/*** 43 rotateInDownLeft *************************/
@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
}
@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;-moz-animation-name:rotateInDownLeft;-o-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;}
/*** 44 rotateInUpRight *************************/
@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
}
@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.rotateInUpRight{-webkit-animation-name:rotateInUpRight;-moz-animation-name:rotateInUpRight;-o-animation-name:rotateInUpRight;animation-name:rotateInUpRight;}
/*** 45 rotateInDownRight *************************/
@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
}
@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.rotateInDownRight{-webkit-animation-name:rotateInDownRight;-moz-animation-name:rotateInDownRight;-o-animation-name:rotateInDownRight;animation-name:rotateInDownRight;}
/*** 46 rotateOut *************************/
@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;}
}
@keyframes rotateOut{0%{transform-origin:center center;transform:rotate(0);opacity:1;}
100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}
.rotateOut{-webkit-animation-name:rotateOut;-moz-animation-name:rotateOut;-o-animation-name:rotateOut;animation-name:rotateOut;}
/*** 47 rotateOutUpLeft *************************/
@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;}
}
@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}
.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;-moz-animation-name:rotateOutUpLeft;-o-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft;}
/*** 48 rotateOutDownLeft *************************/
@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;}
}
@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}
.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;-moz-animation-name:rotateOutDownLeft;-o-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;}
/*** 49 rotateOutUpRight *************************/
@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;}
}
@keyframes rotateOutUpRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}
.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;-moz-animation-name:rotateOutUpRight;-o-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;}
/*** 50 rotateOutDownRight *************************/
@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;}
100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;}
}
@keyframes rotateOutDownRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}
.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;-moz-animation-name:rotateOutDownRight;-o-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;}
/*** 51 hinge *************************/
@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}
20%,60%{-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}
40%{-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}
80%{-webkit-transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out;}
100%{-webkit-transform:translateY(700px);opacity:0;}
}
@keyframes hinge{0%{transform:rotate(0);transform-origin:top left;animation-timing-function:ease-in-out;}
20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out;}
40%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;}
80%{transform:rotate(60deg) translateY(0);opacity:1;transform-origin:top left;animation-timing-function:ease-in-out;}
100%{transform:translateY(700px);opacity:0;}
}
.hinge{-webkit-animation-name:hinge;-moz-animation-name:hinge;-o-animation-name:hinge;animation-name:hinge;}
/*** 52 rollIn *************************/
@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);}
100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);}
}
@keyframes rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg);}
100%{opacity:1;transform:translateX(0px) rotate(0deg);}
}
.rollIn{-webkit-animation-name:rollIn;-moz-animation-name:rollIn;-o-animation-name:rollIn;animation-name:rollIn;}
/*** 53 rollOut *************************/
@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);}
100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);}
}
@keyframes rollOut{0%{opacity:1;transform:translateX(0px) rotate(0deg);}
100%{opacity:0;transform:translateX(100%) rotate(120deg);}
}
.rollOut{-webkit-animation-name:rollOut;-moz-animation-name:rollOut;-o-animation-name:rollOut;animation-name:rollOut;}
/*** 54 lightSpeedIn *************************/
@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{-webkit-transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{-webkit-transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1;}
}
@keyframes lightSpeedIn{0%{transform:translateX(100%) skewX(-30deg);opacity:0;}
60%{transform:translateX(-20%) skewX(30deg);opacity:1;}
80%{transform:translateX(0%) skewX(-15deg);opacity:1;}
100%{transform:translateX(0%) skewX(0deg);opacity:1;}
}
.lightSpeedIn{-webkit-animation-name:lightSpeedIn;-moz-animation-name:lightSpeedIn;-o-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;-moz-animation-timing-function:ease-out;-o-animation-timing-function:ease-out;animation-timing-function:ease-out;}
.animated.lightSpeedIn{-webkit-animation-duration:0.5s;-moz-animation-duration:0.5s;-o-animation-duration:0.5s;animation-duration:0.5s;}
/*** 55 lightSpeedOut *************************/
@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);opacity:1;}
100%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0;}
}
@keyframes lightSpeedOut{0%{transform:translateX(0%) skewX(0deg);opacity:1;}
100%{transform:translateX(100%) skewX(-30deg);opacity:0;}
}
.lightSpeedOut{-webkit-animation-name:lightSpeedOut;-moz-animation-name:lightSpeedOut;-o-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in;}
.animated.lightSpeedOut{-webkit-animation-duration:0.25s;-moz-animation-duration:0.25s;-o-animation-duration:0.25s;animation-duration:0.25s;}
/*** 56 wiggle *************************/
@-webkit-keyframes wiggle{0%{-webkit-transform:skewX(9deg);}
10%{-webkit-transform:skewX(-8deg);}
20%{-webkit-transform:skewX(7deg);}
30%{-webkit-transform:skewX(-6deg);}
40%{-webkit-transform:skewX(5deg);}
50%{-webkit-transform:skewX(-4deg);}
60%{-webkit-transform:skewX(3deg);}
70%{-webkit-transform:skewX(-2deg);}
80%{-webkit-transform:skewX(1deg);}
90%{-webkit-transform:skewX(0deg);}
100%{-webkit-transform:skewX(0deg);}
}
@keyframes wiggle{0%{transform:skewX(9deg);}
10%{transform:skewX(-8deg);}
20%{transform:skewX(7deg);}
30%{transform:skewX(-6deg);}
40%{transform:skewX(5deg);}
50%{transform:skewX(-4deg);}
60%{transform:skewX(3deg);}
70%{transform:skewX(-2deg);}
80%{transform:skewX(1deg);}
90%{transform:skewX(0deg);}
100%{transform:skewX(0deg);}
}
.wiggle{-webkit-animation-name:wiggle;-moz-animation-name:wiggle;-o-animation-name:wiggle;animation-name:wiggle;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in;}
.animated.wiggle{-webkit-animation-duration:0.75s;-moz-animation-duration:0.75s;-o-animation-duration:0.75s;animation-duration:0.75s;}
/*** 57 left *************************/
@-webkit-keyframes left{0%{left:-100px;}
90%{left:50px;}
100%{left:0;}
}
@keyframes left{0%{left:-100px;}
90%{left:50px;}
100%{left:0;}
}
.left{-webkit-animation-name:left;-moz-animation-name:left;-o-animation-name:left;animation-name:left;}
/*** 58 right *************************/
@-webkit-keyframes right{0%{left:100px;}
90%{left:-50px;}
100%{left:0;}
}
@keyframes right{0%{left:100px;}
90%{left:-50px;}
100%{left:0;}
}
.right{-webkit-animation-name:right;-moz-animation-name:right;-o-animation-name:right;animation-name:right;}
/*** 59 top *************************/
@-webkit-keyframes top{0%{top:-200px;}
80%{top:50px;}
100%{top:0;}
}
@keyframes top{0%{top:-200px;}
80%{top:50px;}
100%{top:0;}
}
.top{-webkit-animation-name:top;-moz-animation-name:top;-o-animation-name:top;animation-name:top;}
/*** 60 bottom *************************/
@-webkit-keyframes bottom{0%{top:300px;}
80%{top:-100px;}
100%{top:0;}
}
@keyframes bottom{0%{top:300px;}
80%{top:-100px;}
100%{top:0;}
}
.bottom{-webkit-animation-name:bottom;-moz-animation-name:bottom;-o-animation-name:bottom;animation-name:bottom;}
/*** 61 zoomIn *************************/
@-webkit-keyframes 'zoomIn'{0%{transform:scale(0.7);-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-o-transform:scale(0.7);-ms-transform:scale(0.7);opacity:0;-webkit-opacity:0;-moz-opacity:0;}
100%{transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
@keyframes zoomIn{0%{transform:scale(0.7);-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-o-transform:scale(0.7);-ms-transform:scale(0.7);opacity:0;-webkit-opacity:0;-moz-opacity:0;}
100%{transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
.zoomIn{-webkit-animation-name:zoomIn;-moz-animation-name:zoomIn;-o-animation-name:zoomIn;animation-name:zoomIn;}
/*** 62 zoomOut *************************/
@-webkit-keyframes zoomOut{0%{transform:scale(2);-webkit-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);opacity:0;-webkit-opacity:0;-moz-opacity:0;}
100%{transform:none;-webkit-transform:none;-moz-transform:none;-o-transform:none;-ms-transform:none;opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
@keyframes zoomOut{0%{transform:scale(2);-webkit-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);-ms-transform:scale(2);opacity:0;-webkit-opacity:0;-moz-opacity:0;}
100%{transform:none;-webkit-transform:none;-moz-transform:none;-o-transform:none;-ms-transform:none;opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
.zoomOut{-webkit-animation-name:zoomOut;-moz-animation-name:zoomOut;-o-animation-name:zoomOut;animation-name:zoomOut;}
/*** 63 rotate *************************/
@-webkit-keyframes rotate{0%{transform:rotate(-360deg) scale(0.1);-webkit-transform:rotate(-360deg) scale(0.1);-moz-transform:rotate(-360deg) scale(0.1);-o-transform:rotate(-360deg) scale(0.1);-ms-transform:rotate(-360deg) scale(0.1);opacity:0;-webkit-opacity:0;-moz-opacity:0;}
100%{transform:none;-webkit-transform:none;-moz-transform:none;-o-transform:none;-ms-transform:none;opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
@keyframes rotate{0%{transform:rotate(-360deg) scale(0.1);-webkit-transform:rotate(-360deg) scale(0.1);-moz-transform:rotate(-360deg) scale(0.1);-o-transform:rotate(-360deg) scale(0.1);-ms-transform:rotate(-360deg) scale(0.1);opacity:0;-webkit-opacity:0;-moz-opacity:0;}
100%{transform:none;-webkit-transform:none;-moz-transform:none;-o-transform:none;-ms-transform:none;opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
.rotate{-webkit-animation-name:rotate;-moz-animation-name:rotate;-o-animation-name:rotate;animation-name:rotate;}
/*** 64 sky *************************/
@-webkit-keyframes sky{0%{top:-350px;opacity:.2transform:scale(.1);-webkit-transform:scale(.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);}
90%{top:100px;opacity:.7transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);-o-transform:scale(.7);}
100%{top:0;opacity:1transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);}
}
@keyframes sky{0%{top:-350px;opacity:.2transform:scale(.1);-webkit-transform:scale(.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);}
90%{top:100px;opacity:.7transform:scale(.7);-webkit-transform:scale(.7);-moz-transform:scale(.7);-ms-transform:scale(.7);-o-transform:scale(.7);}
100%{top:0;opacity:1transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);}
}
.sky{-webkit-animation-name:sky;-moz-animation-name:sky;-o-animation-name:sky;animation-name:sky;}
/*** 65 dance *************************/
@-webkit-keyframes dance{0%{transform:rotate(-60deg) scale(0.1);-webkit-transform:rotate(-60deg) scale(0.1);-moz-transform:rotate(-60deg) scale(0.1);-o-transform:rotate(-60deg) scale(0.1);-ms-transform:rotate(-60deg) scale(0.1);opacity:.2;-webkit-opacity:.2;-moz-opacity:.2;}
50%{transform:rotate(60deg) scale(0.5);-webkit-transform:rotate(60deg) scale(0.5);-moz-transform:rotate(60deg) scale(0.5);-o-transform:rotate(60deg) scale(0.5);-ms-transform:rotate(60deg) scale(0.5);opacity:.7;-webkit-opacity:.7;-moz-opacity:.7;}
100%{transform:none;-webkit-transform:none;-webkit-transform:none;-moz-transform:none;-ms-transform:none;opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
@keyframes dance{0%{transform:rotate(-60deg) scale(0.1);-webkit-transform:rotate(-60deg) scale(0.1);-moz-transform:rotate(-60deg) scale(0.1);-o-transform:rotate(-60deg) scale(0.1);-ms-transform:rotate(-60deg) scale(0.1);opacity:.2;-webkit-opacity:.2;-moz-opacity:.2;}
50%{transform:rotate(60deg) scale(0.5);-webkit-transform:rotate(60deg) scale(0.5);-moz-transform:rotate(60deg) scale(0.5);-o-transform:rotate(60deg) scale(0.5);-ms-transform:rotate(60deg) scale(0.5);opacity:.7;-webkit-opacity:.7;-moz-opacity:.7;}
100%{transform:none;-webkit-transform:none;-webkit-transform:none;-moz-transform:none;-ms-transform:none;opacity:1;-webkit-opacity:1;-moz-opacity:1;}
}
.dance{-webkit-animation-name:dance;-moz-animation-name:dance;-o-animation-name:dance;animation-name:dance;}

CSS代码(live-preview.css):

@charset "utf-8";.live{position:relative;width:80%;height:150px;padding:30px 10px 20px 30px;}
.live h3,.live h4,.live h5{font-family:'exodemi_bold',Geneva,sans-serif;}
.live h3{font-size:32px;text-transform:uppercase;color:#4D85EA;}
.live h4{font-size:22px;color:#CCCCCC;}
.live h5{font-size:16px;color:#ffffff;line-height:26px;}
@media screen and (min-width:0px) and (max-width:800px){.live h3,.live h4,.live h5{display:none;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
521.43 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
521.43 KB
立即下载
韦瑶岚琦
了解
打赏作者 鼓励作者
Html Js 菜单导航特效1
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章