以下是 jQuery方格抖动下拉导航特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<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="font/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/cyan/responsive.css">
<link rel="stylesheet" type="text/css" href="css/animation.css">
<link rel="stylesheet" type="text/css" href="css/cyan/color.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/cyan/desktop-ie.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<br><br><br><br>
<ul class="nav">
<!-- Start Home -->
<li id="first">
<div id="cover1"><a href="#">Home</a></div>
<div id="icon"><i class="icon-home"></i></div>
</li>
<!-- Start Portfolio -->
<li>
<div id="cover1"><a href="#Portfolio">Portfolio<i class="icon-chevron-down"></i></a></div>
<div id="icon"><i class="icon-briefcase"></i></div>
<ul class="one" id="Portfolio">
<li><a href="#">sample 1</a></li>
<!-- Start Portfolio 2 -->
<li>
<a href="#sample2">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 service 2 -->
<li><a href="#">sample 3</a></li>
</ul>
</li>
<!-- Start Services -->
<li>
<div id="cover1"><a href="#service">Service<i class="icon-chevron-down"></i></a></div>
<div id="icon"><i class="icon-truck"></i></div>
<ul class="one" id="service">
<li><a href="#">Sample 1</a></li>
<li><a href="#">Sample 2</a></li>
<!-- Start Service 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 Service 3 -->
<li><a href="#">Sample 4</a></li>
</ul>
</li>
<!-- Start Gallery -->
<li>
<div id="cover1"><a href="#gallery">Gallery</a></div>
<div id="icon"><i class="icon-picture"></i></div>
</li>
<!-- Start About Us -->
<li>
<div id="cover1"><a href="#about">About Us<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" width="100" height="100" 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 US -->
<li>
<div id="cover1"><a href="#contact">Contact Us<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-left">
<h3><i class="icon-user"></i>Contact Us</h3>
<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">
<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>
</ul>
</body>
</html>
JS代码(dropdown.js):
$(document).ready(function(){
$('ul.one').css({
'visibility':'hidden','height':'0px'}
);
$('.nav > li').mouseover(function(){
var openMenu= $(this).children('ul.one');
$(openMenu).css({
'visibility':'visible','height':'auto'}
);
}
);
$('.nav > li').mouseleave(function(){
$('ul.one').css({
'visibility':'hidden','height':'0px'}
)}
);
/*Start Open Sub Menu*/
$('.one li').mouseover(function(){
var openMenu= $(this).children('ul.one');
if($(this).children('ul.one').length==1){
$(openMenu).css({
'visibility':'visible','height':'auto'}
)}
else{
$('ul.one').css({
'visibility':'hidden','height':'0'}
)}
}
);
}
);
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;}
}
分享到QQ
分享到微博
微信扫一扫
