首页 > 建站教程 > CSS3+HTML5 >  手机导航按钮切换效果正文

手机导航按钮切换效果

        如下图所示,这个小案例是基于css3和js的导航按钮切换效果,从默认的三条杠,点击后变成一个叉,再点击又变回来的一个动画效果,经常可见在一些手机网站和响应式网站的导航栏显示和隐藏时用到的效果:



        正好,我爱模板网今天刚好给客户做一个响应式网站,客户希望按钮就是这么切换,我就写了一个,分享到这里(网上有很多写法,我没看过,是自己瞎捉摸写的,vivo官网就是响应式,切换到手机下,就能看到这个按钮效果了)。

    1、准备html:
<div class="btn">
	<span class="line1"></span>
	<span class="line2"></span>
	<span class="line3"></span>
</div>
          这里的div主要是控制显示范围。而三个span,就是那三条线。

    2、css代码:
body{background:#000;}
.btn{width:100px; height:100px; margin:150px auto; overflow:hidden; position:relative;}
.btn span{width:100%; left:0; background:#fff; height:10px; position:absolute; transition:all 500ms;}
.btn .line1{top:0; transform:rotate(0); transform-origin:left top;}
.btn .line2{top:45px;}
.btn .line3{bottom:0; transform:rotate(0); transform-origin:left bottom;}
.btn.on .line1{width:145px; transform:rotate(41deg);}
.btn.on .line2{left:-100%;}
.btn.on .line3{width:145px; transform:rotate(-41deg);}
          这里,需要注意的是,我给 span 默认一个动画transition,然后将 最上面的span和下面的span都设置了transform-origin,让它们旋转的时候,都以左边为中心点,因为默认转换点在正中间,然后,当div含有on这个class的时候,将第一个和第三个,分别顺时针、逆时针旋转41°,同时长度变长。而 中间的那条线则从左边跑出去。

    3、js代码:
document.getElementsByClassName("btn")[0].onclick=function(){
	this.classList.toggle("on");
}
          这里直接用classList了,这是html5才有的,因为反正是手机站,不怕兼容性,css3和html5都直接上!最后,我们运行下面的代码,看下最终效果:


提示:您可以先修改部分代码再运行


    本文为我爱模板网原创,转载请注明出处!