图片模糊过度原理(QQ空间图片过度效果)

53 0

之前一直用的懒加载,也就是对同一个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,这样又要做个判断了,这就看个人需要了。

预览图:

0
微信收款码
微信收款码