代码来自头条号 ” 前端小智 ”, 侵权删
<!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>