前端 CSS 经典：mac docker 效果

作者：小丑西瓜9 | 2024-06-07 20:15:19

踩

前言：浏览器上实现 mac docker 效果，实现思路，1. 布局，方框间距用元素代替，因为有放大缩小功能，不用元素的话，不好控制。2. 定义个 css 变量 i，用来代表放大比例。3. 确定每个元素的 i 值，根据鼠标移动，动态生成一个曲线。设计曲线函数。

效果：

代码实现：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-align: justify;
      }
 
      body {
        background: #000;
        color: #fff;
      }
 
      .docker-container {
        position: fixed;
        bottom: 10px;
        display: flex;
        justify-content: center;
        width: 100%;
      }
 
      .docker {
        box-sizing: content-box;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: end;
        padding: 5px 10px;
        background: rgba(255, 255, 255, 0.3);
      }
 
      .menu {
        display: flex;
        align-items: end;
      }
 
      .menu-item {
        border-radius: 5px;
        width: calc(var(--i, 1) * 30px);
        height: calc(var(--i, 1) * 30px);
        margin-bottom: calc(var(--i, 1) * 15px - 15px);
        background: #b4433d;
        border: 1px solid #ccc;
      }
 
      .gap {
        width: calc(var(--i, 1) * 10px);
        height: 30px;
      }
 
      .menu .menu-item:nth-child(3n + 1) {
        background: blue;
      }
      .menu .menu-item:nth-child(3n) {
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="docker-container">
      <div class="docker">
        <div class="menu">
          <div class="menu-item"></div>
          <div class="gap"></div>
          <div class="menu-item"></div>
          <div class="gap"></div>
          <div class="menu-item"></div>
          <div class="gap"></div>
          <div class="menu-item"></div>
          <div class="gap"></div>
          <div class="menu-item"></div>
          <div class="gap"></div>
          <div class="menu-item"></div>
          <div class="gap"></div>
          <div class="menu-item"></div>
          <div class="gap"></div>
          <div class="menu-item"></div>
          <div class="gap"></div>
          <div class="menu-item"></div>
          <div class="gap"></div>
          <div class="menu-item"></div>
          <div class="gap"></div>
          <div class="menu-item"></div>
        </div>
      </div>
    </div>
    <script>
      const docker = document.querySelector(".docker");
      const items = document.querySelector(".menu").children;
      const range = 500;
      const maxScale = 1.8;
      const layout = (curve) => {
        for (const item of items) {
          const rect = item.getBoundingClientRect();
          const x = rect.x + rect.width / 2;
          const scale = curve(x);
          item.style.setProperty("--i", scale);
        }
      };
      const baseCure = (x) => {
        if (x < 0) return 0;
        if (x > 1) return 0;
        return Math.sin(x * Math.PI);
      };
 
      const createCure = (totalXDis, topX, minY, maxY) => {
        return function curve(x) {
          const beginX = topX - totalXDis / 2;
          const endX = topX + totalXDis / 2;
          if (x < beginX) return minY;
          if (x > endX) return minY;
          const yDis = maxY - minY;
          return baseCure((x - beginX) / totalXDis) * yDis + minY;
        };
      };
      docker.onmousemove = (e) => {
        const curve = createCure(range, e.clientX, 1, maxScale);
        layout(curve);
      };
      docker.onmouseleave = () => {
        layout(() => 1);
      };
    </script>
  </body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/686866