CSS3のアニメーションテクニック

マウスポインタを重ねたら光を広げる

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
:hover疑似クラスを使って、マウスポインタを重ねたとき、光を広げます。
講師:
04:20

字幕

このレッスンでは 画面にある 輝いているようなテキストに マウスインターアクションを加えます マウスポインターを 乗せると 光が 薄く広がる と言う こう言うロールオーバーの時の効果です マウスインターアクションが 加わっていない html ドキュメントを Dreamweaver で開いています でも 光る効果は与えられています 具体的には div 要素の中の p 要素に テキストが打ってあります そして その div 要素に対して text-shadow で影が 3つ加えられています 1つ目は ぼやっとした 白です そして2つ目が 少し ボケ幅を縮めた green これで明るくなります そして3つ目 もっと 幅を狭めた ブルーと 言う事で引き締めています 現在の状況を確認しましょう ファイルで ブラウザーでプレビューします 光ったような効果が与えられています もちろん マウスインターアクションが 加わっていませんので ロールオーバーしても何も起こりません その効果を加えましょう テキストは p 要素 class main の中に 加えられていますので この main に対して マウスポインターが重なったら hover 擬似クラスを 設定する事にします では class main ですね それに対して マウスポインターが重なったら hover と そして影を 広げる訳ですが 基本的には この影の設定をベースにします ただし ボケ幅をもっと広げると 言う事になります ですから プロパティは text-shadow ですね そして x のズレ y のズレ ボケ幅 ここだけ変えます もっと大きく 80よりも大きく 120px としましょう 色は変わりません white です 同じように3つ設定しますので ズレは 0 そして ボケ幅は 少し広げて 80 と 色は green ですね ここは変えないと 最後 ぬれは0 ここは ボケは ボケ幅は同じにしておきます 6px の blue です これで確認してみましょう ファイルを保存したら ブラウザーでプレビューします まず 輝いたテキストですけれども ここにポインターを合わせると 広がると 言う設定ができました この機会に text-shadow プロパティの 構文について確かめておきましょう 今 MDN の CSS リファレンスで text-shadow の ページを開いています スクロールしてみますと 構文がありまして text-shadow の後に 何も指定しないと言う事は あんまりないと思うんですが 影が複数 カンマ区切りで 設定できます と言う事です で この影の設定と言うのが こちらに書いてありまして 実は二通りあります 最初に color を指定する その後 x y の ズレの距離 半径と ボケの半径ですね と言う方法が1つ このレッスンでは 後の方を使いました color を後に持って来ます 最初に x と y の ズレる距離 そしてボケ幅と えー この構文を使いました このレッスンでは text-shadow を 複数 影を設定して さらにその構文も確認しました 構文は text-shadow プロパティの後に x 距離 y 距離 そして ボケの半径 color と 言う構文をこのレッスンでは使っています もう一つ color を先に持って来ると 言う構文もあります いづれも text-shadow プロパティに 定める影は カンマで 複数 加える事ができると言う事でした

CSS3のアニメーションテクニック

このコースではCSS3を学び始めた方を対象に、ダイナミックでインタラクティブなアニメーションをCSSでどのように作るのか、そのテクニックや考え方を解説します。実際にさまざまなCSSアニメーションのサンプルをとりあげ、その制作方法についても学習します。このコースでこれらのテクニックを学べば、自分なりのアイデアをいろいろ試すこともできるようになるでしょう。

3時間22分 (36 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。