浅浅地用 CSS 来实现个像素化悬停马赛克吧

使用CSS实现像素化悬停马赛克效果

最新推荐文章于 2024-12-20 17:43:02 发布

AI_boom

最新推荐文章于 2024-12-20 17:43:02 发布

阅读量941

点赞数 1

CC 4.0 BY-SA版权

文章标签： css css3 前端

本文链接：https://blog.csdn.net/Android_boom/article/details/129004876

本文介绍了如何使用CSS3的filter属性配合transition实现一个悬停时显示像素化马赛克效果的图片。通过设置不同大小的图片，达到马赛克覆盖的效果，同时添加过渡效果增加交互性。

前言

马赛克效果相信大家都见过吧，但是如何实现马赛克效果大家知道吗？比较常见的方式有对背景模糊处理。除了这个方法，其实还有一个 CSS 属性可以实现这个效果 —— image-rendering: pixelated。当然仅仅靠这个方法来实现马赛克效果就太单调啦，需要配合一些其他内容来丰富一下马赛克了。

进入主题

这个“不一样”的马赛克将全程纯 CSS 来实现，因此不用担心 JS 不会了。最终效果在文末可查看。

前期准备

我们实现的是一个可悬停的像素化马赛克，悬停知道，像素化马赛克也知道，将它俩结合到一起就是我们需要的 CSS 效果了。

我们需要准备两张图片，这两张图片有讲究，尽量选择正方形尺寸的图片，以及尺寸应为平方倍（就是如果一张图片尺寸为 900X900，那么另一张图片就应该为 30X30）。为啥要这么做呢？因为我这里的马赛克就是用 30X30 的图片来实现的，因此这样做就可以完美覆盖整张 900X900 的图，这样就达到了马赛克的效果。

我这里采用的是 900X900 以及 30X30 尺寸的图片，如下所示：

<body><div class="wrapper"><div class="container"> <img src="./900x900.jpg" alt=""> <img src="./30x30.jpg" alt=""></div></div>
</body>

以下就是我的文件结构了。

CSS 样式设计

完成准备工作后，开始进行 CSS 样式设计了。整体设计不难，对图片进行样式处理，规定好图片大小尺寸以及排版效果（这里就一张图片，排版效果就不用大费周章了👀）。相关代码如下：

.wrapper{position: relative;width: 900px;display: flex;align-items: center;justify-content: space-between;
}
.wrapper .container{position: relative;width: 400px;height: 400px;
}

经过上面一顿简单的操作，目前初步的效果如下所示：

然后进行这里整个流程的关键部分，需要请上我们的主力元素 image-rendering: pixelated。简单点理解它就是用来做马赛克效果的。只需在图片里加入这个属性即可。相关代码如下：

.wrapper .container img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;image-rendering: pixelated;
}

加入这个属性后，图片就会有如下马赛克的效果：

目前马赛克效果是静态的，但是我们需要的是一个可以悬停式效果的马赛克。这时候就需要 hover 来控制悬停来。并且在 hover 里加入一个过渡效果会更佳哟👀。过渡效果可以通过 transition 来实现。相关代码如下所示：

.wrapper .container img:last-child{transition: 3s;
}
.wrapper .container:hover img:last-child{transition: 3s;opacity: 0;
}

最终效果可看效果展示 ⬇️。

效果展示

当鼠标移出图片，图片将出现一层马赛克；当鼠标重新移回到图片，马赛克就会消失。

总结

以上就是整个效果的实现方法流程了，其实是很简单的。除了学会了好玩的效果，并且还掌握了一个新属性 —— image-rendering: pixelated。两全其美，岂不美哉？

虽然该效果没有用到 JS，但是这是优化的空间，对 JS 感兴趣的同学可以加入 JS 部分来使其更加丰富完整。

总之，大家可以去试试这个效果。如果还有完善的空间，欢迎大家在评论区告诉我，让这个马赛克效果变得更丰富起来。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取