CSS – 画像と相性が良さそうなアニメーション
環境
- HTML
- HTML5
- CSS
- CSS3
実行
マウスが画像にホバーした瞬間に画像が一瞬だけ点滅するようなエフェクトをかけ、それと同時に Blurで画像にぼやかしています。実装にはCSSを下記のように記述します。
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;
}
}