CSSのみで要素をキラリと光らせる
2019.05.17
CATEGORY / コーディング
画像などをキラリと光らせる方法です。
jQueryを使う方法もありますが、ここではもっと簡単にできるCSSで光らせる方法をお伝えします。
HTMLはこのような感じです。
|
1 |
<div class="reflection"></div> |
続いて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 26 27 28 29 30 31 32 33 34 |
.reflection { width: 300px; height: 150px; position: relative; overflow: hidden; background-color: #666; } .reflection::after { content: ""; display: block; width: 30px; height: 100%; position: absolute; top: -180px; left: 0; background-color: #FFF; opacity: 0; transform: rotate(45deg); animation: reflect 2s ease-in-out infinite; -webkit-transform: rotate(45deg); -webkit-animation: reflect 2s ease-in-out infinite; } @keyframes reflect { 0% { transform: scale(0) rotate(45deg); opacity: 0; } 80% { transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { transform: scale(4) rotate(45deg); opacity: 1; } 100% { transform: scale(50) rotate(45deg); opacity: 0; } } @-webkit-keyframes reflect { 0% { transform: scale(0) rotate(45deg); opacity: 0; } 80% { transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { transform: scale(4) rotate(45deg); opacity: 1; } 100% { transform: scale(50) rotate(45deg); opacity: 0; } } |
div class=”reflection”の中にdivを作ってもよいのですが、ここはスマートに疑似要素“::after”を使っています。このほうがHTMLソースがすっきりしますね。
以下サンプルです。
See the Pen
reflection CSS by Show Design Lab (@ShowDesignLab)
on CodePen.