Question

我正在尝试将背景图像从正常状态转换为页面打开/刷新时的模糊（3px）。有没有办法用-webkit-transition做到这一点还是我需要使用javascript？

Answer 1

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/

Answer 2

看看这段代码：

＆＃13;

.blur {
  -webkit-animation: blur 3s ;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes blur {
  0% { -webkit-filter: blur(0px); }
  100% { -webkit-filter: blur(3px); }
}

＆＃13;

 <img src="http://placehold.it/350x150" class="blur" />

＆＃13;

这允许您设置一个类，该类将使用CSS动画和类转换模糊。您可以在此处找到有关CSS动画的更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

如何在打开/刷新页面时使背景图像慢慢模糊？

2 个答案: