有时候看惯了墨守成规的导航栏,就突发奇想想要使自己的导航栏看上去酷炫与众不同。那么就看过来吧。
这个文章实现的功能呢,就是当点击导航栏的小图标,导航栏就会在页面中心位置有小变大旋转而来,点击收回导航栏时,就会在页面中心有大变无旋转离去。挥挥手指不带走一片云彩~
这种旋转出现的比较适合圆形导航栏哦~
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动画用得好,什么样的动画导航栏都可以做出来