DEMO
HTML
<div class="btn"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div>
CSS
body { background: #333; } .btn { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 44px; height: 44px; cursor: pointer; overflow: hidden; .line { position: absolute; left: 50%; margin: -1px -13px; width: 26px; height: 2px; background: #fff; transition: transform .5s ease-in-out; &:nth-child(1) { top: 15.5px; transform-origin: left top; transform: rotate(0deg); } &:nth-child(2) { top: 50%; transition: opacity .5s ease-in; } &:nth-child(3) { bottom: 15.5px; transform-origin: left center; transform: rotate(0deg); } } &.on { .line { &:nth-child(1) { transform: rotate(30deg); } &:nth-child(2) { opacity: 0; transition: opacity .25s ease-in; } &:nth-child(3) { transform: rotate(-30deg); } } } }
JavaScript
(function(win, doc) { "use strict"; doc.querySelector(".btn").addEventListener("click", function() { this.classList.toggle("on"); }, false); })(this, document);
完成度は低いですがまずはここからですね。