用CSS3实现登录窗口体现动画特效

01月15日 14:12

阅读:1,296

用CSS3实现登录窗口体现动画特效

.layer-login{
	display:block;
	position: fixed;
	left:50%;
	top:50%;
	height:338px;
	width: 368px;
	margin-left:-300px;
	margin-top:-201px;
	border-radius: 2px;
	background: #fff;
	z-index:9999;
	padding:35px 116px 29px 116px;
	-webkit-animation: showSweetAlert 0.3s;
	-moz-animation: showSweetAlert 0.3s;
	animation: showSweetAlert 0.3s;
	box-shadow: 0 0 10px #999;
}

@-webkit-keyframes showSweetAlert {
	0% {
		transform: scale(0);
		-webkit-transform: scale(0); 
	}
	65% {
		transform: scale(1.04);
		-webkit-transform: scale(1.04); 
	}
	90% {
		transform: scale(0.96);
		-webkit-tranform: scale(0.96); 
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1); 
	} 
}

@-moz-keyframes showSweetAlert {
	0% {
		transform: scale(0);
		-webkit-transform: scale(0); 
	}
	65% {
		transform: scale(1.04);
		-webkit-transform: scale(1.04); 
	}
	90% {
		transform: scale(0.96);
		-webkit-tranform: scale(0.96); 
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1); 
	} 
}

@keyframes showSweetAlert {
	0% {
		transform: scale(0);
		-webkit-transform: scale(0); 
	}
	65% {
		transform: scale(1.04);
		-webkit-transform: scale(1.04); 
	}
	90% {
		transform: scale(0.96);
		-webkit-tranform: scale(0.96); 
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1); 
	} 
}

效果图:

登录窗口弹性效果图