멋진 햄버거 아이콘 변형 애니메이션 특수 효과 세트-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

멋진 햄버거 아이콘 변형 애니메이션 특수 효과 세트

黄舟

Jan 19, 2017 pm 02:24 PM

간단한 튜토리얼

Hamburgers는 매우 멋진 햄버거 아이콘 변환 애니메이션 특수 효과를 갖춘 CSS3 애니메이션 라이브러리입니다. 이 햄버거 아이콘 애니메이션 세트에는 18가지의 다양한 햄버거 변형 애니메이션 효과가 포함되어 있습니다. 또한 Sass 파일을 통해 자신만의 햄버거 아이콘 변형 애니메이션을 사용자 정의할 수도 있습니다.

멋진 햄버거 아이콘 변형 애니메이션 특수 효과 세트

설치

햄버거 햄버거 변형 애니메이션은 bower나 npm을 통해 설치할 수 있습니다.

bower install css-hamburgers
npm 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 class="hamburger" type="button">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

로그인 후 복사

그런 다음 해당 클래스를 추가하여 해당 햄버거 아이콘 변형 애니메이션을 얻을 수 있습니다.

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

로그인 후 복사

다음은 선택할 수 있는 햄버거 변형 애니메이션의 모든 클래스입니다.

hamburger--화살표
hamburger--arrow-r
hamburger--arrowalt
hamburger--arrowalt-r
hamburger--지루함
hamburger--collapse
hamburger--collapse-r
hamburger--elastic
hamburger--elastic -r
hamburger--강조
hamburger--emphatic -r
hamburger- -slider
hamburger--slider-r
hamburger--spin
hamburger- -spin-r
hamburger--squeeze
hamburger--vortex
hamburger- -vortex-r

-r이 있는 클래스는 -r 클래스가 없는 애니메이션의 역효과를 나타냅니다.

마지막으로 햄버거 아이콘 변형 애니메이션을 실행하려면 is-active 클래스를 추가해야 합니다.

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

로그인 후 복사

팁

햄버거를 메뉴 버튼으로 사용할 경우 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>

로그인 후 복사

요소를 사용하는 경우 기본적으로 포커스를 받지 않습니다. 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>

로그인 후 복사

또한 햄버거 아이콘에 라벨을 추가할 수도 있습니다.

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

로그인 후 복사

햄버거 햄버거 아이콘 변형 애니메이션 특수 효과의 github 주소는 다음과 같습니다: https://github.com/jonsuh/hamburgers

위는 멋진 햄버거 아이콘 변형 애니메이션 특수 효과 세트입니다. , 기타 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.