一組超酷漢堡包表徵圖變形動畫特效

簡要教程

Hamburgers是一款效果超酷的漢堡包表徵圖變形動畫特效CSS3動畫庫。這組漢堡包表徵圖動畫包括18種不同的漢堡包變形動畫效果，你還可以通過Sass檔案來自訂你自己的漢堡包表徵圖變形動畫。

安裝

你可以通過bower或npm來安裝Hamburgers漢堡包變形動畫。

bower install css-hamburgersnpm install hamburgers

使用方法

使用該漢堡包變形動畫特效需要在頁面中引入hamburgers.css檔案

<link href="dist/hamburgers.css" rel="stylesheet"></link>

HTML結構

該漢堡包表徵圖變形動畫特效的HTML結構如下：

<button class="hamburger" type="button">  <span class="hamburger-box">    <span class="hamburger-inner"></span>  </span></button>

你也可以使用<div>來代替按鈕元素。

<div class="hamburger" type="button">  <div class="hamburger-box">    <div class="hamburger-inner"></div>  </div></div>

然後你可以添加相應的class類來擷取相應的漢堡包表徵圖變形動畫。

<button class="hamburger hamburger--collapse" type="button">  <span class="hamburger-box">    <span class="hamburger-inner"></span>  </span></button>

下面是所有你可以選擇的漢堡包變形動畫的class類。

• hamburger--arrow

• hamburger--arrow-r

• hamburger--arrowalt

• hamburger--arrowalt-r

• hamburger--boring

• hamburger--collapse

• hamburger--collapse-r

• hamburger--elastic

• hamburger--elastic-r

• hamburger--emphatic

• hamburger--emphatic-r

• hamburger--slider

• hamburger--slider-r

• hamburger--spin

• hamburger--spin-r

• hamburger--squeeze

• hamburger--vortex

• hamburger--vortex-r

帶-r的class類表示的是不帶-r class的動畫的反向效果。

最後，要觸發漢堡包表徵圖變形動畫，還需要添加一個is-active class類。

<button class="hamburger hamburger--collapse is-active" type="button">  <span class="hamburger-box">    <span class="hamburger-inner"></span>  </span></button>

小技巧

在使用Hamburger作為功能表按鈕時，建議使用ARIA屬性。

<button class="hamburger hamburger--elastic" type="button"        aria-label="Menu" aria-controls="navigation">  <span class="hamburger-box">    <span class="hamburger-inner"></span>  </span></button><nav id="navigation">  <!--navigation goes here--></nav>

如果你使用的是<div>元素，預設它們是不會獲得焦點的。你可以為它添加tabindex屬性和ARIA屬性。

<div class="hamburger hamburger--elastic" tabindex="0"     aria-label="Menu" role="button" aria-controls="navigation">  <div class="hamburger-box">    <div class="hamburger-inner"></div>  </div></div><nav id="navigation">  <!--navigation goes here--></nav>

另外，你還可以為漢堡包表徵圖添加一個label。

<button class="hamburger hamburger--collapse" type="button">  <span class="hamburger-box">    <span class="hamburger-inner"></span>  </span>  <span class="hamburger-label">Menu</span></button>

Hamburgers漢堡包表徵圖變形動畫特效的github地址為：https://github.com/jonsuh/hamburgers

以上就是一組超酷漢堡包表徵圖變形動畫特效的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

