More than 5 years have passed since last update.

CSSを使って画像をキラリと光っているようにみせる

Last updated at 2013-06-22Posted at 2013-06-22

写真をキラッと光る感じをCSSを使って作ってみました。

今回作ったサンプル
http://jk0602.sakura.ne.jp/sample/reflection/

ソースファイルはこちら
http://jk0602.sakura.ne.jp/sample/reflection/reflection.zip

index.html

<body>
	<div class="content">
		<img src="bg1.png">
		<div class="reflection"></div>
	</div>
</body>

キラッ光っているのは
<div class="reflection"></div>
の部分です。
そして、これに対応するCSSが以下のようになります。

:index.css

.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
}

@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up