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

当前位置:主页 > CSS3库 > css3导航菜单 > CSS3汉堡包菜单按钮变形动画特效
CSS3汉堡包菜单按钮变形动画特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-08-16
    阅读:
简要教程

这是一款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

下一篇:没有了