这个视频来做一个图片马赛克的效果。大家看到有一张图片充满了马赛克的小格子，把鼠标移到图片上面，马赛克就会慢慢的消失掉，图片就显示出来了。这个效果其实非常简单，核心就一个CSS属性，只是大家很少会用到这个属性。
来看一下代码，html非常简单，这里放了两张图片，但是这两张图片其实都是同一个图像来的，只是大小分辨率不一样。第一张是500乘以500的原图，第二张是20乘以20的小图。
CSS现在写的都是一些基础的样式，先来看一下，现在就一张小图，还有一张大图，两张图片在这里。接着就让小图放大，放大至和大图一样的大小，然后再让两张图片重叠起来。直接让两张图片的大小都是100%撑满外面的容器，这样两张图片的大小就一样了。再加一个绝对定位，这样两张图片就可以重叠起来了。
现在是把小图放大，所以图片就失真了，并且小图和大图现在是重叠着的，大图被压在底下了。做到这里大家应该都没有问题。
接下来就是关键的一步，怎么样让图片变成马赛克？其实这里只要用一个CSS属性就可以了。image-值用，这里什么意思？大家自己去查，那些比较官方的解释还不太好理解。
这里最简单的来说就是将一张低精度的图像马赛克化，这里这张原本只有20乘以20的小图，硬是把它放在500乘以500的区域显示，这样子就失真了，失真了精度就降低了。这个时候再用上这个属性就会马赛克化，来看一下，刚才很模糊的这张图片瞬间就变成马赛克了。
这里有一点大家要知道，这一个属性只是对这张20乘以20的小图起效，对500乘以500的这张大图是不起效的。因为500乘以500的这张大图在一个500乘以500的区域里面来显示是没有失真的，精度是没有降低的。这种情况属性是不起效的，可以验证一下，只要把小图注释掉，来看一下大图有没有变成马赛克就可以了，刷新，大图还是保持原图的状态。
·这里的注释先解开，要做视频开始的那种鼠标移进去的效果就非常简单了，控制下小图，它的不透明度为0，直接让它看不见就可以了，再给它一个2秒的过渡，鼠标移进去马赛克这张图片就慢慢消失了，原图就显示出来了。
这个视频就到这里，感谢大家的收看。
评论（0）