LoginSignup
6

More than 5 years have passed since last update.

光る画像

Last updated at Posted at 2017-02-08

概要

  • ホバーしたら光る
  • 一定の間隔で光る

cat.gif

原理

  • 斜めに変形させた白い四角形(平行四辺形)を高速で横に動かし、画像の上を横切らせる。
  • 四角形は画像を囲うdivのbefore 擬似要素に設定。
  • div自体にはdisplay: inline-blockoverflow: hiddenをかけることで、画像の表示領域から外れた部分の白い四角形は見えなくする。

備考

ホバー時に光る

  • ホバー時にtransitionを設定することで、ホバーした時のみアニメーションする(サンプル一番左)
  • ホバー擬似要素を使わず、クラス自体にtransitionを設定すると、ホバーが外れた時にも逆方向に戻るアニメーションをしてしまう(サンプル中央)

自動アニメーション

サンプル一番右。

  • 無限アニメーション。
  • 間隔を空けてアニメーションさせるようにしている。
    • animation: bright 3s ← アニメーションの実行時間を(アニメーションを実際にさせる時間+間隔を空けたい時間)に設定。
    • keyframesを途中時点(サンプルだと15%)でアニメーションが完了するような設定にし、100%にも同じ設定を適用。
    • 上記で、15%〜100%までのアニメーション時間が待機時間になる。

サンプルコード

<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%);
  }
}

元ネタ

https://teratail.com/ のアイコン部分の演出。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6