哦！CSS

原计划的第一篇技术笔记是用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 点击访问应用此效果的网站(手机访问)