光る画像

7446 ワード
CSS CSS テキストリンク

概要

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

原理

  • 斜めに変形させた白い四角形（平行四辺形）を高速で横に動かし、画像の上を横切らせる。
  • 四角形は画像を囲うdivのbefore 擬似要素に設定。
  • div自体にはdisplay: inline-block とoverflow: 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/ のアイコン部分の演出。

POJ 3279 Fliptile(バイナリ列挙、繰返し、POJ 1426 Find The Multiple、詳細)
springmvcの場合requestのgetReader()とgetInputStream()は一度しか呼び出せない解決策について