CSSのみで要素をキラリと光らせる

管理者

6年前

画像などをキラリと光らせる方法です。
jQueryを使う方法もありますが、ここではもっと簡単にできるCSSで光らせる方法をお伝えします。

HTMLはこのような感じです。

続いてCSS。

.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.