• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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

415 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
  • 本文分类:CSS
  • 本文标签:图片过度懒加载高斯模糊图片渐变过度
  • 流行热度:已超过 415 人围观了本文
  • 最后更新:2020年01月4日 - 2时26分49秒
  • 发布日期:2020年01月4日 - 2时26分49秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码