导航栏同时缩放旋转（css3动画）

有时候看惯了墨守成规的导航栏，就突发奇想想要使自己的导航栏看上去酷炫与众不同。那么就看过来吧。

这个文章实现的功能呢，就是当点击导航栏的小图标，导航栏就会在页面中心位置有小变大旋转而来，点击收回导航栏时，就会在页面中心有大变无旋转离去。挥挥手指不带走一片云彩~

这种旋转出现的比较适合圆形导航栏哦~

css:

@keyframes tab {
	0%{
		transformtransform: scale(0.2,0.2) rotate(-360deg);/*元素同时缩放0.2，旋转-360度*/
		-webkit-transform: scale(0.2,0.2) rotate(-360deg);
		transform-origin:50% 50%;/*定义动画的旋转中心点*/
	}
	50%{
		transform: scale(0.5,0.5) rotate(-180deg);
		-webkit-transform: scale(0.5,0.5) rotate(-180deg);
		transform-origin:50% 50%;/*定义动画的旋转中心点*/
	}
	100%{
		transform: scale(1,1) rotate(0deg);
		-webkit-transform: scale(1,1) rotate(0deg);
		transform-origin:50% 50%;/*定义动画的旋转中心点*/
	}
}
@keyframes tab1 {
	0%{
		transform: scale(1,1) rotate(0deg);/*元素同时缩放1，旋转0度*/
		-webkit-transform: scale(1,1) rotate(0deg);
		transform-origin:50% 50%;/*定义动画的旋转中心点*/
	}
	50%{
		transform: scale(0.5,0.5) rotate(-180deg);
		-webkit-transform: scale(0.5,0.5) rotate(-180deg);
		transform-origin:50% 50%;/*定义动画的旋转中心点*/
	}
	100%{
		transformtransform: scale(0.2,0.2) rotate(-360deg);
		-webkit-transform: scale(0.2,0.2) rotate(-360deg);
		transform-origin:50% 50%;/*定义动画的旋转中心点*/
	}
}
.tab-ra{
	position: relative;
	width: 3rem;
	height: 3rem;
	z-index: 999;
	position: relative;
	top: 1rem;
	left: 0;
    right:0;
    margin:0 auto;
	animation: tab 0.3s linear;
	-webkit-animation: tab 0.3s  linear;
}

js:

$('.tab').click(function() {
		$('.tab').hide();//页面提示点击导航栏图标隐藏
        audio1.play();
        $('.tab-big').show();
        $('.tab-ra').css("-webkit-animation","tab 0.3s  linear");//运用tab出现  css3动画

	});

	$('.tab-scale').click(function() {
        setTimeout(function () {
            $('.tab-ra').css("-webkit-animation","tab1 0.3s  linear");//运用tab收回 css3动画
        },300)
        var t = setTimeout(function(){
            $('.tab-big').hide();
        }, 550);
        $('.tab').show();
	});

其实css3动画用得好，什么样的动画导航栏都可以做出来