hover時に素敵な動きを加えてくれるcss3アニメーション10選
今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 2016年1月にIE8のサポートが切れる…とのことなのでいつかバンバンつかえる日が来たらいいなと思います。 Hover.css サイト・デモ 主にボタンにカーソルを当てた時に使えそうなCSSライブラリです。 綺麗にまとめてくださっているので使いたいものがすぐに見つかりそうですね。 CSSのみで実装するボタンデザインやホバーエフェクト 20＋α 目次 サイト・デモ 使い勝手のよさそうなエフェクトが用意されています。 CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 サイト・デモ 画像にカーソルを当てた時の動きに使えそうなCSSをまとめてくださっています。 CSSのみで実装するキャプションエフェクト 20 サイト・デモ カーソルを当てた時にキャプションを表示する際の動きについてまとめてくださっ
マウスホバーでアニメーションしながら追従するバーをCSSだけで実装する | UNORTHODOX WORKBOOK | Blog
よくメニューとかグローバルナビで使われているやつで、マウスホバーすると、それにあわせて付いてくる線(バー)をCSSだけで実装する方法。 JavaScriptでやることが多いと思いますけど、CSSだけでできるんじゃないかと思ってやってみた結果です。CSSの間接セレクタを利用することで、大変簡単にできました。 追従してくるバーのデモ マウスをのせると黒いバーがアニメーションしながらついてきます。古いIEには対応していませんので、Chrome等のモダンブラウザでご覧ください。 マウスが離れると定位置へ戻るという、まぁ、よく見るやつですね。以下でやり方を説明しています。HTMLとCSSだけです。 実装方法 HTML <nav class="global-nav"> <p><a href="#">Menu name</a></p> <p><a href="#">Menu name</a></p> <
簡単に実装できる、ボタン画像のマウスオーバーイベント 10+ - NxWorld
画像のオンオフ切り替えといったようなマウスオーバーイベントで、簡単に実装できるものをいくつか紹介します。 CSS3やjQueryを使ってちょっと変わった動きを取り入れるサイトも見かけることも多くなりましたが、今回は普段も使用頻度が高いと思う定番のものに絞りました。 サンプルで使用する画像とDEMOについて 各マウスオーバーの動きを実装するにあたって上のような3タイプのボタン画像を用いており、各ボタンはそれぞれ以下のようになっています。 type A 単体のボタン画像 type B オンとオフを1枚の画像にした、スプライト型 type C オンとオフをそれぞれ別の画像にし、オフ時のものは_off、オン時のものは_onを拡張子前に入れています。 また、サンプルも用意したので実際の動きはこちらで確認して下さい。 CSS：マウスオーバー時に透過させる CSSのopacity（IEはfilter）の
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種 ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 投稿日2010年10月24日 更新日2012年03月05日 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
