移动端Menu效果-来自不可描述网站的灵感

原计划的第一篇技术笔记是用Photoshop做视频,但迟迟没行动,假装有借口在做项目吧。最近访问不可描述网站,看到很多兴奋的东西,不是内容,是他们用的配色和一些技术。也是因为某大师级设计博主曾经写过相似文章有所启发(我知道,这也不是我光明正大看不可描述网站的理由!)。

夜深人静的时候,就行动起来,做了一个小Demo,一次成型,看看效果:

CSS

*{margin:0; padding:0;}
body{overflow:hidden;}
.m-nav{position:relative; height:60px; background:#272727;}
.m-nav a.menu-link{
position:absolute; top:10px; right:.5rem;
display:block;
width:40px; height:40px;}
.m-nav a.menu-link span{
position:relative;
display:block;
width:28px; height:20px;
margin:10px auto 0;}
.m-nav a.menu-link span em{
position:absolute; width:50%;
height:4px;
background:#fff;
-webkit-transition:.25s ease-in-out;
-moz-transition:.25s ease-in-out;
-o-transition:.25s ease-in-out;
transition:.25s ease-in-out;
}
.m-nav a.menu-link span em:nth-child(odd){left:0; border-radius:9px 0 0 9px;}
.m-nav a.menu-link span em:nth-child(2n){left:50%; border-radius:0 9px 9px 0;}
.m-nav a.menu-link span em:nth-child(3),
.m-nav a.menu-link span em:nth-child(4){top:8px; opacity:1;}
.m-nav a.menu-link span em:nth-child(5),
.m-nav a.menu-link span em:nth-child(6){top:16px;}
.m-nav a.active span em:nth-child(3){left:-50%; opacity:0;}
.m-nav a.active span em:nth-child(4){left:100%; opacity:0;}
.m-nav a.active span em:nth-child(1){top:3px; transform:rotate(45deg)}
.m-nav a.active span em:nth-child(2){top:3px; transform:rotate(-45deg)}
.m-nav a.active span em:nth-child(6){top:14px; transform:rotate(45deg)}
.m-nav a.active span em:nth-child(5){top:14px; transform:rotate(-45deg)}
.m-nav a.active span em{width:65%; background:#f00;}

HTML

<div class="m-nav">
    <a href="javascript:;" class="menu-link">
        <span><em></em><em></em><em></em><em></em><em></em><em></em></span>
    </a>
</div>

很有趣的小动画,记得以前就见过,那会也没想过深研究,可能当时那种做法没有这个简单吧。

点击查看这个Demo 点击访问应用此效果的网站(手机访问)

发表评论

邮箱地址不会被公开。 必填项已用*标注