我试图在页面打开/刷新时将我的背景图像从正常状态过渡到模糊(3px)。是否有办法做到这一点与-webkit过渡或我需要使用javascript?
Wyze和我已经为你创建了一个jsFiddle,我认为你正在要求什么。如果这是你需要的,请投票。
<div id="background" class="blur"></div>
#background {
background-image: url('http://www.comicsandmemes.com/wp-content/uploads/WTF-meme.jpg');
background-repeat: no-repeat;
width: 100%;
height: 600px;
}
.blur {
-webkit-animation: blur 5s;
-moz-animation: blur 5s;
animation: blur 5s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
}
0% {
-webkit-filter: blur(1px);
}
50% {
-webkit-filter: blur(2px);
}
100% {
-webkit-filter: blur(3px);
}
}
@-moz-keyframes blur {
0% {
-moz-filter: blur(0px);
}
0% {
-moz-filter: blur(1px);
}
50% {
-moz-filter: blur(2px);
}
100% {
-moz-filter: blur(3px);
}
}
@keyframes blur {
0% {
filter: blur(0px);
}
0% {
filter: blur(1px);
}
50% {
filter: blur(2px);
}
100% {
filter: blur(3px);
}
}
https://jsfiddle.net/1e7mo2cp/看一下这段代码:
.blur {
-webkit-animation: blur 3s ;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes blur {
0% { -webkit-filter: blur(0px); }
100% { -webkit-filter: blur(3px); }
}
<img src="http://placehold.it/350x150" class="blur" />
这允许你设置一个类,它将使用CSS动画和一个类过渡模糊。你可以在这里找到更多关于CSS动画的信息:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations