개요

의 원리

시험을 준비하다

빛이 날 때가 있어요.

자동 애니메이션

샘플 코드

<div class="imgBright">
  <img src="http://lorempixel.com/100/100/cats">
</div>

<div class="imgBright2">
  <img src="http://lorempixel.com/100/100/cats">
</div>

<div class="imgBright3">
  <img src="http://lorempixel.com/100/100/cats">
</div>

.imgBright,
.imgBright2,
.imgBright3 {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.imgBright:before,
.imgBright2:before,
.imgBright3:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.4);
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: -160%;
  transform: skewX(-45deg) translateX(0);
}

.imgBright2:before {
  transition: all 0.4s ease-in-out;
}

.imgBright:hover:before,
.imgBright2:hover:before {
  transform: skewX(-45deg) translateX(320%);
  transition: all 0.4s ease-in-out;
}

.imgBright3:before {
  animation: bright 3s ease-in-out 2s infinite;
}

@keyframes bright {
  0% {
     transform: skewX(-45deg) translateX(0);
  }
  15% {
    transform: skewX(-45deg) translateX(320%);
  }
  100% {
    transform: skewX(-45deg) translateX(320%);
  }
}

원자재