ボタンに光のエフェクトを加えるCSS3 - CSS3で遊んでみる2

カテゴリ:CSS3関連 2009年12月15日 14:27

考えてみたら -webkit-animation についての記事を書いていなかったので、ちょうどいいかなーと思いつつエントリー。

今回の記事は、これで決まり?な画像置換 - DKIR で紹介したz-indexのマイナス値と、-webkit-animationを使ったボタンに光るエフェクトを加える方法の紹介です。

前回 に引き続き、CSS3 で遊んでみるの第 2 段ですw
ちなみに今回のサンプルは、WebKit 系が先行実装している-webkit-animationを使ったものなので、Google Chrome や Safari で見ないとまったくなにも起こりませんのであしからず。(ただ、逆を返せばその他のブラウザ(もちろん IE6 も)では変化がないので、WebKit 系ブラウザで見た人向けに仕込んでおく、なんていう使い方もできちゃったりします)

▼EntryMore▼

HTML ソース

CSS ソース

解説

ざっくりとやっていることを解説すると、img 要素には普通にボタンの画像を指定します。
次に、その親要素である span 要素に今回の主題である光を表現する画像(透明→白→透明のグラデーションをした PNG 画像)を指定します。

これです↓
光エフェクトの画像

ただこれだとただの背景になってしまうので、これで決まり?な画像置換 - DKIR で紹介した z-index にマイナス値を与えて、親要素の背景を表示させるテクニックを使います。

そうするとことで、背景に指定した PNG 画像がボタンの前面に来ます。
さらに、WebKit 系が先行実装している-webkit-animationを使って背景画像を左から右に移動するように CSS を設定します。

この部分が左から右に移動するように設定している部分です。@-webkit-keyframes ***でアニメーションの名前を定義します。
各 % はあとで設定するアニメーションする時間に対する割合になります。なのでもしアニメーション時間を 10 秒と設定したとすると、02 秒かけて background-position が 195px 0 へ移動します。そのあとは指定した % 通りに色々と変化していくわけです。

ただ今回のサンプルの場合、エフェクトが発生する間隔を調整したかったので、20% から 100% は変化がありません。(つまり光のエフェクト用の画像をとめている、ということです)

そして、設定した時間が経過すると、さらに別に指定した回数分繰り返し処理されます。
ただ今回のサンプルでは infinite を指定しているので無限ループとなります。

この部分が、アニメーションの時間や繰り返し回数などを指定している部分です。
最後の行が、上で定義したアニメーションの種類を設定している部分です。(-webkit-animation-name: flashの部分)
もちろん、複数のアニメーションを定義している場合は、名前をカンマで区切って列挙することで複数指定することも可能です。

こうすると、背景の光のエフェクト部分が一定時間置きに左から右へ流れ、かつ z-index のマイナス値のテクニックでその背景画像がボタン画像の上を通過するようになる、というものです。

-webkit-animation とは

さて、-webkit-animationとはなんでしょう。
知っている人もいると思いますが、現在 CSS3 で策定中のアニメーションを定義する CSS です。

個人的に、アニメーションってスタイルなのか? という疑問はあったりしますが(w)、とにかく現在策定中のもので、WebKit 系が先行実装しています。(なので -webkit- のプレフィクスがついています)

似たようなものに、CSS3はアニメーションも指定できる! で紹介した-webkit-transitionがありますが、こちらは :hover 擬似クラスなど、特定の条件下でのアニメーションを想定したものです。
いちおう今回紹介したアニメーションも :hover 擬似クラスなどのユーザーの操作をキーにアニメーションを開始することもできます。

その場合は、マウスオーバー中に限ってボタンが発光を繰り返す、みたいな使い方ができます。Flash などでよくありそうな効果ですね。そういった使い方も面白いかもしれません。

いやーこういう遊び記事を書くのは楽しいですねw
なので今回も特に使いどころとかは考えていませんw

この記事のカテゴリー一覧を見る⇒CSS3関連

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/168