6

我想要完成的是图像悬停上的短高斯模糊动画。有点像将焦点放在相机上。(聚焦-模糊-聚焦)。

这是我到目前为止得到的:

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

这似乎不起作用。有什么建议么?

4

1 回答 1

13

去除那个 ”;” 在您的@-webkit-keyframes.
它会起作用的。

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);}
于 2013-03-14T12:57:29.253 回答