【问题标题】:CSS3 filter blur keyframe animationCSS3滤镜模糊关键帧动画
【发布时间】:2013-03-02 19:43:13
【问题描述】:

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

这是我目前得到的:

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

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

【问题讨论】:

  • 尽可能使用好的IDE,可以解决大部分语法错误。谢谢

标签: css animation filter blur keyframe


【解决方案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);}

【讨论】:

  • 我不敢相信我错过了。谢谢,伙计。
猜你喜欢
  • 2012-12-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-07-03
  • 2023-03-18
  • 1970-01-01
相关资源
最近更新 更多