bsdsjj_siping/web/mobileapp/css/ui-menu-anim.css

.ui-menu-pos
{
	position:absolute;
	left:0.5em;
	top:0.5em;
	height:1.7em;
	width:1.7em;	
	z-index:100;
}

.ui-menu-btn
{
	position:absolute;
	left:0em;
	bottom:0em;
	width:100%;
	height:100%;
	
}

input[type=checkbox]:checked+div>div.ui-menu-btn-bg
{
 	-webkit-transform:translate(0,0em) rotate(405deg);
	position:absolute;width:100%;height:100%;
	-webkit-background-size:cover;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	
	background-image:url(res-menu/menubtn.png);
	-webkit-transition: all 0.3s ease-in-out;
	
	-webkit-animation-name:anim_menu_btn_active;
}

input[type=checkbox]+div>div.ui-menu-btn-bg
{
 	-webkit-transform:translate(0,0em) rotate(0deg); 
	position:absolute;width:100%;height:100%;
	-webkit-background-size:cover;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	
	background-image:url(res-menu/menubtn.png);
	-webkit-transition: all 0.3s ease-in-out;
	
	-webkit-animation-name:anim_menu_btn_inactive;
}


@-webkit-keyframes anim_menu_btn_active{
	0% {
		-webkit-transform:translate(0,0em) rotate(490deg);
	}
	
	100% { 
		-webkit-transform:translate(0,0em) rotate(0deg);
	}
}

@-webkit-keyframes anim_menu_btn_inactive{
	0% {
		-webkit-transform:translate(0,0em) rotate(0deg);
	}
	
	100% { 
		-webkit-transform:translate(0,0em) rotate(490deg);
	}
}

.ui-menu-item-btn
{
	position:absolute;
	left:0em;
	top:0em;
	width:2.7em;
	height:2.7em;
	background-repeat:no-repeat;
	background-position:center;
}

input[type=checkbox]+div>div.ui-menu-item-anim_1
{
	background-size:cover;background-image:url(res-menu/1.png);
	-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
	opacity:0;
	-webkit-transition: all 0.34s ease-in-out;
	-webkit-animation-name:anim_menu_btn_inactive_1;
}

input[type=checkbox]:checked+div>div.ui-menu-item-anim_1
{
	background-size:cover;background-image:url(res-menu/1.png);
	-webkit-transform:translate(0,9em) rotate(2880deg) scale(1,1);
	opacity:1;
	-webkit-transition: all 0.1s ease-in-out;
	-webkit-animation-name:anim_menu_btn_active_1;
}

@-webkit-keyframes name:anim_menu_btn_inactive_1 {
	0% {
		-webkit-transform:translate(0,9em) rotate(2880deg) scale(1,1);
		
	}
	
	100% { 
		-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
		
	}
}

@-webkit-keyframes anim_menu_btn_active_1 {
	0% {
		-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
		
	}
	
	100% { 
		-webkit-transform:translate(0,9em) rotate(2880deg) scale(1,1);
		
	}
}

input[type=checkbox]+div>div.ui-menu-item-anim_2
{
	background-size:cover;background-image:url(res-menu/2.png);
	-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
	opacity:0;
	-webkit-transition: all 0.28s ease-in-out;
	-webkit-animation-name:anim_menu_btn_inactive_2;
}

input[type=checkbox]:checked+div>div.ui-menu-item-anim_2
{
	background-size:cover;background-image:url(res-menu/2.png);
	/* -webkit-transform:translate(3.44em,8.31em) rotate(2880deg) scale(1,1); */
	-webkit-transform:translate(0em,8em) rotate(2880deg) scale(1,1);
	opacity:1;
	-webkit-transition: all 0.16s ease-in-out;
	-webkit-animation-name:anim_menu_btn_active_2;
}

@-webkit-keyframes name:anim_menu_btn_inactive_2 {
	0% {
		-webkit-transform:translate(3.44em,8.31em) rotate(2880deg) scale(1,1);
		
	}
	
	100% { 
		-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
		
	}
}

@-webkit-keyframes anim_menu_btn_active_2 {
	0% {
		-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
		
	}
	
	100% { 
		-webkit-transform:translate(3.44em,8.31em) rotate(2880deg) scale(1,1);
		
	}
}

input[type=checkbox]+div>div.ui-menu-item-anim_3
{
	background-size:cover;background-image:url(res-menu/3.png);
	-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
	opacity:0;
	-webkit-transition: all 0.22s ease-in-out;
	-webkit-animation-name:anim_menu_btn_inactive_3;
}

input[type=checkbox]:checked+div>div.ui-menu-item-anim_3
{
	background-size:cover;background-image:url(res-menu/3.png);
/*	-webkit-transform:translate(6.36em,6.36em) rotate(2880deg) scale(1,1);*/
	-webkit-transform:translate(4em,6.5em) rotate(2880deg) scale(1,1);
	opacity:1;
	-webkit-transition: all 0.22s ease-in-out;
	-webkit-animation-name:anim_menu_btn_active_3;
}

@-webkit-keyframes name:anim_menu_btn_inactive_3 {
	0% {
		-webkit-transform:translate(6.36em,6.36em) rotate(2880deg) scale(1,1);
		
	}
	
	100% { 
		-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
		
	}
}

@-webkit-keyframes anim_menu_btn_active_3 {
	0% {
		-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
		
	}
	
	100% { 
		-webkit-transform:translate(6.36em,6.36em) rotate(2880deg) scale(1,1);
		
	}
}

input[type=checkbox]+div>div.ui-menu-item-anim_4
{
	background-size:cover;background-image:url(res-menu/4.png);
	-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
	opacity:0;
	-webkit-transition: all 0.16s ease-in-out;
	-webkit-animation-name:anim_menu_btn_inactive_4;
}

input[type=checkbox]:checked+div>div.ui-menu-item-anim_4
{
	background-size:cover;background-image:url(res-menu/4.png);
/*	-webkit-transform:translate(8.31em,3.44em) rotate(2880deg) scale(1,1);*/
	-webkit-transform:translate(6.5em,3.5em) rotate(2880deg) scale(1,1);
	opacity:1;
	-webkit-transition: all 0.28s ease-in-out;
	-webkit-animation-name:anim_menu_btn_active_4;
}

@-webkit-keyframes name:anim_menu_btn_inactive_4 {
	0% {
		-webkit-transform:translate(8.31em,3.44em) rotate(2880deg) scale(1,1);
		
	}
	
	100% { 
		-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
		
	}
}

@-webkit-keyframes anim_menu_btn_active_4 {
	0% {
		-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
		
	}
	
	100% { 
		-webkit-transform:translate(8.31em,3.44em) rotate(2880deg) scale(1,1);
		
	}
}

input[type=checkbox]+div>div.ui-menu-item-anim_5
{
	background-size:cover;background-image:url(res-menu/5.png);
	-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
	opacity:0;
	-webkit-transition: all 0.1s ease-in-out;
	-webkit-animation-name:anim_menu_btn_inactive_5;
}

input[type=checkbox]:checked+div>div.ui-menu-item-anim_5
{
	background-size:cover;background-image:url(res-menu/5.png);
/*	-webkit-transform:translate(9em,0em) rotate(2880deg) scale(1,1);*/
	-webkit-transform:translate(8em,0em) rotate(2880deg) scale(1,1);
	opacity:1;
	-webkit-transition: all 0.34s ease-in-out;
	-webkit-animation-name:anim_menu_btn_active_5;
}

@-webkit-keyframes name:anim_menu_btn_inactive_5 {
	0% {
		-webkit-transform:translate(9em,0em) rotate(2880deg) scale(1,1);
		
	}
	
	100% { 
		-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
		
	}
}

@-webkit-keyframes anim_menu_btn_active_5 {
	0% {
		-webkit-transform:translate(0,0em) rotate(0deg) scale(0.1,0.1);
		
	}
	
	100% { 
		-webkit-transform:translate(9em,0em) rotate(2880deg) scale(1,1);
		
	}
}