画像をキラーン!と光らせるCSSテクニック

画像をキラーン!と光らせるCSSテクニック 画像をマウスオーバーさせた時にキラーンとさせたいなんてことたまにありますよね。
今回は透過pngとCSSのtransitionを利用して実現したいと思います。
via:Create a Sheen Logo Effect with CSS

#1:透過画像を作成
白でフェードをかけたPNGをシャキーン!させたい画像サイズにあわせて用意します。

#2:HTML・CSSを記述 下記のようにありそうな感じのHTMLでOKです。 <a href="/" class="shakeeen"><span></span></a>
これに対し、CSSを以下のように記述します。
a.shakeeen {
display: block;
background: url("シャキーン!させたい画像") 0 0 no-repeat;
height: 100px; //シャキーン!画像が高さ100pxのため
width: 100px; //シャキーン!画像が横100pxのため
overflow: hidden;
}
a.shakeeen span {
display: block;
background: url("shine.png") -60px -80px no-repeat;
transition-property: all;
transition-duration: .8s; //変化時間
height: 100px;
width: 100px;
}
a.shakeeen:hover span {
background-position: 100px 100px;
}

サンプル

sponsors

「画像をキラーン!と光らせるCSSテクニック」をシェアする

記事作成:
記事URL:

TOP > > > 画像をキラーン!と光らせるCSSテクニック