代码来自头条号"前端小智",侵权删
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>悬浮马赛克</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
width: 900px;
display: flex;
justify-content: center;
align-items: center;
}
.piexl{
width: 900px;
height: 900px;
position: relative;
background: #000;
}
img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
image-rendering: pixelated;/*pixelated 放大图像时, 使用最近邻居算法，因此，图像看着像是由大块像素组成的*/
}
.piexl:hover img:nth-child(2){
transition: 2s;
opacity: 0;
}
</style>
</head>
<body>
<!-- 整体思路是用两张图片,一张大的,一张小的,小的图片放大后,使用image-rendering营造出马赛克的效果,hover之后再将小图的透明度设为0 -->
<div class="container">
<div class="piexl">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fb96dcaa60580e8be262c9f71d48af96d5c9ce47e.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627481719&t=6f8a30d69e5ce069a9fb3252059b27c3" alt="">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F2%2Fe9%2Fcc3037c029_130_170.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627481955&t=52bdffdd904079abf0c4aa9c82a71ff2" alt="">
</div>
</div>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。