3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる
CSSを使って、3本線のメニューボタンを開閉にあわせて変化させる方法を紹介します。先日作ったWebギャラリーサイトでも使っている方法です。 3本線のメニューはアイコン型のWebフォントを使っている人も多いと思いますが、CSSで作成すると動きをつけることもできるので楽しいです。 サンプルを用意していますのでご覧ください。 では、HTMLから説明します。 HTML a要素がサークルで、span要素が3本線になります。 <a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a> span要素を3つ並べて3本線を作る場合もありますが、個人的には擬似要素を使って1つで表示したいです。 CSS 続いてCSSです。最初に全部載せて、後で個別に解説します。 #panel-btn{ display: inline-block; posit
【CSS3】Animate.cssを使って簡単にアニメーションを実装する。 | バシャログ。
fukasawaです。こんにちは。 クナイプのグーテナハトが安眠に良いと聞いたので試してみたのですが、風呂場中にタイカレーのようなスパイシーな香りが広がりました。安眠…？ Animate.cssは要素にclassをつけるだけで、簡単にいろいろな種類のCSS3アニメーションを実装してくれる便利なスタイルシートです。多くのブログで既に紹介されているものではあるのですが、バシャログではまだ誰も書いていないようなのでここぞとばかりに書いてみます。 公式サイト（デモ&ダウンロード） http://daneden.github.io/animate.css/ GitHub(使い方など) https://github.com/daneden/animate.css ※CSS3アニメーションに対応しているブラウザで動作します。 簡単な使い方 animate.min.cssを読み込みます。 <head> <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
