我正在尝试创建动画模糊效果。我想让背景图像慢慢变得模糊。我试图用它@-webkit-keyframes
来实现这一点,但只有动画不透明度在起作用。
这是一个现场样本:http ://codepen.io/dylnclrk/pen/cvDfx
并简要说明我在做什么:
我的模糊混合:
@mixin blur($radius) {
-webkit-filter: blur($radius);
-moz-filter: blur($radius);
-o-filter: blur($radius);
-ms-filter: blur($radius);
filter: blur($radius);
}
我的动画关键帧:
@-webkit-keyframes image_blur {
0% {
@include blur(0px);
opacity: 1;
}
50% {
@include blur(0.2px);
opacity: 0.96;
}
100% {
@include blur(0.4px);
opacity: 0.92;
}
}
动画:
.animated {
-webkit-animation: image_blur 1s;
-webkit-animation-fill-mode: forwards;
}
Javascript:
$('.card').click(function () {
$('.letter__picture').toggleClass('animated')
$('.letter__text').toggleClass('visible', 1000);
})
编辑:我知道一种方法,只需使用 Photoshop 模糊图像并制作精灵。然后调整模糊图像的不透明度。但我想看看如何使用浏览器的模糊过滤器做到这一点。