CSS3汉堡包菜单按钮变形动画特效

这是一款CSS3汉堡包菜单按钮变形动画特效。该汉堡包菜单按钮变形动画包含4种特效，它们使用SVG来制作，通过CSS来制作动画效果。

使用方法

在页面中引入style.css文件。

<link rel="stylesheet" href="css/style.css">              
                

HTML结构

汉堡包按钮的HTML结构如下。

<div class="menu cross menu--1">
  <label>
    <input type="checkbox">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="30" />
      <path class="line--1" d="M0 40h62c13 0 6 28-4 18L35 35" />
      <path class="line--2" d="M0 50h70" />
      <path class="line--3" d="M0 60h62c13 0 6-28-4-18L35 65" />
    </svg>
  </label>
</div>
                

效果预览如下图：

该CSS3汉堡包菜单按钮变形动画特效的github地址为：https://github.com/tamino-martinius/ui-snippets-menu-animations