光る画像 - Qiita

概要 ホバーしたら光る 一定の間隔で光る 原理 斜めに変形させた白い四角形（平行四辺形）を高速で横に動かし、画像の上を横切らせる。 四角形は画像を囲うdivのbefore 擬似要素に設定。 div自体にはdisplay: inline-block とoverflow: hiddenをかけることで、画像の表示領域から外れた部分の白い四角形は見えなくする。 備考 ホバー時に光る ホバー時にtransitionを設定することで、ホバーした時のみアニメーションする（サンプル一番左） ホバー擬似要素を使わず、クラス自体にtransitionを設定すると、ホバーが外れた時にも逆方向に戻るアニメーションをしてしまう（サンプル中央） 自動アニメーション サンプル一番右。 無限アニメーション。 間隔を空けてアニメーションさせるようにしている。 animation: bright 3s ← アニメーションの実