ホームページ制作・ランディングページ制作・EC制作・CMS構築（ワードプレス）
名刺・チラシ・ポスター制作ならWEB制作のトラスト株式会社

画像がキラッと光るやり方はいくつかあります。

最も多く使うのはマウスオーバー時に光るやりかたでしょうか。
本日はページを開いた瞬間からずっと画像をキラッとさせるやり方のご紹介です。

CSSのみ、jQueryも光用の画像も使いません。

まずはサンプル

実装!!

HTMLはこんな感じ。いたってシンプル。

CSSはこんな感じ。position指定です。

とまぁ、これのみ。

光らせる用にjQueryを利用してもいませんし、光用の画像を制作しているわけでもありません。
Only CSSです。

で、知っている方には申し訳ないですが、これなんで同じようなcssを繰り返しているの？
という方に。
これはいろんなブラウザに対応させましょうということです。
CSS3は各ブラウザにより若干記述が異なる為、このような少し面倒くさいことになってしまいます。

制作者にとっていつの時代もこのブラウザ固有の動き・仕様というのはやっかいなものです。

簡単に説明すると、変更部分は キラッとさせたいURL と、reflection-imgに対するCSSの width と height （ただこれは光らせることに関係あるわけではなく、画像をどこに配置するかだけの問題）


あとは width や position 、 -webkit-animation で　光のスピードや大きさを変更できます。

色々試してみてくださいね。