Javascript 更改为CSS事务：使用模糊效果向下滑动

更改为CSS事务：使用模糊效果向下滑动

我想改变这个css动画效果，如下图所示。是否可以通过

JavaScript

或

CSS

或同时使用这两者。 任何人都可以帮助我解决这个问题。 提前谢谢。

如何将这些图像转换为此gif图像类型：

正文{
背景色：#222；
}
.屏幕{
背景图片：url(https://41.media.tumblr.com/tumblr_lvv2z3bsYG1qz7u7yo1_1280.jpg);
高度：540px；
左：50%；
溢出：隐藏；
位置：绝对位置；
顶部：100px；
转换：翻译（-50%）；
宽度：960px；
盒影：0px 0px 40px#111；
}
.屏幕：悬停。图片1{
-webkit过滤器：模糊（20px）；
过滤器：模糊（20px）；
转换：比例（1.1）；
不透明度：0；
}
.屏幕：悬停。图片2{
-webkit过滤器：模糊（0px）；
过滤器：模糊（0px）；
变换：比例（1）；
不透明度：1；
}
.pic1{
位置：绝对位置；
z指数：2；
过渡：0.4s；
变换原点：50%，50%；
}
.pic2{
-webkit过滤器：模糊（20px）；
过滤器：模糊（20px）；
转换：比例（1.1）；
不透明度：1；
过渡：0.4s；
}
.按钮{
文本对齐：居中；
背景色：#aaa；
高度：50px；
宽度：250px；
边界半径：25px；
}
跨度{
字体大小：20px；
显示：内联块；
边缘顶部：15px；
字体系列：“Helvetica”；
字体大小：粗体；
位置：绝对位置；
}

---

这将起作用

CSS:

---

我如何使用它在两个图像之间切换，用示例解释plz谢谢你可以在

div

和

visibility:hidden

和

visibility:visibility

之间切换使用javascript，访问切换图像：这种效果可以模糊图像，但不会向下滑动，请让它变模糊你的意思是什么嘿，在这里，希望你是指这样的东西

animation: slideWithBlur 2s infinite  normal ease-out;

@keyframes slideWithBlur {
    0% {
        top:500px;
filter: blur(0px);
  -webkit-filter: blur(0px);
    }
10% {
        top:450px;
filter: blur(3px);
  -webkit-filter: blur(3px);
    }
20% {
        top:400px;
filter: blur(6px);
  -webkit-filter: blur(6px);
    }
30% {
        top:350px;
filter: blur(9px);
  -webkit-filter: blur(9px);
    }
40% {
        top:300px;
filter: blur(12px);
  -webkit-filter: blur(12px);
    }
50% {
        top:250px;
filter: blur(15px);
  -webkit-filter: blur(15px);
    }
60% {
        top:200px;
filter: blur(18px);
  -webkit-filter: blur(18px);
    }
70% {
        top:150px;
filter: blur(21px);
  -webkit-filter: blur(21px);
    }
80% {
        top:100px;
filter: blur(24px);
  -webkit-filter: blur(24px);
    }
90% {
        top:50px;
filter: blur(27px);
  -webkit-filter: blur(27px);
    }

100% {
        top: 0px;
filter: blur(30px);
  -webkit-filter: blur(30px);
    }
}