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