以下是 jQuery动画效果多功能菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>jQuery动画效果多功能菜单</title>
<link rel="stylesheet" type="text/css" href="css/reset.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="font/titillium/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/animation.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 rel="stylesheet" type="text/css" href="css/blue/desktop-ie.css">
<![endif]-->
</head>
<body>
<br><br>
<ul class="nav">
<!-- Start Home -->
<li id="first"><a href="#home" class="label"><i class="icon-home" ></i>Home<i class="icon-chevron-down"></i></a>
<ul class="one" id="home">
<li>
<h3><i class="icon-user"></i>Welcome</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>
</li>
</ul>
</li>
<!-- End Home -->
<!-- Start About -->
<li><a href="#about" class="label"><i class="icon-info-sign"></i>About Us<i class="icon-chevron-down"></i></a>
<ul class="one" id="about">
<li><img src="images/about.png" width="160" height="160" 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 class="light-color"><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>
<!-- End About -->
<!-- Start Links -->
<li> <a href="#links" class="label"><i class="icon-list-ul"></i>Links<i class="icon-chevron-down"></i></a>
<ul class="one" id="links">
<li>
<div id="link-1" class="link-block light-color">
<h5><i class="icon-laptop"></i>Links 1</h5>
<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">
<h5><i class="icon-camera-retro"></i>Links 2</h5>
<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">
<h5><i class="icon-desktop"></i>Links 3</h5>
<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>
<div id="link-4" class="link-block light-color">
<h5><i class="icon-music"></i>Links 4</h5>
<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-5" class="link-block light-color">
<h5><i class="icon-dashboard"></i>Links 5</h5>
<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>
<!-- End Links -->
<!-- Start DropDown -->
<!-- Start Level 1 -->
<li> <a href="#menu" class="label"><i class="icon-cog"></i>DropDown<i class="icon-chevron-down"></i></a>
<ul class="one" id="menu">
<li class="level-1"><a href="#">Photoshop</a></li>
<!-- Start Level 2 -->
<li> <a href="#">Dreamweaver<i class="icon-chevron-right"></i></a>
<ul class="one" id="sub-menu">
<li class="level-2"><a href="#">Page 1</a></li>
<!-- Start Level 3 -->
<li> <a href="#">Page 2<i class="icon-chevron-right"></i></a>
<ul class="one" id="sub-menu2">
<li class="level-3"><a href="#">Page 1</a></li>
<li class="level-3"><a href="#">Page 2</a></li>
<li class="level-3"><a href="#">Page 3</a></li>
<li class="level-3"><a href="#">Page 4</a></li>
</ul>
</li>
<!-- End Level 3 -->
<li class="level-2"><a href="#">Page 3</a></li>
</ul>
</li>
<!-- End Level 2 -->
<li class="level-1"><a href="#">Fireworks</a></li>
</ul>
</li>
<!-- End Level 1 -->
<!-- Start DropDown -->
<!-- Start Products -->
<li> <a href="#products" class="label"><i class="icon-list-ul"></i>Products<i class="icon-chevron-down"></i></a>
<ul class="one" id="products">
<li>
<h3><i class="icon-user"></i>Top Product</h3>
<div class="product light-color" id="item-1"> <img src="images/p-1.png" alt="product-1">
<p><strong>Name:</strong> Product1</p>
<p><strong>Composer:</strong> Amir</p>
<p><strong>Price:</strong> 340$</p>
<p><strong>About:</strong> Is there a way to apply styles to an element only if it’s embedded within a
particular element, rather than universally?</p>
</div>
<div class="product light-color" id="item-2"> <img src="images/p-1.png" alt="product-1">
<p><strong>Name:</strong> Product1</p>
<p><strong>Composer:</strong> Amir</p>
<p><strong>Price:</strong> 340$</p>
<p><strong>About:</strong> Is there a way to apply styles to an element only if it’s embedded within a
particular element, rather than universally?</p>
</div>
<div class="product light-color" id="item-3"> <img src="images/p-1.png" alt="product-1">
<p><strong>Name:</strong> Product1</p>
<p><strong>Composer:</strong> Amir</p>
<p><strong>Price:</strong> 340$</p>
<p><strong>About:</strong> Is there a way to apply styles to an element only if it’s embedded within a
particular element, rather than universally?</p>
</div>
<div id="preamble">
<h5><i class="icon-tag"></i>preamble</h5>
<h6 class="light-color">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</h6>
</div>
</li>
</ul>
</li>
<!-- End Products -->
<!-- Start Contact Us -->
<li id="right"> <a href="#contact" class="label"><i class="icon-envelope"></i>Contact Us<i class="icon-chevron-down"></i></a>
<ul class="one" id="contact">
<li id="part-left">
<p><strong><i class="icon-home"></i>Address :</strong> Bayat Alley, Abbasi str, South kerman, Tehran</p>
<p><strong><i class="icon-phone"></i>Phone :</strong> +98 939 557 30 74</p>
<p><strong><i class="icon-file-alt"></i>Fax :</strong> +98 778 31 506</p>
<p><strong><i class="icon-envelope"></i>Email :</strong> amir.silent@gmail.com </p>
<h4 id="h4-social"><i class="icon-group"></i>Social Network</h4>
<a href="#"><i class="icon-facebook-sign"></i></a> <a href="#"><i class="icon-twitter-sign"></i></a> <a href="#"><i class="icon-google-plus-sign"></i></a> <a href="#"><i class="icon-linkedin-sign"></i></a><a href="#"><i class="icon-pinterest-sign"></i></a> </li>
<li id="part-right">
<p>Name<em>*</em></p>
<input name="name" type="text" id="name" class="light-color">
<p>E-mail<em>*</em></p>
<input name="email" type="text" id="email" class="light-color">
<p>Message<em>*</em></p>
<textarea name="comment" cols="" rows="" id="comment" class="light-color"></textarea>
<input name="send" type="button" id="send" value="Send">
</li>
</ul>
</li>
<!-- End Contact Us -->
</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 ** Bounce ****************/
@-webkit-keyframes 'bounce'{0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-30px)}
60%{-webkit-transform:translateY(-15px)}
}
/* 02 ** 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)}
}
/* 03 ** 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)}
}
/* 04 ** 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%)}
}
/* 05 ** pulse ****************/
@-webkit-keyframes 'pulse'{0%{-webkit-transform:scale(1)}
50%{-webkit-transform:scale(1.1)}
100%{-webkit-transform:scale(1)}
}
/* 06 ** 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}
}
/* 07 ** fadeIn ****************/
@-webkit-keyframes 'fadeIn'{0%{opacity:0}
100%{opacity:1}
}
/* 08 ** fadeInDownBig ****************/
@-webkit-keyframes 'fadeInDownBig'{0%{opacity:0;-webkit-transform:translateY(-2000px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
/* 09 ** fadeOut ****************/
@-webkit-keyframes 'fadeOut'{0%{opacity:1}
100%{opacity:0}
}
/* 10 ** 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)}
}
/* 11 ** bounceOutDown ****************/
@-webkit-keyframes 'bounceOutDown'{0%{-webkit-transform:translateY(0)}
20%{opacity:1;-webkit-transform:translateY(-20px)}
100%{opacity:0;-webkit-transform:translateY(2000px)}
}
/* 12 ** 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}
}
/* 13 ** rollIn ****************/
@-webkit-keyframes 'rollIn'{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg)}
100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg)}
}
/* 14 ** 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}
}
/* 15 ** 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)}
}
/* 16 ** left ****************/
@-webkit-keyframes 'left'{0%{left:-100px;}
90%{left:50px;}
100%{left:0;}
}
/* 17 ** right ****************/
@-webkit-keyframes 'right'{0%{left:100px;}
90%{left:-50px;}
100%{left:0;}
}
/* 18 ** top ****************/
@-webkit-keyframes 'top'{0%{top:-200px;}
80%{top:50px;}
100%{top:0;}
}
/* 19 ** bottom ****************/
@-webkit-keyframes 'bottom'{0%{top:300px;}
80%{top:-100px;}
100%{top:0;}
}
/* 20 ** 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;}
}
/* 21 ** 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;}
}
/* 22 ** 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;}
}
/* 23 ** 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);}
}
/* 24 ** 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;}
}
CSS代码(live-preview.css):
@charset "utf-8";body{}
.live{position:relative;width:80%;height:150px;padding:30px 10px 20px 30px;}
@media screen and (min-width:600px){.live h3{font-size:32px;text-align:justify;text-transform:uppercase;font-family:'exodemi_bold',Geneva,sans-serif;color:#4EA9FF;}
.live h4{font-size:22px;font-family:'exodemi_bold',Geneva,sans-serif;color:#333333;}
.live h5{font-size:16px;font-family:'exodemi_bold',Geneva,sans-serif;color:#666666;}
}
@media screen and (min-width:0px) and (max-width:600px){h3,h4,h5{display:none;}
}
分享到QQ
分享到微博
微信扫一扫
