CSS3菜单图标

示例

HTML

CSS3

#menu{position:relative;margin:8px 0;cursor:pointer;}
#menu,#menu::before,#menu::after{width:25px;height:4px;background-color:#000;transition:all .2s;display:block;}
#menu::before,#menu::after{content:"";position:absolute;}
#menu::before{top:-8px;}
#menu::after{bottom:-8px;}
#menu.active{ transform:rotate(45deg) }
#menu.active::after{transform:rotate(90deg) translate(-8px);}
#menu.active::before{opacity:0;}

Javascript

var menu = document.querySelector('#menu');
menu.addEventListener('click',function(){
  menu.className = Number(menu.className.length)?'':'active';
})

JOE2018-01-08