以下是 CSS3区域全屏放大动画特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3区域全屏放大动画特效</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/demo_styles.css">
<link rel="stylesheet" href="css/demo1.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body class="dm-demo1">
<!-- Top Navigation -->
<div class="designmodo-nav">
<a class="button demo1 active" href="index.html">Demo 1</a>
<a class="button demo2" href="demo2.html">Demo 2</a>
<a class="button demo3" href="demo3.html">Demo 3</a>
<a class="button demo4" href="demo4.html">Demo 4</a>
</div>
<!-- Demo Navigation -->
<nav class="nav clearfix">
<button class="nav-el" id="el-topleft" data-id="ov-topleft"><span class="icon-heart"></span></button>
<button class="nav-el" id="el-topright" data-id="ov-topright"><span class="icon-cloud"></span></button>
<button class="nav-el" id="el-btmleft" data-id="ov-btmleft"><span class="icon-location"></span></button>
<button class="nav-el" id="el-btmright" data-id="ov-btmright"><span class="icon-search"></span></button>
</nav>
<!-- Overlay (hidden by default)-->
<section class="overlay" id="ov-topleft">
<div class="wrap">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。<br>来源：<a href="http://13141618.taobao.com/" target="_blank">程序员设计师联盟淘宝店</a></p>
</div>
<button class="close"><span class="mfg-cancel"></span></button>
</section>
<section class="overlay" id="ov-topright">
<div class="wrap">
<h1>Section 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。<br>来源：<a href="http://13141618.taobao.com/" target="_blank">程序员设计师联盟淘宝店</a></p>
</div>
<button class="close"><span class="mfg-cancel"></span></button>
</section>
<section class="overlay" id="ov-btmleft">
<div class="wrap">
<h1>Section 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。<br>来源：<a href="http://13141618.taobao.com/" target="_blank">程序员设计师联盟淘宝店</a></p>
</div>
<button class="close"><span class="mfg-cancel"></span></button>
</section>
<section class="overlay" id="ov-btmright">
<div class="wrap">
<h1>Section 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。<br>来源：<a href="http://13141618.taobao.com/" target="_blank">程序员设计师联盟淘宝店</a></p>
</div>
<button class="close"><span class="mfg-cancel"></span></button>
</section>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/demo.js"></script>
</body>
</html>
JS代码(demo.js):
/* Variables */
var AnimEnd = 'animationend webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd';
var nav = $('.nav');
var navButton = $('.nav-el');
var overlay = $('.overlay');
/* On menu button click event */
$(navButton).click(function(event){
/* This conditional statement is here to prevent clicks on inactive buttons on IE10,as pointer-events cannot be applied on non-SVG elements */
if ($(this).hasClass("inactive")){
event.preventDefault();
}
else{
/* Remove old previous classes */
$(navButton).removeClass('inactive_reverse active_reverse');
$(nav).removeClass('fx-box_rotate fx-box_rotate_reverse');
$(overlay).removeClass('active active_reverse');
/* Add classes on defined elements */
$(this).siblings().addClass('inactive');
$(this).addClass('active');
$(nav).addClass('fx-box_rotate');
/* Activate related overlay */
var o_target = $(this).data('id');
$('#'+o_target).addClass('active');
/* Prevent scrolling */
$("body").addClass('noscroll');
}
}
);
/* On close button click event */
$(".close").click(function(){
/* Add *_reverse classes */
$('.active',nav).removeClass('active').addClass('active_reverse');
$('.inactive',nav).addClass('inactive_reverse');
$(nav).addClass('fx-box_rotate_reverse');
$(this).parent().addClass('active_reverse');
/* Remove .noscroll and .inactive when animation is finished */
$('.inactive_reverse').bind(AnimEnd,function(){
$('body').removeClass('noscroll');
$(navButton).removeClass('inactive');
$('.inactive_reverse').unbind(AnimEnd);
}
);
}
);
JS代码(plugins.js):
// Avoid `console` errors in browsers that lack a console.(function(){
var method;
var noop = function (){
}
;
var methods = [ 'assert','clear','count','debug','dir','dirxml','error','exception','group','groupCollapsed','groupEnd','info','log','markTimeline','profile','profileEnd','table','time','timeEnd','timeStamp','trace','warn' ];
var length = methods.length;
var console = (window.console = window.console ||{
}
);
while (length--){
method = methods[length];
// Only stub undefined methods. if (!console[method]){
console[method] = noop;
}
}
}
());
// Place any jQuery/helper plugins in here.if (!Modernizr.csstransforms3d){
document.getElementsByTagName('body')[0].className+=' browser_not_supported'}
CSS代码(demo4.css):
/******************************.nav anim + reverse******************************/
@keyframes fx-box_rotate{50%{transform:rotate(225deg);}
100%{transform:rotate(225deg);}
}
@keyframes fx-box_rotate-reverse{0%{transform:rotate(225deg);}
100%{transform:rotate(0);}
}
@-moz-keyframes fx-box_rotate{50%{-moz-transform:rotate(225deg);}
100%{-moz-transform:rotate(225deg);}
}
@-moz-keyframes fx-box_rotate-reverse{0%{-moz-transform:rotate(225deg);}
100%{-moz-transform:rotate(0);}
}
@-webkit-keyframes fx-box_rotate{50%{-webkit-transform:rotate(225deg);}
100%{-webkit-transform:rotate(225deg);}
}
@-webkit-keyframes fx-box_rotate-reverse{0%{-webkit-transform:rotate(225deg);}
100%{-webkit-transform:rotate(0);}
}
.nav.fx-box_rotate{animation:fx-box_rotate 1.6s 1 ease-in-out backwards;-moz-animation:fx-box_rotate 1.6s 1 ease-in-out backwards;-webkit-animation:fx-box_rotate 1.6s 1 ease-in-out backwards;}
.nav.fx-box_rotate_reverse{animation:fx-box_rotate-reverse .9s .7s 1 ease-in-out backwards;-moz-animation:fx-box_rotate-reverse .9s .7s 1 ease-in-out backwards;-webkit-animation:fx-box_rotate-reverse .9s .7s 1 ease-in-out backwards;}
/******************************.nav-el.active anim******************************/
@keyframes fx-el_topleft-active{0%{transform:translate3d(0%,0%,0) scale(1);}
35%{transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);}
40%{color:transparent;}
100%{transform:translate3d(55.1%,55.1%,-150px) scale(20);color:transparent;}
}
@keyframes fx-el_topright-active{0%{transform:translate3d(0%,0%,0) scale(1);}
35%{transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);}
40%{color:transparent;}
100%{transform:translate3d(-55.1%,55.1%,0) scale(20);color:transparent;}
}
@keyframes fx-el_btmleft-active{0%{transform:translate3d(0%,0%,0) scale(1);}
35%{transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);}
40%{color:transparent;}
100%{transform:translate3d(55.1%,-55.1%,0) scale(20);color:transparent;}
}
@keyframes fx-el_btmright-active{0%{transform:translate3d(0%,0%,0) scale(1);}
35%{transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);}
40%{color:transparent;}
100%{transform:translate3d(-55.1%,-55.1%,0) scale(20);color:transparent;}
}
@-moz-keyframes fx-el_topleft-active{0%{-moz-transform:translate3d(0%,0%,0) scale(1);}
35%{-moz-transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);}
40%{color:transparent;}
100%{-moz-transform:translate3d(55.1%,55.1%,-150px) scale(20);color:transparent;}
}
@-moz-keyframes fx-el_topright-active{0%{-moz-transform:translate3d(0%,0%,0) scale(1);}
35%{-moz-transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);}
40%{color:transparent;}
100%{-moz-transform:translate3d(-55.1%,55.1%,0) scale(20);color:transparent;}
}
@-moz-keyframes fx-el_btmleft-active{0%{-moz-transform:translate3d(0%,0%,0) scale(1);}
35%{-moz-transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);}
40%{color:transparent;}
100%{-moz-transform:translate3d(55.1%,-55.1%,0) scale(20);color:transparent;}
}
@-moz-keyframes fx-el_btmright-active{0%{-moz-transform:translate3d(0%,0%,0) scale(1);}
35%{-moz-transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);}
40%{color:transparent;}
100%{-moz-transform:translate3d(-55.1%,-55.1%,0) scale(20);color:transparent;}
}
@-webkit-keyframes fx-el_topleft-active{0%{-webkit-transform:translate3d(0%,0%,0) scale(1);}
35%{-webkit-transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);}
40%{color:transparent;}
100%{-webkit-transform:translate3d(55.1%,55.1%,-150px) scale(20);color:transparent;}
}
@-webkit-keyframes fx-el_topright-active{0%{-webkit-transform:translate3d(0%,0%,0) scale(1);}
35%{-webkit-transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);}
40%{color:transparent;}
100%{-webkit-transform:translate3d(-55.1%,55.1%,0) scale(20);color:transparent;}
}
@-webkit-keyframes fx-el_btmleft-active{0%{-webkit-transform:translate3d(0%,0%,0) scale(1);}
35%{-webkit-transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);}
40%{color:transparent;}
100%{-webkit-transform:translate3d(55.1%,-55.1%,0) scale(20);color:transparent;}
}
@-webkit-keyframes fx-el_btmright-active{0%{-webkit-transform:translate3d(0%,0%,0) scale(1);}
35%{-webkit-transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);}
40%{color:transparent;}
100%{-webkit-transform:translate3d(-55.1%,-55.1%,0) scale(20);color:transparent;}
}
#el-topleft.active{animation:fx-el_topleft-active 1.6s 1 ease-in-out forwards;-moz-animation:fx-el_topleft-active 1.6s 1 ease-in-out forwards;-webkit-animation:fx-el_topleft-active 1.6s 1 ease-in-out forwards;}
#el-topright.active{animation:fx-el_topright-active 1.6s 1 ease-in-out forwards;-moz-animation:fx-el_topright-active 1.6s 1 ease-in-out forwards;-webkit-animation:fx-el_topright-active 1.6s 1 ease-in-out forwards;}
#el-btmleft.active{animation:fx-el_btmleft-active 1.6s 1 ease-in-out forwards;-moz-animation:fx-el_btmleft-active 1.6s 1 ease-in-out forwards;-webkit-animation:fx-el_btmleft-active 1.6s 1 ease-in-out forwards;}
#el-btmright.active{animation:fx-el_btmright-active 1.6s 1 ease-in-out forwards;-moz-animation:fx-el_btmright-active 1.6s 1 ease-in-out forwards;-webkit-animation:fx-el_btmright-active 1.6s 1 ease-in-out forwards;}
/******************************.nav-el.inactive anim******************************/
@keyframes fx-el_topleft-inactive{0%{transform:translate3d(0%,0%,0);}
50%{opacity:1;}
100%{transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
}
@keyframes fx-el_topright-inactive{0%{transform:translate3d(0%,0%,0);}
50%{opacity:1;}
100%{transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
}
@keyframes fx-el_btmleft-inactive{0%{transform:translate3d(0%,0%,0);}
50%{opacity:1;}
100%{transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
}
@keyframes fx-el_btmright-inactive{0%{transform:translate3d(0%,0%,0);}
50%{opacity:1;}
100%{transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
}
@-moz-keyframes fx-el_topleft-inactive{0%{-moz-transform:translate3d(0%,0%,0);}
50%{opacity:1;}
100%{-moz-transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
}
@-moz-keyframes fx-el_topright-inactive{0%{-moz-transform:translate3d(0%,0%,0);}
50%{opacity:1;}
100%{-moz-transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
}
@-moz-keyframes fx-el_btmleft-inactive{0%{-moz-transform:translate3d(0%,0%,0);}
50%{opacity:1;}
100%{-moz-transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
}
@-moz-keyframes fx-el_btmright-inactive{0%{-moz-transform:translate3d(0%,0%,0);}
50%{opacity:1;}
100%{-moz-transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
}
@-webkit-keyframes fx-el_topleft-inactive{0%{-webkit-transform:translate3d(0%,0%,0);}
50%{opacity:1;}
100%{-webkit-transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
}
@-webkit-keyframes fx-el_topright-inactive{0%{-webkit-transform:translate3d(0%,0%,0);}
50%{opacity:1;}
100%{-webkit-transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
}
@-webkit-keyframes fx-el_btmleft-inactive{0%{-webkit-transform:translate3d(0%,0%,0);}
50%{opacity:1;}
100%{-webkit-transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
}
@-webkit-keyframes fx-el_btmright-inactive{0%{-webkit-transform:translate3d(0%,0%,0);}
50%{opacity:1;}
100%{-webkit-transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
}
#el-topleft.inactive{animation:fx-el_topleft-inactive .6s 1 ease-in-out forwards;-moz-animation:fx-el_topleft-inactive .6s 1 ease-in-out forwards;-webkit-animation:fx-el_topleft-inactive .6s 1 ease-in-out forwards;}
#el-topright.inactive{animation:fx-el_topright-inactive .6s 1 ease-in-out forwards;-moz-animation:fx-el_topright-inactive .6s 1 ease-in-out forwards;-webkit-animation:fx-el_topright-inactive .6s 1 ease-in-out forwards;}
#el-btmleft.inactive{animation:fx-el_btmleft-inactive .6s 1 ease-in-out forwards;-moz-animation:fx-el_btmleft-inactive .6s 1 ease-in-out forwards;-webkit-animation:fx-el_btmleft-inactive .6s 1 ease-in-out forwards;}
#el-btmright.inactive{animation:fx-el_btmright-inactive .6s 1 ease-in-out forwards;-moz-animation:fx-el_btmright-inactive .6s 1 ease-in-out forwards;-webkit-animation:fx-el_btmright-inactive .6s 1 ease-in-out forwards;}
/******************************.nav-el.active reverse******************************/
@keyframes fx-el_topleft-active_reverse{0%{transform:translate3d(55.1%,55.1%,-150px) scale(20);color:transparent;}
54%{color:transparent;}
65%{transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);color:#FFF;}
100%{transform:translate3d(0%,0%,0) scale(1);}
}
@keyframes fx-el_topright-active_reverse{0%{transform:translate3d(-55.1%,55.1%,0) scale(20);color:transparent;}
54%{color:transparent;}
65%{transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);color:#FFF;}
100%{transform:translate3d(0%,0%,0) scale(1);}
}
@keyframes fx-el_btmleft-active_reverse{0%{transform:translate3d(55.1%,-55.1%,0) scale(20);color:transparent;}
54%{color:transparent;}
65%{transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);color:#FFF;}
100%{transform:translate3d(0%,0%,0) scale(1);}
}
@keyframes fx-el_btmright-active_reverse{0%{transform:translate3d(-55.1%,-55.1%,0) scale(20);color:transparent;}
54%{color:transparent;}
65%{transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);color:#FFF;}
100%{transform:translate3d(0%,0%,0) scale(1);}
}
@-moz-keyframes fx-el_topleft-active_reverse{0%{-moz-transform:translate3d(55.1%,55.1%,-150px) scale(20);color:transparent;}
54%{color:transparent;}
65%{-moz-transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);color:#FFF;}
100%{-moz-transform:translate3d(0%,0%,0) scale(1);}
}
@-moz-keyframes fx-el_topright-active_reverse{0%{-moz-transform:translate3d(-55.1%,55.1%,0) scale(20);color:transparent;}
54%{color:transparent;}
65%{-moz-transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);color:#FFF;}
100%{-moz-transform:translate3d(0%,0%,0) scale(1);}
}
@-moz-keyframes fx-el_btmleft-active_reverse{0%{-moz-transform:translate3d(55.1%,-55.1%,0) scale(20);color:transparent;}
54%{color:transparent;}
65%{-moz-transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);color:#FFF;}
100%{-moz-transform:translate3d(0%,0%,0) scale(1);}
}
@-moz-keyframes fx-el_btmright-active_reverse{0%{-moz-transform:translate3d(-55.1%,-55.1%,0) scale(20);color:transparent;}
54%{color:transparent;}
65%{-moz-transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);color:#FFF;}
100%{-moz-transform:translate3d(0%,0%,0) scale(1);}
}
@-webkit-keyframes fx-el_topleft-active_reverse{0%{-webkit-transform:translate3d(55.1%,55.1%,-150px) scale(20);color:transparent;}
54%{color:transparent;}
65%{-webkit-transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);color:#FFF;}
100%{-webkit-transform:translate3d(0%,0%,0) scale(1);}
}
@-webkit-keyframes fx-el_topright-active_reverse{0%{-webkit-transform:translate3d(-55.1%,55.1%,0) scale(20);color:transparent;}
54%{color:transparent;}
65%{-webkit-transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);color:#FFF;}
100%{-webkit-transform:translate3d(0%,0%,0) scale(1);}
}
@-webkit-keyframes fx-el_btmleft-active_reverse{0%{-webkit-transform:translate3d(55.1%,-55.1%,0) scale(20);color:transparent;}
54%{color:transparent;}
65%{-webkit-transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);color:#FFF;}
100%{-webkit-transform:translate3d(0%,0%,0) scale(1);}
}
@-webkit-keyframes fx-el_btmright-active_reverse{0%{-webkit-transform:translate3d(-55.1%,-55.1%,0) scale(20);color:transparent;}
54%{color:transparent;}
65%{-webkit-transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);color:#FFF;}
100%{-webkit-transform:translate3d(0%,0%,0) scale(1);}
}
#el-topleft.active_reverse{animation:fx-el_topleft-active_reverse 1.6s 1 ease-in-out;-moz-animation:fx-el_topleft-active_reverse 1.6s 1 ease-in-out;-webkit-animation:fx-el_topleft-active_reverse 1.6s 1 ease-in-out;}
#el-topright.active_reverse{animation:fx-el_topright-active_reverse 1.6s 1 ease-in-out;-moz-animation:fx-el_topright-active_reverse 1.6s 1 ease-in-out;-webkit-animation:fx-el_topright-active_reverse 1.6s 1 ease-in-out;}
#el-btmleft.active_reverse{animation:fx-el_btmleft-active_reverse 1.6s 1 ease-in-out;-moz-animation:fx-el_btmleft-active_reverse 1.6s 1 ease-in-out;-webkit-animation:fx-el_btmleft-active_reverse 1.6s 1 ease-in-out;}
#el-btmright.active_reverse{animation:fx-el_btmright-active_reverse 1.6s 1 ease-in-out;-moz-animation:fx-el_btmright-active_reverse 1.6s 1 ease-in-out;-webkit-animation:fx-el_btmright-active_reverse 1.6s 1 ease-in-out;}
/******************************.nav-el.inactive reverse******************************/
@keyframes fx-el_topleft-inactive_reverse{0%{transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
60%{transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
100%{transform:translate3d(0%,0%,0);}
}
@keyframes fx-el_topright-inactive_reverse{0%{transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
60%{transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
100%{transform:translate3d(0%,0%,0);}
}
@keyframes fx-el_btmleft-inactive_reverse{0%{transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
60%{transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
100%{transform:translate3d(0%,0%,0);}
}
@keyframes fx-el_btmright-inactive_reverse{0%{transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
60%{transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
100%{transform:translate3d(0%,0%,0);}
}
@-moz-keyframes fx-el_topleft-inactive_reverse{0%{-moz-transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
60%{-moz-transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
100%{-moz-transform:translate3d(0%,0%,0);}
}
@-moz-keyframes fx-el_topright-inactive_reverse{0%{-moz-transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
60%{-moz-transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
100%{-moz-transform:translate3d(0%,0%,0);}
}
@-moz-keyframes fx-el_btmleft-inactive_reverse{0%{-moz-transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
60%{-moz-transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
100%{-moz-transform:translate3d(0%,0%,0);}
}
@-moz-keyframes fx-el_btmright-inactive_reverse{0%{-moz-transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
60%{-moz-transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
100%{-moz-transform:translate3d(0%,0%,0);}
}
@-webkit-keyframes fx-el_topleft-inactive_reverse{0%{-webkit-transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
60%{-webkit-transform:translate3d(-55.1%,-55.1%,-150px) scale(0.9) rotate(35deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
100%{-webkit-transform:translate3d(0%,0%,0);}
}
@-webkit-keyframes fx-el_topright-inactive_reverse{0%{-webkit-transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
60%{-webkit-transform:translate3d(65.1%,-40%,-150px) scale(0.5) rotate(70deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
100%{-webkit-transform:translate3d(0%,0%,0);}
}
@-webkit-keyframes fx-el_btmleft-inactive_reverse{0%{-webkit-transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
60%{-webkit-transform:translate3d(-70.1%,35.1%,-150px) scale(0.7) rotate(15deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
100%{-webkit-transform:translate3d(0%,0%,0);}
}
@-webkit-keyframes fx-el_btmright-inactive_reverse{0%{-webkit-transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
60%{-webkit-transform:translate3d(-10%,75.1%,-150px) scale(0.8) rotate(27deg) rotateY(35deg) rotateX(35deg);color:transparent;opacity:0;}
100%{-webkit-transform:translate3d(0%,0%,0);}
}
#el-topleft.inactive_reverse{animation:fx-el_topleft-inactive_reverse 1.6s 1 ease-in-out;-moz-animation:fx-el_topleft-inactive_reverse 1.6s 1 ease-in-out;-webkit-animation:fx-el_topleft-inactive_reverse 1.6s 1 ease-in-out;}
#el-topright.inactive_reverse{animation:fx-el_topright-inactive_reverse 1.6s 1 ease-in-out;-moz-animation:fx-el_topright-inactive_reverse 1.6s 1 ease-in-out;-webkit-animation:fx-el_topright-inactive_reverse 1.6s 1 ease-in-out;}
#el-btmleft.inactive_reverse{animation:fx-el_btmleft-inactive_reverse 1.6s 1 ease-in-out;-moz-animation:fx-el_btmleft-inactive_reverse 1.6s 1 ease-in-out;-webkit-animation:fx-el_btmleft-inactive_reverse 1.6s 1 ease-in-out;}
#el-btmright.inactive_reverse{animation:fx-el_btmright-inactive_reverse 1.6s 1 ease-in-out;-moz-animation:fx-el_btmright-inactive_reverse 1.6s 1 ease-in-out;-webkit-animation:fx-el_btmright-inactive_reverse 1.6s 1 ease-in-out;}
/******************************.overlay anim******************************/
@keyframes fx-overlay{0%{visibility:visible;color:transparent;}
50%{background-color:#1a242f;color:white;}
100%{visibility:visible;background-color:#1a242f;color:#FFF;}
}
@keyframes fx-overlay-reverse{0%{opacity:1;visibility:visible;background-color:#1a242f;color:#FFF;}
27%{opacity:1;color:transparent;}
50%{opacity:1;}
94%{opacity:0;visibility:visible;background-color:#1a242f;color:transparent;}
95%{visibility:hidden;opacity:0;}
100%{visibility:hidden;opacity:1;}
}
@-moz-keyframes fx-overlay{0%{visibility:visible;color:transparent;}
50%{background-color:#1a242f;color:white;}
100%{visibility:visible;background-color:#1a242f;color:#FFF;}
}
@-moz-keyframes fx-overlay-reverse{0%{opacity:1;visibility:visible;background-color:#1a242f;color:#FFF;}
27%{opacity:1;color:transparent;}
50%{opacity:1;}
94%{opacity:0;visibility:visible;background-color:#1a242f;color:transparent;}
95%{visibility:hidden;opacity:0;}
100%{visibility:hidden;opacity:1;}
}
@-webkit-keyframes fx-overlay{0%{visibility:visible;color:transparent;}
50%{background-color:#1a242f;color:white;}
100%{visibility:visible;background-color:#1a242f;color:#FFF;}
}
@-webkit-keyframes fx-overlay-reverse{0%{opacity:1;visibility:visible;background-color:#1a242f;color:#FFF;}
27%{opacity:1;color:transparent;}
50%{opacity:1;}
94%{opacity:0;visibility:visible;background-color:#1a242f;color:transparent;}
95%{visibility:hidden;opacity:0;}
100%{visibility:hidden;opacity:1;}
}
.overlay.active{animation:fx-overlay .8s 1.10s 1 ease-in-out forwards;-moz-animation:fx-overlay .8s 1.10s 1 ease-in-out forwards;-webkit-animation:fx-overlay .8s 1.10s 1 ease-in-out forwards;}
.overlay.active_reverse{animation:fx-overlay-reverse .8s 1 ease-in backwards;-moz-animation:fx-overlay-reverse .8s 1 ease-in backwards;-webkit-animation:fx-overlay-reverse .8s 1 ease-in backwards;}
分享到QQ
分享到微博
微信扫一扫
