[英]Change to CSS transaction : sliding down with Blur effect
更改为 CSS 事务:使用模糊效果向下滑动
我想改变这个 css animation 效果,如下图所示。 是否可以通过JavaScript
或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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.