バーガーメニューなどアニメーションで切り替わるボタンを生成できる「Transformicons」

 
バーガーメニューのアニメーションはCSSでも作れますが、「Transformicons」ではメニューからローディングアニメーションまで、生成したコードをコピペするだけで簡単に設置できちゃいます。後からCSSでボタンをアレンジすることも可能です。

Transformicons


メニュー
グリッド
追加
メニュー
ローディング
  • loading

使い方は「Builder」ページより、作成したいアイコンを選択して「Build」ボタンをクリックするだけです。HTML・CSS/Sass・JavaScriptのコードが生成されますので、コードをコピペして使用すればOKです。

ただこのコードのJavascriptではアニメーションが動作しない…。「Documentation」ページに記載してる.add(class名)を追加して動作しました。

Java
<script>出力したJSコード</script>
<script>transformicons.add(".tcon");</script>


  • CSSで作成する吹き出しとデザインのアイデア
  • 【CSS】色々と使える疑似クラス:nth-child()の実用例
  • 軽快なアニメーションのバーガーメニュー「Ember Burger Menu」
  • 世界の国旗をCSSとdivのみで実装する「CSS Flags」
  • ポリゴンスタイルのイメージやテクスチャを生成できるジェネレーターまとめ
RELATED POSTS
  • CSSとJavaScriptで実装できるメニューをまとめた「110 CSS Menu」
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • 【jQuery】Youtubeの動画サムネイルをアニメーション表示させる「PreViewTube.js」
  • 無料で使用できる!450種類以上のラインアイコン「LineIcons」
  • CSSで作成する吹き出しとデザインのアイデア
  • スライドアニメーションで展開するグリッドメニュー「Expanding Grid Menu」
RECENT POSTS
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
  • バナー広告デザインの参考にしたいギャラリーサイト8選
PICKUP
  • 導入しておきたいWordPressのおすすめプラグイン
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】