使用HTML5+GSAP制作的汉堡菜单变形动画

GSAP SVG Burger, 点击三明治菜单，三条横线呈现四散游走动画，并重组成叉（关闭）形状。

html5, menu

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2021
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<button onCLick="onToggle()">
    <svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="overflow: visible; enable-background:new 0 0 512 512;" xml:space="preserve">
        <g>
            <path id="burger-bar-one" class="path-1 path" d="M50,116.7l404.2-0.2c0,0,84,12.4,140,10.4s97-96,86-127s-83.3-93.3-142,0s-84,116.6-84,116.6L50,391.3" />
        </g>
        <g>
            <path id="burger-bar-two" class="path" d="M462,391.1l-412,0.2c0,0-98.6,15.7-98.8,71.7c-0.2,36,93,90,147,96c32.7,3.6,247.4,0.9,343-54
  C521.1,459,462,391.1,462,391.1L50,116.7" />
        </g>
        <line id="burger-bar-three" class="path" x1="50" y1="256" x2="462" y2="256" />
    </svg>
</button>
<div class="text-area">
    <br/> click below
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js"></script>

GSAP SVG Burger, 点击三明治菜单，三条横线呈现四散游走动画，并重组成叉（关闭）形状。

html5, menu

编辑器支持Emmet

快捷键

GSAP SVG Burger, 点击三明治菜单，三条横线呈现四散游走动画，并重组成叉（关闭）形状。

html5, menu

使用HTML5 GSAP模拟植物卷须动物卷发触角动画特效

HTML5 CSS3带波浪过渡动画的全屏汉堡菜单栏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：