jQuery浅绿色滑动手风琴特效代码

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

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

以下是 jQuery浅绿色滑动手风琴特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery浅绿色滑动手风琴</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/reset.css"  />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="font/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/turquoise/style.css">
<link rel="stylesheet" type="text/css" href="css/animation.css">
<link rel="stylesheet" type="text/css" href="css/live-preview.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/motor.js"></script>

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

<!--[if lte IE 9]>
<style type="text/css">
    .nav label{
    	border-bottom:1px solid #CCCCCC;
    }
    .content h6{                      
		background-color:#81EAE0;
	}
</style>
<![endif]-->

</head>
<body>

<section class="nav">
  <div>
    <input id="label-1" name="lida" type="radio" checked/>
    <label for="label-1" id="item1"><i class="icon-globe" id="i1"></i>Label One</label>
    <div class="content" id="a1">
      <h4>Accordion Menu</h4>
      <p>Web page backgrounds used to be commonplace, but they became unpopular once designers figured out
        that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns. With
        text being as hard to read on-screen as it is, it’s adding insult to injury to inflict some nasty paisley mosaic
        background (or worse) on the poor reader, too.</p>
      <h6>The following collection of Web sites offers some outstanding references on
        CSS and its proper use on well-crafted Web pages. The very first reference
        from <a href="#">W3Schools.com</a> is terrific</h6>
    </div>
  </div>
  <div>
    <input id="label-2" name="lida" type="radio"/>
    <label for="label-2" id="item2"><i class="icon-leaf" id="i2"></i>Label Two</label>
    <div class="content" id="a2">
      <h4>Accordion Menu</h4>
      <p>Web page backgrounds used to be commonplace, but they became unpopular once designers figured out
        that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns. With
        text being as hard to read on-screen as it is, it’s adding insult to injury to inflict some nasty paisley mosaic
        background (or worse) on the poor reader, too.</p>
        <h6>The following collection of Web sites offers some outstanding references on
        CSS and its proper use on well-crafted Web pages. The very first reference
        from <a href="#">W3Schools.com</a> is terrific</h6>
    </div>
  </div>
  <div>
    <input id="label-3" name="lida" type="radio"/>
    <label for="label-3" id="item3"><i class="icon-trophy" id="i3"></i>Label Three</label>
    <div class="content" id="a3">
      <h4>Accordion Menu</h4>
      <p>Web page backgrounds used to be commonplace, but they became unpopular once designers figured out
        that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns. With
        text being as hard to read on-screen as it is, it’s adding insult to injury to inflict some nasty paisley mosaic
        background (or worse) on the poor reader, too.</p>
        <h6>The following collection of Web sites offers some outstanding references on
        CSS and its proper use on well-crafted Web pages. The very first reference
        from <a href="#">W3Schools.com</a> is terrific</h6>
    </div>
  </div>
  <div>
    <input id="label-4" name="lida" type="radio"/>
    <label for="label-4" id="item4"><i class="icon-gift" id="i4"></i>Label four</label>
    <div class="content" id="a4">
      <h4>Accordion Menu</h4>
      <p>Web page backgrounds used to be commonplace, but they became unpopular once designers figured out
        that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns. With
        text being as hard to read on-screen as it is, it’s adding insult to injury to inflict some nasty paisley mosaic
        background (or worse) on the poor reader, too.</p>
        <h6>The following collection of Web sites offers some outstanding references on
        CSS and its proper use on well-crafted Web pages. The very first reference
        from <a href="#">W3Schools.com</a> is terrific</h6>
    </div>
  </div>
  <div>
    <input id="label-5" name="lida" type="radio"/>
    <label for="label-5" id="item5"><i class="icon-coffee" id="i5"></i>Label Five</label>
    <div class="content" id="a5">
      <h4>Accordion Menu</h4>
      <p>Web page backgrounds used to be commonplace, but they became unpopular once designers figured out
        that visitors to web pages didn’t want their eyes wrenched out by gaudy tiled background patterns. With
        text being as hard to read on-screen as it is, it’s adding insult to injury to inflict some nasty paisley mosaic
        background (or worse) on the poor reader, too.</p>
        <h6>The following collection of Web sites offers some outstanding references on
        CSS and its proper use on well-crafted Web pages. The very first reference
        from <a href="#">13141618.taobao.com</a> is terrific</h6>
    </div>
  </div>
</section>
</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))}
;

JS代码(motor.js):

$(document).ready(function(){
	var label= $('label');
	var content= $('.content');
	$('.content').not(":first").hide();
	$('label').on("click",function(){
	var labelClicked = $(this);
	var labelContent = labelClicked.next();
	if(labelContent.is(":visible")){
	return;
}
content.slideUp("normal");
	labelContent.slideDown("slow");
}
);
}
);

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)}
}
.nav li:hover > ul.one{z-index:100;-webkit-animation-name:swing;-webkit-animation-duration:1s;-webkit-animation-iteration-count:1;}
/* 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;}
}
/* 25 ** slideLeft ****************/
@-webkit-keyframes 'slideLeft'{0%{left:-500px;}
100%{left:0;}
}
/* 26 ** slideRight ****************/
@-webkit-keyframes 'slideRight'{0%{left:500px;}
100%{left:0;}
}
/* 27 ** slideTop ****************/
@-webkit-keyframes 'slideTop'{0%{top:-350px;}
100%{top:0;}
}
/* 28 ** slideBottom ****************/
@-webkit-keyframes 'slideBottom'{0%{top:350px;}
100%{top:0;}
}

CSS代码(live-preview.css):

@charset "utf-8";body{background:#ffffff;/* Old browsers */
background:-moz-radial-gradient(center,ellipse cover,#ffffff 0%,#e5e5e5 100%);/* FF3.6+ */
background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,#ffffff),color-stop(100%,#e5e5e5));/* Chrome,Safari4+ */
background:-webkit-radial-gradient(center,ellipse cover,#ffffff 0%,#e5e5e5 100%);/* Chrome10+,Safari5.1+ */
background:-o-radial-gradient(center,ellipse cover,#ffffff 0%,#e5e5e5 100%);/* Opera 12+ */
background:-ms-radial-gradient(center,ellipse cover,#ffffff 0%,#e5e5e5 100%);/* IE10+ */
background:radial-gradient(ellipse at center,#ffffff 0%,#e5e5e5 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#e5e5e5',GradientType=1 );/* IE6-9 fallback on horizontal gradient */
}
.live{position:relative;width:100%;height:120px;padding:30px 10px 20px 30px;}
.live h3{font-size:32px;text-align:justify;text-transform:uppercase;font-family:'exodemi_bold',Geneva,sans-serif;color:#21CBBB;}
.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;}

CSS代码(reset.css):

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
section,header{display:block;}

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