用CSS 画一个200w的小米logo🥳mi logo 的超椭圆边框用css paintWorklet 来实现。具体实

参考:www.bilibili.com/video/BV1V6… juejin.cn/post/694581…

话不多说先建一个html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>mi logo</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    (CSS.paintWorklet || paintWorklet).addModule("logo.js");
  </script>
</html>

mi logo 的超椭圆边框用css paintWorklet 来实现。具体实现方法发布会上雷总都告诉咱们了。

|x|^3 + |y|^3 = 1

直接上代码：

//eslint-disable-next-line
registerPaint(
  "logo",
  class {
    paint(ctx, size) {
      ctx.fillStyle = "rgb(255, 94, 26)"; // 小米橙

      const n = 3;
      ctx.beginPath();

      // 根据div 宽高 将div 点的坐标映射到 单位方块中。
      const AxisX = (x) => ((x - size.width / 2) / size.width) * 2; 
      const AxisY = (y) => ((y - size.height / 2) / size.height) * 2;

      for (let i = 0; i < size.width; i += 0.5) {
        for (let j = 0; j < size.height; j += 0.5) {
          if (Math.abs(AxisX(i)) ** n + Math.abs(AxisY(j)) ** n < 1) {
          // 遍历每一个点, 如果normalize 过的点满足 |x|^3 + |y|^3 < 1就把这个点着色
            ctx.fillRect(i, j, 0.5, 0.5);
          }
        }
      }
      ctx.closePath();
      ctx.fill();
    }
  }
);


#root {
  background: paint(logo);
  width: 100px;
  height: 100px;
  position: relative;
}

这里已经把框框画出来了。剩下的MI 的部分100w可以用伪类 + shadow 实现：

这里推荐一个我经常关注的博主 CodingStartup起码课 : juejin.cn/user/249773… 有非常棒的css文章。 MI的实现也是参照他的视频: www.bilibili.com/video/BV1V6…

// 用来画 MI 的 M 的外框部分， 就是弄一个方块，设置好位置和圆角，去掉底边
#root::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 35px;
  left: 14px;
  top: 25px;
  border: 1px solid #fff;
  border-left: 12px solid #fff;
  border-right: 12px solid #fff;
  border-top: 10px solid #fff;
  border-bottom: 0;
  border-radius: 0px 20px 0px 0px;
}

// 用来画 MI 的 M 中间的小竖和右边的I， I用小竖的两个阴影上下拼起来的。
#root::after {
  content: "";
  position: absolute;
  background: #fff;
  width: 13px;
  height: 25px;
  left: 35px;
  top: 45px;
  box-shadow: 40px -18px 0px #fff, 40px 0px 0px #fff;
}

emmm 简简单单这就完事了。你们说雷总这200W花的值不值🌝