img{
filter:brightness(20%)
animation-name:f;
animation-duration:5s;
}
@keyframes f{
50%{filter:brightness(150%)
}
<!Doctype html>
<html>
<body>
<img src="http://www.sololearn.com/images/tree.jpg">
<body>
<html>
我希望动画效果在将鼠标悬停在图像上时生效
答案 0 :(得分:3)
在:hover
上使用img
伪类
img{
filter:brightness(20%);
animation-duration: 5s;
}
img:hover {
animation-name: f;
}
@keyframes f{
50%{ filter: brightness(150%); }
}
<img src="http://www.sololearn.com/images/tree.jpg">