問い合わせのボタンとかデザイン装飾以外で何かしら目立たせたいよね
cssで画像やイラストを光らせるエフェクトがかけられるよ。jsといったスクリプトも使わないのでとっても簡単！
CSSのみで表現する画像やイラストをキラリと光らせるスクリプト
CSSのみで画像をきらっと光らせるスクリプトになります。
JSを使わずCSSのみで実装可能なので非常に手軽です。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.reflection{ display:inline-block; position:relative; overflow:hidden; } .reflection:after { content:""; 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; } @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; } } |
HTML
|
|
<div class="reflection"> <img src="画像の URL"> </div> |
DEMO
