【CSS】画像をマウスオーバーしたときに効果を与えるメモ4つ | web屋tM
昔はjavascriptでやってた画像をマウスオーバーしたときに、何らかのアクションを与える効果。それが今ではCSSだけでできるようになりました。このブログでも使ってる効果を紹介します。 画像をマウスオーバーしたときに「半透明」にする img { transition: 0.5s; } img:hover { opacity: 0.6; transition: 0.5s; } 半透明にするプロパティopacityを使って、マウスオーバーしたときに半透明にします。時間効果を与えるtransitionもつけて、ふんわりと変化。 画像をマウスオーバーしたときに「拡大」する <div class="img-block"> <img src="" alt="" /> </div> 画像を固定のブロックで囲みます。 .img-block { width: 300px; height: 300px;
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
