图片模糊过度原理（QQ空间图片过度效果）

之前一直用的懒加载，也就是对同一个img元素做操作，通过load事件判断图片资源是否加载完毕然后替换src链接，但是今天我不想这么做了，这么做要写太多的代码，我想有没有纯css就能解决的办法。

突然我想到以前逛别人博客的时候遇到的一个情况，就是他的图片是先高斯模糊的，然后再慢慢变得清楚，为此我想到了一种情况，也是用js判断，就是需要一张很小的缩略图，然后这个缩略图拉伸到和原图一样的大小显示，然后这个图浮动再原图上方，并且做高斯模糊处理，当大图load加载完毕，小图就做透明渐变直到display：none，但是这样也太麻烦了，不是我需要的，我需要的是纯css。

于是我把目光放到了qq空间上，qq空间的图片加载也是这种先模糊再清晰的过程，然后我就写了一个类似的demo，发现就做到了，十分的简单，为此特来分享一波。

首先我们需要一张原图，一张缩略图，然后用一个容器包起来，容器为div或者其他，然后我们设置好容器的大小，让容器position: relative;做定位。

然后我们先写缩略图的img元素position: absolute;，让他大小和父元素一样，然后object-fit: cover;让他图像填充为cover。

接着写大图，大图也是一样的操作，和缩略图一样。

然后我们个小图的img加一个class，设置高斯模糊，html部分完成

格式如下：

 <div id="img_box">
    <img class="small" src="./images/small_01.jpg" alt="小图">
    <img src="./images/01.jpg" alt="大图">
  </div>

css如下：

#img_box {
    width: 500px;
    height: 500px;
    border: 2px solid red;
    background-color: #eee;
    margin: 100px auto;
    position: relative;
}
#img_box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
}
.small {
    filter: blur(5px);
}

然后我们就可以做到一个图片从模糊到清晰的过程，因为图片jpg格式的特性，他会从上到下加载，高度慢慢变大，这样就可以直接遮盖住小图的部分，我们这样就可以用纯css制作一个图片加载的效果，我觉得这样挺好的，减少的js代码的使用，觉得更好的也可以继续想：

比如加载完毕设置小图的display：none，这样又要做个判断了，这就看个人需要了。

预览图：