css 漢堡排動畫變成Ｘ，按Ｘ再變回漢堡排？

Question

css動畫一直是我想學的部分
有大神可以分享一下如何做到「漢堡排動畫變成Ｘ，按Ｘ再變回漢堡排」？
https://www.snapchat.com/
snapchat手機版有一樣的效果，但就是偷不走

Answer 1

打开网站-> f12 -> 开启响应设计模式 -> 点击这个图标观察class变化和相应的css变化 -> 直接把相应代码拷出来通过改变class .hamburger-expanded 和 css transition 实现<div class="header-container">&nbsp; &nbsp; <div class="header-hamburger">&nbsp; &nbsp; &nbsp; &nbsp; <span></span>&nbsp; &nbsp; &nbsp; &nbsp; <span></span>&nbsp; &nbsp; &nbsp; &nbsp; <span></span>&nbsp; &nbsp; </div><div>.header-hamburger {&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 20px;&nbsp; &nbsp; height: 15px;&nbsp; &nbsp; line-height: 15px;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; top: 14px;&nbsp; &nbsp; right: 15px;&nbsp; &nbsp; float: right;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; transform: rotate(0deg);&nbsp; &nbsp; cursor: pointer;}.header-hamburger span {&nbsp; &nbsp; display: block;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; height: 2.5px;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; background: rgb(38, 38, 38);&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; border-radius: 1px;&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; transform: rotate(0deg);&nbsp; &nbsp; transition: .25s ease-in-out;&nbsp; &nbsp; transition-property: transform, opacity;}.header-hamburger span:nth-child(1) {&nbsp; &nbsp; top: 0px;&nbsp; &nbsp; transform-origin: left center;}.header-hamburger span:nth-child(2) {&nbsp; &nbsp; top: 6px;&nbsp; &nbsp; transform-origin: left center;}.header-hamburger span:nth-child(3) {&nbsp; &nbsp; top: 12px;&nbsp; &nbsp; transform-origin: left center;}.hamburger-expanded .header-hamburger span:nth-child(1) {&nbsp; &nbsp; transform: rotate(45deg) translateY(-1.5px);}.hamburger-expanded .header-hamburger span:nth-child(2) {&nbsp; &nbsp; transform: scaleX(0);&nbsp; &nbsp; opacity: 0;}.hamburger-expanded .header-hamburger span:nth-child(3) {&nbsp; &nbsp; transform: rotate(-45deg) translateY(1px);}

Answer 2

原先看到过类似的效果，你看看这个是你想要的吗？codepen demoUpdate:body,html,div {&nbsp; background: #292a38;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; text-align: center;}svg {&nbsp; width: 200px;&nbsp; height: 150px;&nbsp; cursor: pointer;&nbsp; -webkit-transform: translate3d(0, 0, 0);&nbsp; -moz-transform: translate3d(0, 0, 0);&nbsp; -o-transform: translate3d(0, 0, 0);&nbsp; -ms-transform: translate3d(0, 0, 0);&nbsp; transform: translate3d(0, 0, 0);}path {&nbsp; fill: none;&nbsp; -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);&nbsp; -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);&nbsp; -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);&nbsp; -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);&nbsp; transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);&nbsp; stroke-width: 40px;&nbsp; stroke-linecap: round;&nbsp; stroke: #a06ba5;&nbsp; stroke-dashoffset: 0px;}path#top,path#bottom {&nbsp; stroke-dasharray: 240px 950px;}path#middle {&nbsp; stroke-dasharray: 240px 240px;}.cross path#top,.cross path#bottom {&nbsp; stroke-dashoffset: -650px;&nbsp; stroke-dashoffset: -650px;}.cross path#middle {&nbsp; stroke-dashoffset: -115px;&nbsp; stroke-dasharray: 1px 220px;}codePen可以查看编译后的CSS和JS: