ホーム

CSS - 画像と相性が良さそうなアニメーション

 

環境

  • HTML
  • HTML5
  • CSS
  • CSS3

実行

マウスが画像にホバーした瞬間に画像が一瞬だけ点滅するようなエフェクトをかけ、それと同時に Blurで画像にぼやかしています。実装にはCSSを下記のように記述します。

on.gif

html

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<img src="m.jpg" class="hover_me" ontouchstart="" >
</body>
</html>

css

index.css
img.hover_me:hover{
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;

-webkit-filter: blur(3px);
filter: blur(3px);
}

@-webkit-keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}
@keyframes flash {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}

参考

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15

マウスをかざして指定した画像だけ白く光らせる方法

Pocket
LinkedIn にシェア

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

1
2
no image 3
4
5
6
7
8
9
10
no image 11
12
13
14
15
16
17
18
19
20
21
22
23

-ホーム