关于html:马赛克图片

31次阅读

共计 1420 个字符，预计需要花费 4 分钟才能阅读完成。

代码来自头条号 ” 前端小智 ”, 侵权删

<!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>

正文完