CSS

【CSS】CSSを使ったシンプルなアイコンアニメーションSIA

February 3, 2018
sia

SIAはシンプルなアイコンアニメーションを作成するための(css | less)ライブラリです。

How to use

CSSファイルをインポート

<link rel="stylesheet" href="css/sia.min.css">

htmlコードを追加

<div class="sia">
    <a class="sia-nav" href="#"><span>toggle navigation</span></a>
</div>

デフォルトのアイコンを選択

  1. sia-nav
  2. sia-navright
  3. sia-navcenter
  4. sia-navleft
  5. sia-navrightm
  6. sia-navcenterm
  7. sia-navleftm
  8. sia-cross
  9. sia-plus
  10. sia-minus
  11. sia-slash
  12. sia-backslash
  13. sia-check
  14. sia-search
  15. sia-top
  16. sia-right
  17. sia-bottom
  18. sia-left
  19. sia-toparrow
  20. sia-rightarrow
  21. sia-bottomarrow
  22. sia-leftarrow
  23. sia-circle
  24. sia-circleo

jQueryコードを追加して、2つのクラスを切り替えることができます。

$('.sia').click(function(){
    $('.sia a').toggleClass('sia-nav sia-cross');
    return false;
});