More Unicode Patterns

最新推荐文章于 2025-10-30 09:15:11 发布

原创最新推荐文章于 2025-10-30 09:15:11 发布 · 193 阅读

CC 4.0 BY-SA版权

Creating is the most intense excitement one can come to know.

                                               —Anni Albers, On Designing

今天看到一篇博客，反正就是要实现下面的类似效果，反正我之前不知道怎么做。

在这里插入图片描述
其实也不是完全不知道怎么做，就是一个个的div里面放上一个汉字就可以了吧，但是每个div的大小太难配置了，可以说很难解决。不知道这种布局的官方名称是什么，先叫做瓦片布局吧。

博客中是这么做的，就是grid布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      font-family: 黑体;
      box-sizing: border-box;
    }

    section {
      background-color: #09BB07;
      display: grid;
      width: 60vw;
      height: 30vw;
      overflow: hidden;
      grid-template-columns: repeat(60, 1vw);
      grid-template-rows: repeat(30, 1vw);
      grid-auto-flow: column;
      grid-auto-flow: row;
      /*grid-auto-flow: dense;*/
    }

    div {
      display: flex;
      justify-content: center;
      align-items: center;
      --n: 3;
      grid-column-end: span var(--n);
      grid-row-end: span var(--n);
      font-size: calc(var(--n) * 1vw);
      border: 1px solid red;
    }

  </style>
</head>
<body>

<section>
</section>
</body>
<script>
  let fragment=document.createDocumentFragment();
  for(let i=0;i<30;i++){
     fragment.append(document.createElement('div'));
  }
  document.querySelector('section').append(fragment);
  [...document.querySelectorAll('div')].forEach((div, index) => {
    div.style.setProperty('--n', Math.ceil(Math.random() * 10));
    div.innerHTML = String.fromCodePoint(Math.round(Math.random() * 20901) + 19968);
    // div.innerHTML = index;
  });
</script>
</html>

下图是上面代码跑起来的结果，我不断刷新的截屏gif
在这里插入图片描述