以下是 jquery酷炫3D下拉菜单插件特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<title></title>
</head>
<body>
<header class="header">
<hgroup>
<h2><p align="center">适用浏览器：FireFox、Chrome. 不支持IE8、360、Opera、傲游、搜狗、Safari、世界之窗。</p></h2>
</hgroup>
</header>
<section class="demo">
<dl class="list nigiri">
<dt>Nigiri</dt>
<dd><a href="#">Maguro</a></dd>
<dd><a href="#">Sake</a></dd>
<dd><a href="#">Unagi</a></dd>
<dd><a href="#">Buri</a></dd>
<dd><a href="#">Suzuki</a></dd>
<dd><a href="#">Saba</a></dd>
<dd><a href="#">Iwashi</a></dd>
<dd><a href="#">Kohada</a></dd>
<dd><a href="#">Hirame</a></dd>
<dd><a href="#">Tobiwo</a></dd>
</dl>
<dl class="list maki">
<dt>Maki</dt>
<dd><a href="#">Ana-kyu</a></dd>
<dd><a href="#">Chutoro</a></dd>
<dd><a href="#">Kaiware</a></dd>
<dd><a href="#">Kampyo</a></dd>
<dd><a href="#">Kappa</a></dd>
<dd><a href="#">Natto</a></dd>
<dd><a href="#">Negitoro</a></dd>
<dd><a href="#">Oshinko</a></dd>
<dd><a href="#">Otoro</a></dd>
<dd><a href="#">Tekka</a></dd>
</dl>
<dl class="list sashimi">
<dt>Sashimi</dt>
<dd><a href="#">Maguro</a></dd>
<dd><a href="#">Toro</a></dd>
<dd><a href="#">Ebi</a></dd>
<dd><a href="#">Saba</a></dd>
<dd><a href="#">Ika</a></dd>
<dd><a href="#">Tako</a></dd>
<dd><a href="#">Tomago</a></dd>
<dd><a href="#">Kani</a></dd>
<dd><a href="#">Katsuo</a></dd>
<dd><a href="#">Maguro</a></dd>
</dl>
<a href="#" class="toggle">Toggle</a>
<div style="text-align:center">
</div>
</section>
<div class="warning">
<div class="message">
<h1>CSS 3D Not Detected :(</h1>
<p>I couldn't detect your browser's CSS 3D capabilities. If I'm wrong, please <a href="http://www.baidu.com" target="_blank">file an issue</a>, otherwise, try a <a href="http://www.baidu.com/" target="_blank">sexier browser</a></p>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/makisu.js"></script>
<script>
// The `enabled` flag will be `false` if CSS 3D isn't available
if ( $.fn.makisu.enabled ) {
var $sashimi = $( '.sashimi' );
var $nigiri = $( '.nigiri' );
var $maki = $( '.maki' );
// Create Makisus
$nigiri.makisu({
selector: 'dd',
overlap: 0.85,
speed: 1.7
});
$maki.makisu({
selector: 'dd',
overlap: 0.6,
speed: 0.85
});
$sashimi.makisu({
selector: 'dd',
overlap: 0.2,
speed: 0.5
});
// Open all
$( '.list' ).makisu( 'open' );
// Toggle on click
$( '.toggle' ).on( 'click', function() {
$( '.list' ).makisu( 'toggle' );
});
// Disable all links
$( '.demo a' ).click( function( event ) {
event.preventDefault();
});
} else {
$( '.warning' ).show();
}
</script>
</body>
</html>
JS代码(makisu.js):
/** * Copyright (C) 2012 by Justin Windle * * Permission is hereby granted,free of charge,to any person obtaining a copy * of this software and associated documentation files (the "Software"),to deal * in the Software without restriction,including without limitation the rights * to use,copy,modify,merge,publish,distribute,sublicense,and/or sell * copies of the Software,and to permit persons to whom the Software is * furnished to do so,subject to the following conditions:* * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS OR * IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER * LIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */
(function($){
// Global initialisation flag var initialized = false;
// For detecting browser prefix and capabilities var el = document.createElement( 'div' );
var re = /^(Moz|(w|W)ebkit|O|ms)(?=[A-Z])/;
// Establish vendor prefix and CSS 3D support var vendor = (function(){
for ( var p in el.style ) if( re.test(p) ) return p.match(re)[0];
}
)() || '';
var canRun = vendor + 'Perspective' in el.style;
var prefix = '-' + vendor.toLowerCase() + '-';
var $this,$root,$base,$kids,$node,$item,$over,$back;
var wait,anim,last;
// Public API var api ={
// Toggle open / closed toggle:function(){
$this = $( this );
$this.makisu( $this.hasClass( 'open' ) ? 'close':'open' );
}
,// Trigger the unfold animation open:function( speed,overlap,easing ){
// Cache DOM references $this = $(this);
$root = $this.find( '.root' );
$kids = $this.find( '.node' ).not( $root );
// Establish values or fallbacks speed = utils.resolve( $this,'speed',speed );
easing = utils.resolve( $this,'easing',easing );
overlap = utils.resolve( $this,'overlap',overlap );
$kids.each( function( index,el ){
// Establish settings for this iteration anim = 'unfold' + ( !index ? '-first':'' );
last = index === $kids.length - 1;
time = speed * ( 1 - overlap );
wait = index * time;
// Cache DOM references $item = $( el );
$over = $item.find( '.over' );
// Element animation $item.css(utils.prefix({
'transform':'rotateX(180deg)','animation':anim + ' ' + speed + 's ' + easing + ' ' + wait + 's 1 normal forwards'}
));
// Shading animation happens when the next item starts if ( !last ) wait = ( index + 1 ) * time;
// Shading animation $over.css(utils.prefix({
'animation':'unfold-over ' + (speed * 0.45) + 's ' + easing + ' ' + wait + 's 1 normal forwards'}
));
}
);
// Add momentum to the container $root.css(utils.prefix({
'animation':'swing-out ' + ( $kids.length * time * 1.4 ) + 's ease-in-out 0s 1 normal forwards'}
));
$this.addClass( 'open' );
}
,// Trigger the fold animation close:function( speed,overlap,easing ){
// Cache DOM references $this = $(this);
$root = $this.find( '.root' );
$kids = $this.find( '.node' ).not( $root );
// Establish values or fallbacks speed = utils.resolve( $this,'speed',speed ) * 0.66;
easing = utils.resolve( $this,'easing',easing );
overlap = utils.resolve( $this,'overlap',overlap );
$kids.each( function( index,el ){
// Establish settings for this iteration anim = 'fold' + ( !index ? '-first':'' );
last = index === 0;
time = speed * ( 1 - overlap );
wait = ( $kids.length - index - 1 ) * time;
// Cache DOM references $item = $( el );
$over = $item.find( '.over' );
// Element animation $item.css(utils.prefix({
'transform':'rotateX(0deg)','animation':anim + ' ' + speed + 's ' + easing + ' ' + wait + 's 1 normal forwards'}
));
// Adjust delay for shading if ( !last ) wait = ( ( $kids.length - index - 2 ) * time ) + ( speed * 0.35 );
// Shading animation $over.css(utils.prefix({
'animation':'fold-over ' + (speed * 0.45) + 's ' + easing + ' ' + wait + 's 1 normal forwards'}
));
}
);
// Add momentum to the container $root.css(utils.prefix({
'animation':'swing-in ' + ( $kids.length * time * 1.0 ) + 's ease-in-out 0s 1 normal forwards'}
));
$this.removeClass( 'open' );
}
}
;
// Utils var utils ={
// Resolves argument values to defaults resolve:function( $el,key,val ){
return typeof val === 'undefined' ? $el.data( key ):val;
}
,// Prefixes a hash of styles with the current vendor prefix:function( style ){
for ( var key in style ){
style[ prefix + key ] = style[ key ];
}
return style;
}
,// Inserts rules into the document styles inject:function( rule ){
try{
var style = document.createElement( 'style' );
style.innerHTML = rule;
document.getElementsByTagName( 'head' )[0].appendChild( style );
}
catch ( error ){
}
}
}
;
// Element templates var markup ={
node:'<span class="node"/>',back:'<span class="face back"/>',over:'<span class="face over"/>'}
;
// Plugin definition $.fn.makisu = function( options ){
// Notify if 3D isn't available if ( !canRun ){
var message = 'Failed to detect CSS 3D support';
if( console && console.warn ){
// Print warning to the console console.warn( message );
// Trigger errors on elements this.each( function(){
$( this ).trigger( 'error',message );
}
);
}
return;
}
// Fires only once if ( !initialized ){
initialized = true;
// Unfold utils.inject( '@' + prefix + 'keyframes unfold{
' + '0%{
' + prefix + 'transform:rotateX(180deg);
}
' + '50%{
' + prefix + 'transform:rotateX(-30deg);
}
' + '100%{
' + prefix + 'transform:rotateX(0deg);
}
' + '}
');
// Unfold (first item) utils.inject( '@' + prefix + 'keyframes unfold-first{
' + '0%{
' + prefix + 'transform:rotateX(-90deg);
}
' + '50%{
' + prefix + 'transform:rotateX(60deg);
}
' + '100%{
' + prefix + 'transform:rotateX(0deg);
}
' + '}
');
// Fold utils.inject( '@' + prefix + 'keyframes fold{
' + '0%{
' + prefix + 'transform:rotateX(0deg);
}
' + '100%{
' + prefix + 'transform:rotateX(180deg);
}
' + '}
');
// Fold (first item) utils.inject( '@' + prefix + 'keyframes fold-first{
' + '0%{
' + prefix + 'transform:rotateX(0deg);
}
' + '100%{
' + prefix + 'transform:rotateX(-180deg);
}
' + '}
');
// Swing out utils.inject( '@' + prefix + 'keyframes swing-out{
' + '0%{
' + prefix + 'transform:rotateX(0deg);
}
' + '30%{
' + prefix + 'transform:rotateX(-30deg);
}
' + '60%{
' + prefix + 'transform:rotateX(15deg);
}
' + '100%{
' + prefix + 'transform:rotateX(0deg);
}
' + '}
');
// Swing in utils.inject( '@' + prefix + 'keyframes swing-in{
' + '0%{
' + prefix + 'transform:rotateX(0deg);
}
' + '50%{
' + prefix + 'transform:rotateX(-10deg);
}
' + '90%{
' + prefix + 'transform:rotateX(15deg);
}
' + '100%{
' + prefix + 'transform:rotateX(0deg);
}
' + '}
');
// Shading (unfold) utils.inject( '@' + prefix + 'keyframes unfold-over{
' + '0%{
opacity:1.0;
}
' + '100%{
opacity:0.0;
}
' + '}
');
// Shading (fold) utils.inject( '@' + prefix + 'keyframes fold-over{
' + '0%{
opacity:0.0;
}
' + '100%{
opacity:1.0;
}
' + '}
');
// Node styles utils.inject( '.node{
' + 'position:relative;
' + 'display:block;
' + '}
');
// Face styles utils.inject( '.face{
' + 'pointer-events:none;
' + 'position:absolute;
' + 'display:block;
' + 'height:100%;
' + 'width:100%;
' + 'left:0;
' + 'top:0;
' + '}
');
}
// Merge options & defaults var opts = $.extend({
}
,$.fn.makisu.defaults,options );
// Extract api method arguments var args = Array.prototype.slice.call( arguments,1 );
// Main plugin loop return this.each( function (){
// If the user is calling a method... if ( api[ options ] ){
return api[ options ].apply( this,args );
}
// Store options in view $this = $( this ).data( opts );
// Only proceed if the scene hierarchy isn't already built if ( !$this.data( 'initialized' ) ){
$this.data( 'initialized',true );
// Select the first level of matching child elements $kids = $this.children( opts.selector );
// Build a scene graph for elements $root = $( markup.node ).addClass( 'root' );
$base = $root;
// Process each element and insert into hierarchy $kids.each( function( index,el ){
$item = $( el );
// Which animation should this node use? anim = 'fold' + ( !index ? '-first':'' );
// Since we're adding absolutely positioned children $item.css( 'position','relative' );
// Give the item some depth to avoid clipping artefacts $item.css(utils.prefix({
'transform-style':'preserve-3d','transform':'translateZ(-0.1px)'}
));
// Create back face $back = $( markup.back );
$back.css( 'background',$item.css( 'background' ) );
$back.css(utils.prefix({
'transform':'translateZ(-0.1px)'}
));
// Create shading $over = $( markup.over );
$over.css(utils.prefix({
'transform':'translateZ(0.1px)'}
));
$over.css({
'background':opts.shading,'opacity':0.0}
);
// Begin folded $node = $( markup.node ).append( $item );
$node.css(utils.prefix({
'transform-origin':'50% 0%','transform-style':'preserve-3d','animation':anim + ' 1ms linear 0s 1 normal forwards'}
));
// Build display list $item.append( $over );
$item.append( $back );
$base.append( $node );
// Use as parent in next iteration $base = $node;
}
);
// Set root transform settings $root.css(utils.prefix({
'transform-origin':'50% 0%','transform-style':'preserve-3d'}
));
// Apply perspective $this.css(utils.prefix({
'transform':'perspective(' + opts.perspective + 'px)'}
));
// Display the scene $this.append( $root );
}
}
);
}
;
// Default options $.fn.makisu.defaults ={
// Perspective to apply to rotating elements perspective:1200,// Default shading to apply (null => no shading) shading:'rgba(0,0,0,0.12)',// Area of rotation (fraction or pixel value) selector:null,// Fraction of speed (0-1) overlap:0.6,// Duration per element speed:0.8,// Animation curve easing:'ease-in-out'}
;
$.fn.makisu.enabled = canRun;
}
)( jQuery );
JS代码(makisu.min.js):
/** * Copyright (C) 2012 by Justin Windle * * Permission is hereby granted,free of charge,to any person obtaining a copy * of this software and associated documentation files (the "Software"),to deal * in the Software without restriction,including without limitation the rights * to use,copy,modify,merge,publish,distribute,sublicense,and/or sell * copies of the Software,and to permit persons to whom the Software is * furnished to do so,subject to the following conditions:* * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS OR * IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER * LIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. */
(function(e){
var t=!1,n=document.createElement("div"),r=/^(Moz|(w|W)ebkit|O|ms)(?=[A-Z])/,i=function(){
for(var e in n.style)if(r.test(e))return e.match(r)[0]}
()||"",s=i+"Perspective"in n.style,o="-"+i.toLowerCase()+"-",u,a,f,l,c,h,p,d,v,m,g,y={
toggle:function(){
u=e(this),u.makisu(u.hasClass("open")?"close":"open")}
,open:function(t,n,r){
u=e(this),a=u.find(".root"),l=u.find(".node").not(a),t=b.resolve(u,"speed",t),r=b.resolve(u,"easing",r),n=b.resolve(u,"overlap",n),l.each(function(i,s){
m="unfold"+(i?"":"-first"),g=i===l.length-1,time=t*(1-n),v=i*time,h=e(s),p=h.find(".over"),h.css(b.prefix({
transform:"rotateX(180deg)",animation:m+" "+t+"s "+r+" "+v+"s 1 normal forwards"}
)),g||(v=(i+1)*time),p.css(b.prefix({
animation:"unfold-over "+t*.45+"s "+r+" "+v+"s 1 normal forwards"}
))}
),a.css(b.prefix({
animation:"swing-out "+l.length*time*1.4+"s ease-in-out 0s 1 normal forwards"}
)),u.addClass("open")}
,close:function(t,n,r){
u=e(this),a=u.find(".root"),l=u.find(".node").not(a),t=b.resolve(u,"speed",t)*.66,r=b.resolve(u,"easing",r),n=b.resolve(u,"overlap",n),l.each(function(i,s){
m="fold"+(i?"":"-first"),g=i===0,time=t*(1-n),v=(l.length-i-1)*time,h=e(s),p=h.find(".over"),h.css(b.prefix({
transform:"rotateX(0deg)",animation:m+" "+t+"s "+r+" "+v+"s 1 normal forwards"}
)),g||(v=(l.length-i-2)*time+t*.35),p.css(b.prefix({
animation:"fold-over "+t*.45+"s "+r+" "+v+"s 1 normal forwards"}
))}
),a.css(b.prefix({
animation:"swing-in "+l.length*time*1+"s ease-in-out 0s 1 normal forwards"}
)),u.removeClass("open")}
}
,b={
resolve:function(e,t,n){
return typeof n=="undefined"?e.data(t):n}
,prefix:function(e){
for(var t in e)e[o+t]=e[t];
return e}
,inject:function(e){
try{
var t=document.createElement("style");
t.innerHTML=e,document.getElementsByTagName("head")[0].appendChild(t)}
catch(n){
}
}
}
,w={
node:'<span class="node"/>',back:'<span class="face back"/>',over:'<span class="face over"/>'}
;
e.fn.makisu=function(n){
if(!s){
var r="Failed to detect CSS 3D support";
console&&console.warn&&(console.warn(r),this.each(function(){
e(this).trigger("error",r)}
));
return}
t||(t=!0,b.inject("@"+o+"keyframes unfold{
"+"0%{
"+o+"transform:rotateX(180deg);
}
"+"50%{
"+o+"transform:rotateX(-30deg);
}
"+"100%{
"+o+"transform:rotateX(0deg);
}
"+"}
"),b.inject("@"+o+"keyframes unfold-first{
"+"0%{
"+o+"transform:rotateX(-90deg);
}
"+"50%{
"+o+"transform:rotateX(60deg);
}
"+"100%{
"+o+"transform:rotateX(0deg);
}
"+"}
"),b.inject("@"+o+"keyframes fold{
"+"0%{
"+o+"transform:rotateX(0deg);
}
"+"100%{
"+o+"transform:rotateX(180deg);
}
"+"}
"),b.inject("@"+o+"keyframes fold-first{
"+"0%{
"+o+"transform:rotateX(0deg);
}
"+"100%{
"+o+"transform:rotateX(-180deg);
}
"+"}
"),b.inject("@"+o+"keyframes swing-out{
"+"0%{
"+o+"transform:rotateX(0deg);
}
"+"30%{
"+o+"transform:rotateX(-30deg);
}
"+"60%{
"+o+"transform:rotateX(15deg);
}
"+"100%{
"+o+"transform:rotateX(0deg);
}
"+"}
"),b.inject("@"+o+"keyframes swing-in{
"+"0%{
"+o+"transform:rotateX(0deg);
}
"+"50%{
"+o+"transform:rotateX(-10deg);
}
"+"90%{
"+o+"transform:rotateX(15deg);
}
"+"100%{
"+o+"transform:rotateX(0deg);
}
"+"}
"),b.inject("@"+o+"keyframes unfold-over{
"+"0%{
opacity:1.0;
}
"+"100%{
opacity:0.0;
}
"+"}
"),b.inject("@"+o+"keyframes fold-over{
"+"0%{
opacity:0.0;
}
"+"100%{
opacity:1.0;
}
"+"}
"),b.inject(".node{
position:relative;
display:block;
}
"),b.inject(".face{
pointer-events:none;
position:absolute;
display:block;
height:100%;
width:100%;
left:0;
top:0;
}
"));
var i=e.extend({
}
,e.fn.makisu.defaults,n),v=Array.prototype.slice.call(arguments,1);
return this.each(function(){
if(y[n])return y[n].apply(this,v);
u=e(this).data(i),u.data("initialized")||(u.data("initialized",!0),l=u.children(i.selector),a=e(w.node).addClass("root"),f=a,l.each(function(t,n){
h=e(n),m="fold"+(t?"":"-first"),h.css("position","relative"),h.css(b.prefix({
"transform-style":"preserve-3d",transform:"translateZ(-0.1px)"}
)),d=e(w.back),d.css("background",h.css("background")),d.css(b.prefix({
transform:"translateZ(-0.1px)"}
)),p=e(w.over),p.css(b.prefix({
transform:"translateZ(0.1px)"}
)),p.css({
background:i.shading,opacity:0}
),c=e(w.node).append(h),c.css(b.prefix({
"transform-origin":"50% 0%","transform-style":"preserve-3d",animation:m+" 1ms linear 0s 1 normal forwards"}
)),h.append(p),h.append(d),f.append(c),f=c}
),a.css(b.prefix({
"transform-origin":"50% 0%","transform-style":"preserve-3d"}
)),u.css(b.prefix({
transform:"perspective("+i.perspective+"px)"}
)),u.append(a))}
)}
,e.fn.makisu.defaults={
perspective:1200,shading:"rgba(0,0,0,0.12)",selector:null,overlap:.6,speed:.8,easing:"ease-in-out"}
,e.fn.makisu.enabled=s}
)(jQuery);
CSS代码(style.css):
html,body{-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;background:#ffffff;background:-moz-radial-gradient(center,ellipse cover,#ffffff 0%,#ffffff 26%,#f5f5f5 59%,#f5f5f5 77%,#cecece 100%);background:-webkit-gradient(radial,center center,0,center center,100%,color-stop(0%,#ffffff),color-stop(26%,#ffffff),color-stop(59%,#f5f5f5),color-stop(77%,#f5f5f5),color-stop(100%,#cecece));background:-webkit-radial-gradient(center,ellipse cover,#ffffff 0%,#ffffff 26%,#f5f5f5 59%,#f5f5f5 77%,#cecece 100%);background:-o-radial-gradient(center,ellipse cover,#ffffff 0%,#ffffff 26%,#f5f5f5 59%,#f5f5f5 77%,#cecece 100%);background:-ms-radial-gradient(center,ellipse cover,#ffffff 0%,#ffffff 26%,#f5f5f5 59%,#f5f5f5 77%,#cecece 100%);background:radial-gradient(ellipse at center,#ffffff 0%,#ffffff 26%,#f5f5f5 59%,#f5f5f5 77%,#cecece 100%);font-family:'Days One',sans-serif;overflow:hidden;padding:0;margin:0;height:100%;}
body:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDRCNjE4NDcxMDgzMTFFMkFGQkM4MzE4NzI4RjhBMkQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDRCNjE4NDgxMDgzMTFFMkFGQkM4MzE4NzI4RjhBMkQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpENEI2MTg0NTEwODMxMUUyQUZCQzgzMTg3MjhGOEEyRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpENEI2MTg0NjEwODMxMUUyQUZCQzgzMTg3MjhGOEEyRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp/mixwAABMrSURBVHjaNNrnrptV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);position:absolute;content:'';opacity:0.8;height:100%;width:100%;left:0;top:0;}
a{-webkit-transition:all 250ms cubic-bezier(0.230,1.000,0.320,1.000);-moz-transition:all 250ms cubic-bezier(0.230,1.000,0.320,1.000);-ms-transition:all 250ms cubic-bezier(0.230,1.000,0.320,1.000);-o-transition:all 250ms cubic-bezier(0.230,1.000,0.320,1.000);transition:all 250ms cubic-bezier(0.230,1.000,0.320,1.000);text-decoration:none;}
.header{text-align:center;position:absolute;color:#333;width:100%;top:9%;}
.header h1{letter-spacing:-1px;text-shadow:-2px -1px 1px #fff,1px 2px 2px rgba(0,0,0,0.2);font-weight:300;font-size:36px;margin:0;}
.header h2{text-transform:uppercase;text-shadow:-2px -1px 1px #fff,1px 1px 1px rgba(0,0,0,0.15);font-weight:300;font-size:12px;color:rgba(0,0,0,0.7);margin:0;}
.demo:after{box-shadow:0 1px 16px rgba(0,0,0,0.15);background:#1b1b1b;position:absolute;content:'';height:10px;width:100%;top:0;}
/* List styles */
.list{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;text-transform:uppercase;position:absolute;margin-left:-140px;margin-top:-280px;top:55%;}
.list a{display:block;color:#fff;}
.list a:hover{text-indent:20px;}
.list dt,.list dd{text-indent:10px;line-height:55px;background:#E0FBAC;margin:0;height:55px;width:270px;color:#fff;}
.list dt{/* Since we're hiding elements behind here,we need it in 3d */
-webkit-transform:translateZ(0.3px);-moz-transform:translateZ(0.3px);-ms-transform:translateZ(0.3px);-o-transform:translateZ(0.3px);transform:translateZ(0.3px);text-shadow:1px 1px 2px rgba(0,0,0,0.2);font-size:15px;}
.list dd{border-top:1px dashed rgba(255,255,255,0.3);line-height:35px;font-size:11px;height:35px;margin:0;}
/* UI */
.toggle{box-shadow:0 1px 4px rgba(0,0,0,0.15);border-radius:3px;text-transform:uppercase;letter-spacing:-1px;line-height:50px;margin-left:-70px;margin-top:-20px;background:#2b2b2b;text-align:center;font-size:12px;position:absolute;height:50px;bottom:10%;width:140px;color:#fff;left:50%;}
.toggle:hover{background:#E42692;}
/* No CSS 3D support warning */
.warning{-webkit-transform:translateZ(2px);-moz-transform:translateZ(2px);-ms-transform:translateZ(2px);-o-transform:translateZ(2px);transform:translateZ(2px);background:rgba(255,255,255,0.6);position:fixed;display:none;z-index:999;height:100%;width:100%;left:0;top:0;}
.warning .message{box-shadow:0 1px 8px rgba(0,0,0,0.6);border-radius:5px;text-align:center;margin-left:-150px;margin-top:-60px;line-height:1.5;background:#222;font-size:12px;position:absolute;padding:10px;width:280px;color:#fff;left:50%;top:50%;}
.warning .message h1{font-weight:300;font-size:14px;}
.warning .message a{text-decoration:none;color:#73C8A9;}
/* Individual styles */
.sashimi dt,.sashimi dd,.sashimi a{background:#73C8A9;}
.nigiri dt,.nigiri dd,.nigiri a{background:#E32551;}
.maki dt,.maki dd,.maki a{background:#FFC219;}
.sashimi a:hover{background:#61c19e;}
.nigiri a:hover{background:#d31b46;}
.maki a:hover{background:#ffbb00;}
.nigiri{-webkit-transform:perspective(1200px) rotateY(40deg) !important;-moz-transform:perspective(1200px) rotateY(40deg) !important;-ms-transform:perspective(1200px) rotateY(40deg) !important;-o-transform:perspective(1200px) rotateY(40deg) !important;transform:perspective(1200px) rotateY(40deg) !important;-webkit-transform-origin:110% 25%;-moz-transform-origin:110% 25%;-ms-transform-origin:110% 25%;-o-transform-origin:110% 25%;transform-origin:110% 25%;left:20%;}
.maki{-webkit-transform:perspective(600px) translateZ(1px) !important;-moz-transform:perspective(600px) translateZ(1px) !important;-ms-transform:perspective(600px) translateZ(1px) !important;-o-transform:perspective(600px) translateZ(1px) !important;transform:perspective(600px) translateZ(1px) !important;left:50%;}
.sashimi{-webkit-transform:perspective(1200px) rotateY(-40deg) !important;-moz-transform:perspective(1200px) rotateY(-40deg) !important;-ms-transform:perspective(1200px) rotateY(-40deg) !important;-o-transform:perspective(1200px) rotateY(-40deg) !important;transform:perspective(1200px) rotateY(-40deg) !important;-webkit-transform-origin:-10% 25%;-moz-transform-origin:-10% 25%;-ms-transform-origin:-10% 25%;-o-transform-origin:-10% 25%;transform-origin:-10% 25%;left:80%;}
分享到QQ
分享到微博
微信扫一扫
