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

拉克什·苏塔尔

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

我想改变这个 css 动画效果,如下图所示。是有可能throughtJavaScript或者CSS或同时使用。任何机构都可以帮助解决我的这个问题。提前致谢。

如何将这些图像转换更改为这种 gif 图像类型:

body {
     background-color: #222;
}
 .screen {
     background-image: url(https://41.media.tumblr.com/tumblr_lvv2z3bsYG1qz7u7yo1_1280.jpg);
     height: 540px;
     left: 50%;
     overflow: hidden;
     position: absolute;
     top: 100px;
     transform: translate(-50%);
     width: 960px;
     box-shadow: 0px 0px 40px #111;
}
 .screen:hover .pic1 {
     -webkit-filter: blur(20px);
     filter: blur(20px);
     transform: scale(1.1);
     opacity: 0;
}
 .screen:hover .pic2 {
     -webkit-filter: blur(0px);
     filter: blur(0px);
     transform: scale(1);
     opacity: 1;
}
 .pic1 {
     position: absolute;
     z-index: 2;
     transition: 0.4s;
     transform-origin: 50%, 50%;
}
 .pic2 {
     -webkit-filter: blur(20px);
     filter: blur(20px);
     transform: scale(1.1);
     opacity: 1;
     transition: 0.4s;
}
 .button {
     text-align: center;
     background-color: #aaa;
     height: 50px;
     width: 250px;
     border-radius: 25px;
}
 span {
     font-size: 20px;
     display: inline-block;
     margin-top: 15px;
     font-family: 'Helvetica';
     font-weight: bold;
     position: absolute;
}
 
<div class="screen">
<img class="pic1" src="https://41.media.tumblr.com/tumblr_m0u1feK1tA1r81skpo1_1280.jpg" alt="City" />
<img class="pic2" src="https://41.media.tumblr.com/tumblr_lvv2z3bsYG1qz7u7yo1_1280.jpg" alt="City" />
</div>

普拉贝什·古利

这会奏效!

CSS:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用 jQuery slideDown 或 toggleClass 和 css 过渡添加向下滑动效果

使用CSS最大高度过渡向上/向下滑动?

使用CSS将Img Src更改为父A href

如何使用CSS将div的位置从水平更改为垂直?

如何使用CSS将尺寸更改为GtkWidget?

使用类活动Bootstrap将Li更改为CSS

CSS将px更改为%

只有顶部按钮向下滑动才能使用 css jquery

使用CSS过滤器将黑色图标更改为蓝色

如何仅使用CSS将彩色十六进制代码更改为rgba?

如何使用 jQuery 在单击按钮时将 CSS 自定义属性的值更改为 1?

使用jQuery .click从某些CSS类更改为其他类,而无需切换?

无法使用 js 将 css `top` 值更改为固定元素

使用jQuery将宽度从100%更改为自动时的css过渡不起作用

如何在圆圈内创建 + 并更改为 - 仅使用 css 悬停

如何使用CSS滤镜将具有不同颜色的图像色调更改为蓝色色调

如何在React中使用Material-ui将内联样式更改为CSS?

仅使用CSS将不同大小的图像更改为相同大小

使用js将css位置更改为固定在创建的画布上

Vue.js过渡CSS仅向下滑动

CSS设计将设备更改为设备

使用纯CSS在菜单下滑动箭头

通过更改类来向下滑动动画

单击时,向下滑动div并更改按钮图标

向下滑动时的jQuery,更改背景颜色

如何将WooCommerce产品CSS更改为原始CSS

将响应式列表从水平 CSS 更改为垂直 CSS

如何将CSS变量更改为CSS颜色类型?

如何使用javascript在一定时间后将css显示从可见更改为不可见