gpt4 book ai didi

CSS3滤镜模糊关键帧动画

转载 作者:技术小花猫 更新时间:2023-10-29 11:28:17 25 4
gpt4 key购买 nike

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

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

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

关于CSS3滤镜模糊关键帧动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15409605/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com