CSS

ホバー時にピカッと光らせるホバーアニメーション【CSSのみ】

画像やコンテンツをマウスオン時にピカッと一瞬光らせるホバーアニメーションです。
CSSのみで実装できます。


<div class="flash_img"><img src="画像のパス"></div>

.flash_img:hover{
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
  0% {
  opacity: .4;
  }
  100% {
  opacity: 1;
  }
}
@keyframes flash {
  0% {
  opacity: .4;
  }
  100% {
  opacity: 1;
  }
}
ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)