以下是 基于jQuery+CSS3样本书特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Swatch Book with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated Swatch Book with CSS3 and jQuery" />
<meta name="keywords" content="swatch book, css3, jquery, animated, rotation, transition, folding fan" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="#">
<strong>« Previous Demo: </strong>3D Panel Layout
</a>
<span class="right">
<a href="#">Icon Font made with Fontello</a>
<a href="#">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</nav>
<div class="support-note"><!-- let's check browser support with modernizr -->
<!--span class="no-cssanimations">CSS animations are not supported in your browser</span-->
<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
<!--span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span-->
<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
<span class="note-ie">Sorry, only modern browsers.</span>
</div>
</header>
<section class="main">
<div id="sb-container" class="sb-container">
<div>
<span class="sb-icon icon-cog"></span>
<h4><span>All Settings</span></h4>
</div>
<div>
<span class="sb-icon icon-flight"></span>
<h4><span>User Modes</span></h4>
</div>
<div>
<span class="sb-icon icon-eye"></span>
<h4><span>Browse All</span></h4>
</div>
<div>
<span class="sb-icon icon-install"></span>
<h4><span>Install App</span></h4>
</div>
<div>
<span class="sb-icon icon-bag"></span>
<h4><span>Productivity</span></h4>
</div>
<div>
<span class="sb-icon icon-globe"></span>
<h4><span>All Options</span></h4>
</div>
<div>
<span class="sb-icon icon-picture"></span>
<h4><span>User Images</span></h4>
</div>
<div>
<span class="sb-icon icon-video"></span>
<h4><span>User Videos</span></h4>
</div>
<div>
<span class="sb-icon icon-download"></span>
<h4><span>Download App</span></h4>
</div>
<div>
<span class="sb-icon icon-mobile"></span>
<h4><span>Mobile Theme</span></h4>
</div>
<div>
<span class="sb-icon icon-camera"></span>
<h4><span>Digital App</span></h4>
</div>
<div>
<h4><span>Profile</span></h4>
<h5><span>We ♥ color</span></h5>
</div>
</div><!-- sb-container -->
</section>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.swatchbook.js"></script>
<script type="text/javascript">
$(function() {
$( '#sb-container' ).swatchbook();
});
</script>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Swatch Book with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Animated Swatch Book with CSS3 and jQuery" />
<meta name="keywords" content="swatch book, css3, jquery, animated, rotation, transition, folding fan" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style>
<![endif]-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="#">
<strong>« Previous Demo: </strong>3D Panel Layout
</a>
<span class="right">
<a href="#">Icon Font made with Fontello</a>
<a href="#">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<nav class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</nav>
<div class="support-note"><!-- let's check browser support with modernizr -->
<!--span class="no-cssanimations">CSS animations are not supported in your browser</span-->
<span class="no-csstransforms">CSS transforms are not supported in your browser</span>
<!--span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span-->
<span class="no-csstransitions">CSS transitions are not supported in your browser</span>
<span class="note-ie">Sorry, only modern browsers.</span>
</div>
</header>
<section class="main">
<div id="sb-container" class="sb-container">
<div>
<span class="sb-icon icon-cog"></span>
<h4><span>All Settings</span></h4>
</div>
<div>
<span class="sb-icon icon-flight"></span>
<h4><span>User Modes</span></h4>
</div>
<div>
<span class="sb-icon icon-eye"></span>
<h4><span>Browse All</span></h4>
</div>
<div>
<span class="sb-icon icon-install"></span>
<h4><span>Install App</span></h4>
</div>
<div>
<span class="sb-icon icon-bag"></span>
<h4><span>Productivity</span></h4>
</div>
<div>
<span class="sb-icon icon-globe"></span>
<h4><span>All Options</span></h4>
</div>
<div>
<span class="sb-icon icon-picture"></span>
<h4><span>User Images</span></h4>
</div>
<div>
<span class="sb-icon icon-video"></span>
<h4><span>User Videos</span></h4>
</div>
<div>
<span class="sb-icon icon-download"></span>
<h4><span>Download App</span></h4>
</div>
<div>
<span class="sb-icon icon-mobile"></span>
<h4><span>Mobile Theme</span></h4>
</div>
<div>
<span class="sb-icon icon-camera"></span>
<h4><span>Digital App</span></h4>
</div>
<div>
<h4><span>Profile</span></h4>
<span class="sb-toggle">Click to open/close</span>
<h5><span>We ♥ color</span></h5>
</div>
</div><!-- sb-container -->
</section>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.swatchbook.js"></script>
<script type="text/javascript">
$(function() {
$( '#sb-container' ).swatchbook( {
// number of degrees that is between each item
angleInc : -10,
// amount in degrees for the opened item's next sibling
proximity : -45,
neighbor : -4,
// index of the element that when clicked, triggers the open/close function
// by default there is no such element
closeIdx : 11
} );
});
</script>
</body>
</html>
JS代码(jquery.swatchbook.js):
/** * jquery.swatchbook.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2012,Codrops * http://www.codrops.com */
( function( window,$,undefined ){
'use strict';
var Modernizr= window.Modernizr;
jQuery.fn.reverse= [].reverse;
$.SwatchBook= function( options,element ){
this.$el= $( element );
this._init( options );
}
;
$.SwatchBook.defaults={
// index of initial centered itemcenter:6,// number of degrees that is between each itemangleInc:8,speed:700,easing:'ease',// amount in degrees for the opened item's next siblingproximity:45,// amount in degrees between the opened item's next siblingsneighbor:4,// animate on loadonLoadAnim:true,// if it should be closed by defaultinitclosed:false,// index of the element that when clicked,triggers the open/close function// by default there is no such elementcloseIdx:-1}
;
$.SwatchBook.prototype={
_init:function( options ){
this.options= $.extend( true,{
}
,$.SwatchBook.defaults,options );
this.$items= this.$el.children( 'div' );
this.itemsCount= this.$items.length;
this.current= -1;
this.support= Modernizr.csstransitions;
this.cache= [];
if( this.options.onLoadAnim ){
this._setTransition();
}
if( !this.options.initclosed ){
this._center( this.options.center,this.options.onLoadAnim );
}
else{
this.isClosed= true;
if( !this.options.onLoadAnim ){
this._setTransition();
}
}
this._initEvents();
}
,_setTransition:function(){
if( !this.support ){
return false;
}
this.$items.css({
'-webkit-transition':'-webkit-transform ' + this.options.speed + 'ms ' + this.options.easing,'-moz-transition':'-moz-transform ' + this.options.speed + 'ms ' + this.options.easing,'-o-transition':'-o-transform ' + this.options.speed + 'ms ' + this.options.easing,'-ms-transition':'-ms-transform ' + this.options.speed + 'ms ' + this.options.easing,'transition':'transform ' + this.options.speed + 'ms ' + this.options.easing}
);
}
,_openclose:function(){
var _self = this;
if( this.isClosed ){
this._center( this.options.center,true );
}
else{
this.$items.each( function( i ){
var transformStr= 'rotate(0deg)';
$( this ).css({
'-webkit-transform':transformStr,'-moz-transform':transformStr,'-o-transform':transformStr,'-ms-transform':transformStr,'transform':transformStr}
);
}
);
}
this.isClosed = !this.isClosed;
}
,_center:function( idx,anim ){
var _self = this;
this.$items.each( function( i ){
var transformStr= 'rotate(' + ( _self.options.angleInc * ( i - idx ) ) + 'deg)';
$( this ).css({
'-webkit-transform':transformStr,'-moz-transform':transformStr,'-o-transform':transformStr,'-ms-transform':transformStr,'transform':transformStr}
);
}
);
}
,_initEvents:function(){
var _self = this;
this.$items.on( 'click.swatchbook',function( event ){
var $item= $( this ),itmIdx= $item.index();
if( itmIdx !== _self.current ){
if( _self.options.closeIdx !== -1 && itmIdx === _self.options.closeIdx ){
_self._openclose();
_self._setCurrent();
}
else{
_self._setCurrent( $item );
var transformStr= 'rotate(0deg)';
$item.css({
'-webkit-transform':transformStr,'-moz-transform':transformStr,'-o-transform':transformStr,'-ms-transform':transformStr,'transform':transformStr}
);
_self._rotateSiblings( $item );
}
}
}
);
}
,_rotateSiblings:function( $item ){
var _self= this,idx= $item.index(),$cached= this.cache[ idx ],$siblings;
if( $cached ){
$siblings = $cached;
}
else{
$siblings = $item.siblings();
this.cache[ idx ] = $siblings;
}
$siblings.each( function( i ){
var rotateVal= ( i < idx ) ?_self.options.angleInc * ( i - idx ):( i - idx === 1 ) ? _self.options.proximity:_self.options.proximity + ( i - idx - 1 ) * _self.options.neighbor;
var transformStr= 'rotate(' + rotateVal + 'deg)';
$( this ).css({
'-webkit-transform':transformStr,'-moz-transform':transformStr,'-o-transform':transformStr,'-ms-transform':transformStr,'transform':transformStr}
);
}
);
}
,_setCurrent:function( $el ){
this.current = $el ? $el.index():-1;
this.$items.removeClass( 'ff-active' );
if( $el ){
$el.addClass( 'ff-active' );
}
}
}
;
var logError= function( message ){
if ( window.console ){
window.console.error( message );
}
}
;
$.fn.swatchbook= function( options ){
if ( typeof options === 'string' ){
var args = Array.prototype.slice.call( arguments,1 );
this.each(function(){
var instance = $.data( this,'swatchbook' );
if ( !instance ){
logError( "cannot call methods on swatchbook prior to initialization;
" +"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ){
logError( "no such method '" + options + "' for swatchbook instance" );
return;
}
instance[ options ].apply( instance,args );
}
);
}
else{
this.each(function(){
var instance = $.data( this,'swatchbook' );
if ( !instance ){
$.data( this,'swatchbook',new $.SwatchBook( options,this ) );
}
}
);
}
return this;
}
;
}
)( window,jQuery );
JS代码(modernizr.custom.79639.js):
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD * Build:http://www.modernizr.com/download/#-cssanimations-csstransforms-csstransforms3d-csstransitions-shiv-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes */
;
window.Modernizr=function(a,b,c){
function z(a){
j.cssText=a}
function A(a,b){
return z(m.join(a+";
")+(b||""))}
function B(a,b){
return typeof a===b}
function C(a,b){
return!!~(""+a).indexOf(b)}
function D(a,b){
for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;
return!1}
function E(a,b,d){
for(var e in a){
var f=b[a[e]];
if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}
return!1}
function F(a,b,c){
var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+o.join(d+" ")+d).split(" ");
return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}
var d="2.5.3",e={
}
,f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={
}
.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={
}
,r={
}
,s={
}
,t=[],u=t.slice,v,w=function(a,c,d,e){
var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");
if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);
return f=["­
","<style>",a,"</style>"].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i}
,x={
}
.hasOwnProperty,y;
!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){
return x.call(a,b)}
:y=function(a,b){
return b in a&&B(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(b){
var c=this;
if(typeof c!="function")throw new TypeError;
var d=u.call(arguments,1),e=function(){
if(this instanceof e){
var a=function(){
}
;
a.prototype=c.prototype;
var f=new a,g=c.apply(f,d.concat(u.call(arguments)));
return Object(g)===g?g:f}
return c.apply(b,d.concat(u.call(arguments)))}
;
return e}
);
var G=function(a,c){
var d=a.join(""),f=c.length;
w(d,function(a,c){
var d=b.styleSheets[b.styleSheets.length-1],g=d?d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"":"",h=a.childNodes,i={
}
;
while(f--)i[h[f].id]=h[f];
e.csstransforms3d=(i.csstransforms3d&&i.csstransforms3d.offsetLeft)===9&&i.csstransforms3d.offsetHeight===3}
,f,c)}
([,["@media (",m.join("transform-3d),("),h,")","{
#csstransforms3d{
left:9px;
position:absolute;
height:3px;
}
}
"].join("")],[,"csstransforms3d"]);
q.cssanimations=function(){
return F("animationName")}
,q.csstransforms=function(){
return!!F("transform")}
,q.csstransforms3d=function(){
var a=!!F("perspective");
return a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d),a}
,q.csstransitions=function(){
return F("transition")}
;
for(var H in q)y(q,H)&&(v=H.toLowerCase(),e[v]=q[H](),t.push((e[v]?"":"no-")+v));
return z(""),i=k=null,function(a,b){
function g(a,b){
var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function h(){
var a=k.elements;
return typeof a=="string"?a.split(" "):a}
function i(a){
var b={
}
,c=a.createElement,e=a.createDocumentFragment,f=e();
a.createElement=function(a){
var e=(b[a]||(b[a]=c(a))).cloneNode();
return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e}
,a.createDocumentFragment=Function("h,f","return function(){
var n=f.cloneNode(),c=n.createElement;
h.shivMethods&&("+h().join().replace(/\w+/g,function(a){
return b[a]=c(a),f.createElement(a),'c("'+a+'")'}
)+");
return n}
")(k,f)}
function j(a){
var b;
return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
display:block}
audio{
display:none}
canvas,video{
display:inline-block;
*display:inline;
*zoom:1}
[hidden]{
display:none}
audio[controls]{
display:inline-block;
*display:inline;
*zoom:1}
mark{
background:#FF0;
color:#000}
")),f||(b=!i(a)),b&&(a.documentShived=b),a)}
var c=a.html5||{
}
,d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;
(function(){
var a=b.createElement("a");
a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){
try{
b.createElement("a")}
catch(a){
return!0}
var c=b.createDocumentFragment();
return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}
()}
)();
var k={
elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j}
;
a.html5=k,j(b)}
(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){
return D([a])}
,e.testAllProps=F,e.testStyles=w,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}
(this,this.document);
CSS代码(demo.css):
@import url('normalize.css');@font-face{font-family:'icons';src:url("font/icons.eot");src:url(".font/icons.eot?#iefix") format('embedded-opentype'),url("font/icons.woff") format('woff'),url("font/icons.ttf") format('truetype'),url("font/icons.svg#icons") format('svg');font-weight:normal;font-style:normal;}
/* General Demo Style */
body{font-family:'Open Sans Condensed','Arial Narrow',serif;background:#ddd url(../images/egg_shell.jpg) repeat top left;font-weight:400;font-size:15px;color:#333;-webkit-font-smoothing:antialiased;overflow-y:scroll;overflow-x:hidden;}
a{color:#555;text-decoration:none;}
.container{width:100%;position:relative;}
.clr{clear:both;padding:0;height:0;margin:0;}
.main{width:1000px;height:700px;overflow:hidden;margin:0 auto;position:relative;}
.container > header{margin:10px;padding:20px 10px 10px 10px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header h1{font-size:36px;line-height:36px;margin:0;position:relative;font-weight:300;color:#524f4e;text-shadow:1px 1px 1px rgba(255,255,255,0.7);}
.container > header h1 span{font-weight:700;}
.container > header h2{font-size:14px;font-weight:300;margin:0;padding:15px 0 5px 0;color:#888;font-family:Cambria,Georgia,serif;font-style:italic;text-shadow:1px 1px 1px rgba(255,255,255,0.9);}
/* Header Style */
.codrops-top{line-height:24px;font-size:11px;background:#fff;background:rgba(255,255,255,0.6);text-transform:uppercase;z-index:9999;position:relative;font-family:Cambria,Georgia,serif;box-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;display:inline-block;}
.codrops-top a:hover{background:rgba(255,255,255,0.3);}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
/* Demo Buttons Style */
.codrops-demos{text-align:center;display:block;line-height:30px;padding:5px 0px;}
.codrops-demos a{display:inline-block;margin:0px 4px;padding:0px 6px;color:#aaa;line-height:20px;font-size:13px;text-shadow:1px 1px 1px #fff;border:1px solid #fff;background:#ffffff;/* Old browsers */
background:-moz-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(47%,#f6f6f6),color-stop(100%,#ededed));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* IE10+ */
background:linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#ededed',GradientType=0 );/* IE6-9 */
box-shadow:0 1px 1px rgba(0,0,0,0.1);}
.codrops-demos a:hover{color:#333;background:#fff;}
.codrops-demos a:active{background:#fff;}
.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{background:#f0f0f0;border-color:#d9d9d9;color:#aaa;box-shadow:0 1px 1px rgba(255,255,255,0.7);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6',endColorstr='#f6f6f6',GradientType=0 );/* IE6-9 */
}
.support-note span{color:#ac375d;font-size:16px;display:none;font-weight:bold;text-align:center;padding:5px 0;}
.no-cssanimations .support-note span.no-cssanimations,.no-csstransforms .support-note span.no-csstransforms,.no-csstransforms3d .support-note span.no-csstransforms3d,.no-csstransitions .support-note span.no-csstransitions{display:block;}
CSS代码(style.css):
.sb-container{position:relative;width:150px;height:400px;margin:30px auto 0 auto;}
.sb-container div{position:absolute;top:0;left:0;width:130px;background:#fff;height:400px;border-radius:5px;cursor:pointer;text-align:center;background-image:url(../images/fabric.png);-webkit-transform-origin:25% 90%;-moz-transform-origin:25% 90%;-o-transform-origin:25% 90%;-ms-transform-origin:25% 90%;transform-origin:25% 90%;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.sb-container div:nth-child(1){background-color:#ea2a29;box-shadow:-1px -1px 3px rgba(0,0,0,0.1),1px 1px 1px rgba(0,0,0,0.1);}
.sb-container div:nth-child(2){background-color:#f16729;box-shadow:-1px -1px 3px rgba(0,0,0,0.1),2px 2px 1px rgba(0,0,0,0.1);}
.sb-container div:nth-child(3){background-color:#f89322;box-shadow:-1px -1px 3px rgba(0,0,0,0.1),3px 3px 2px rgba(0,0,0,0.2);}
.sb-container div:nth-child(4){background-color:#ffcf14;box-shadow:-1px -1px 3px rgba(0,0,0,0.1),4px 4px 4px rgba(0,0,0,0.2);}
.sb-container div:nth-child(5){background-color:#ffea0d;box-shadow:-1px -1px 3px rgba(0,0,0,0.1),5px 5px 6px rgba(0,0,0,0.3);}
.sb-container div:nth-child(6){background-color:#87b11d;box-shadow:-1px -1px 3px rgba(0,0,0,0.1),6px 6px 8px rgba(0,0,0,0.3);}
.sb-container div:nth-child(7){background-color:#008253;box-shadow:-1px -1px 3px rgba(0,0,0,0.1),7px 7px 10px rgba(0,0,0,0.4);}
.sb-container div:nth-child(8){background-color:#3277b5;box-shadow:-1px -1px 3px rgba(0,0,0,0.1),8px 8px 12px rgba(0,0,0,0.4);}
.sb-container div:nth-child(9){background-color:#4c549f;box-shadow:-1px -1px 3px rgba(0,0,0,0.1),9px 9px 14px rgba(0,0,0,0.4);}
.sb-container div:nth-child(10){background-color:#764394;box-shadow:-1px -1px 3px rgba(0,0,0,0.1),10px 10px 16px rgba(0,0,0,0.4);}
.sb-container div:nth-child(11){background-color:#ca0d86;box-shadow:-1px -1px 3px rgba(0,0,0,0.1),11px 11px 18px rgba(0,0,0,0.4);}
.sb-container div:last-child{background:#645b5c url(../images/cover.jpg) repeat center center;box-shadow:-1px -1px 3px rgba(0,0,0,0.2),12px 12px 20px rgba(0,0,0,0.6),inset 2px 2px 0 rgba(255,255,255,0.1);}
.sb-container div:last-child:after{content:'';position:absolute;bottom:15px;left:15px;width:20px;height:20px;border-radius:50%;background:#dddddd;background:-moz-linear-gradient(-45deg,#dddddd 0%,#58535e 48%,#889396 100%);background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,#dddddd),color-stop(48%,#58535e),color-stop(100%,#889396));background:-webkit-linear-gradient(-45deg,#dddddd 0%,#58535e 48%,#889396 100%);background:-o-linear-gradient(-45deg,#dddddd 0%,#58535e 48%,#889396 100%);background:-ms-linear-gradient(-45deg,#dddddd 0%,#58535e 48%,#889396 100%);background:linear-gradient(135deg,#dddddd 0%,#58535e 48%,#889396 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd',endColorstr='#889396',GradientType=1 );box-shadow:-1px -1px 1px rgba(0,0,0,0.5),1px 1px 1px rgba(255,255,255,0.1);}
.sb-container div h4{color:rgba(255,255,255,0.9);text-shadow:1px 1px 1px rgba(0,0,0,0.2);font-weight:700;font-size:16px;text-transform:uppercase;border-top:1px dashed rgba(0,0,0,0.1);border-bottom:1px dashed rgba(0,0,0,0.1);margin:5px;padding:5px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.sb-container div:last-child h4{background:rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(255,255,255,0.1);}
.sb-container div:last-child h5{font-size:50px;white-space:nowrap;text-align:left;margin:0;padding:0;position:absolute;line-height:50px;top:0px;left:0px;color:#111;text-shadow:-1px -1px 1px rgba(255,255,255,0.1);text-transform:uppercase;-webkit-transform:rotate(-90deg) translateX(-157%) translateY(73px);-moz-transform:rotate(-90deg) translateX(-157%) translateY(73px);-o-transform:rotate(-90deg) translateX(-157%) translateY(73px);-ms-transform:rotate(-90deg) translateX(-157%) translateY(73px);transform:rotate(-90deg) translateX(-157%) translateY(73px);-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
span.sb-icon{display:block;height:70px;width:70px;margin:20px auto;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
span.sb-icon:before{font-family:'icons';font-style:normal;font-weight:normal;speak:none;display:block;text-decoration:inherit;text-align:center;text-shadow:1px 1px 1px rgba(127,127,127,0.3);line-height:64px;width:100%;font-size:60px;color:#000;text-shadow:0 0 1px #000;}
.icon-cog:before{content:'\35';}
/* '5' */
.icon-flight:before{content:'\37';}
/* '7' */
.icon-eye:before{content:'\34';}
/* '4' */
.icon-install:before{content:'\39';}
/* '9' */
.icon-bag:before{content:'\36';}
/* '6' */
.icon-globe:before{content:'\38';}
/* '8' */
.icon-picture:before{content:'\32';}
/* '2' */
.icon-video:before{content:'\30';}
/* '0' */
.icon-download:before{content:'\41';}
/* 'A' */
.icon-mobile:before{content:'\42';}
/* 'B' */
.icon-camera:before{content:'\33';}
/* '3' */
分享到QQ
分享到微博
微信扫一扫
