0%

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

发布于 / 分类: CSS / 暂无评论 / 阅读量 98

最后更新于 2020年01月04日

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

预览图:

关于手机端虚拟键盘压缩页面高度的解决办法 横向轮播
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao