Question

我看到是否有办法模糊你的背景几秒钟然后让它进入视野。我试图使用模糊属性和过渡属性，但我没有得到我得到的结果。我在我的css上尝试过类似的东西

body{
    background:black;
        -webkit-filter: blur(10px);

}
.body{
    margin:0 auto;
    width:95%;`enter code here`
    clear:both;
        transition:body 2s ease-in-out;
}

有什么建议吗？

Answer 1

据推测，您没有名为"body"的类，因此第二个选择器中的句点是错误的。此外，transition的语法错误。第一个值是要转换的属性，而不是选择器。而且，根据您需要的支持级别，您需要在转换属性和正在转换的属性上使用供应商前缀，例如。

body {
    -webkit-transition: -webkit-filter 2s ease-in-out;
}

BTW，我不确定-filter是否是可动画的属性。

Answer 2

小提琴：http://jsfiddle.net/Bushwazi/sHL9m/3/

1）在all中使用transition 2）尽管prefixes引导你相信，但这在所有浏览器中都不起作用 3）但它对backgrounds和img

的作用相同

我使用javascript更改了一个类，css处理其余的。

.filter {
  filter:blur(10px);
  -webkit-filter:blur(10px);
  -moz-filter:blur(10px);
  -o-filter:blur(10px);
  -ms-filter:blur(10px);

  -webkit-transition: all 5.0s linear 1.0s;
  -moz-transition: all 5.0s linear 1.0s;
  -ms-transition: all 5.0s linear 1.0s;
  -o-transition: all 5.0s linear 1.0s;
  transition: all 5.0s linear 1.0s;
}
.filter.animae {
   filter:blur(0px);
  -webkit-filter:blur(0px);
  -moz-filter:blur(0px);
  -o-filter:blur(0px);
  -ms-filter:blur(0px);
}
.bg {
    display:inline-block;
    width:360px;
    height:424px;
    background:url(http://gruntjs.com/img/grunt-logo.svg);
}

模糊图像然后恢复正常状态

2 个答案: