[英]CSS3 filter blur keyframe animation
我想要完成的是图像悬停上的短高斯模糊动画。 有点像在相机上设置焦点。 (聚焦-模糊-聚焦)。
这是我到目前为止得到的:
@-webkit-keyframes image_blur {
0% { -webkit-filter: blur(0px);}
50%; { -webkit-filter: blur(5px);}
100% { -webkit-filter: blur(0px);}
}
#image {
width : 290px;
height : 160px;
background: url(images/test1.jpg);
}
#image:hover {
-webkit-animation: image_blur 2s;
}
这似乎不起作用。 有什么建议么?
去除那个 ”;” 在@-webkit-keyframes
“50%”之后。
它会起作用。
0% { -webkit-filter: blur(0px);}
50%; { -webkit-filter: blur(5px);}
100% { -webkit-filter: blur(0px);}
改用这个
0% { -webkit-filter: blur(0px);}
50% { -webkit-filter: blur(5px);}
100% { -webkit-filter: blur(0px);}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.