更改为 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] 删除。
我来说两句