バーガーメニューなどアニメーションで切り替わるボタンを生成できる「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ボタンをコレクションした「Buttons」
  • CSSとJavaScriptで実装できるメニューをまとめた「110 CSS Menu」
  • デバイスごとのスクリーンショットを一括生成「Responsive Screenshots」
  • CSSグラデーションの作成に役立つジェネレーター・Webサービス11選
  • パーツを組み合わせるだけで簡単にHTMLを生成できる「Stitches」
RELATED POSTS
  • 【CSS】CSSアニメーションを簡単に作成できる「Animista」
  • YoutubeやGoogleMapをレスポンシブ化するジェネレーター「Embed Responsively」
  • UIデザインのスニペットがまとめられたサイト「CodeMyUI」
  • CSSでスマートフォンなどデバイスのモックアップを実装できる「Devices.css」
  • 水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
  • CSSで出力する三角形ジェネレーター「CSS Triangle Generator」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • 【2020年版】無料で使えるフリーイラスト素材サイト32選(商用利用可)
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • CSSで作成する吹き出しとデザインのアイデア