Question

我想要实现的是图像悬停时的短高斯模糊动画。有点像将焦点设置在相机上。（聚焦模糊-聚焦）。

这是我到目前为止所得到的：

@-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; 
}

似乎没有工作......有什么建议吗？提前谢谢。

Answer 1

删除“;”在@-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);}

CSS3滤镜模糊关键帧动画

1 个答案: