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

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/