有什么方法可以将颜色变化的网格动画到文本上吗？

Question

这是我到目前为止所拥有的：

HTML：

    <div id="title-pg">

      <h1 id="title">etch-a-sketch</h1>

      <div id="title-grid-ctn"></div>

    </div>

JavaScript：

let titlePage = document.querySelector("#title-grid-ctn");

createTitleGrid();

function createTitleGrid() {

  for (i = 0; i < Math.pow(10, 2); i++) {

    const titleGrid = document.createElement("div");

    titleGrid.classList.add("title-grid");

    titlePage.appendChild(titleGrid);

  }

}

const titleGrid = titlePage.querySelectorAll(".title-grid");

titleGrid.forEach((titleGrid) => {

  titleGrid.animate(

    [

      {

        backgroundColor: `rgb(${rdmNumber()}, ${rdmNumber()}, ${rdmNumber()})`,

      },

      {

        backgroundColor: `rgb(${rdmNumber()}, ${rdmNumber()}, ${rdmNumber()})`,

      },

    ],

    {

      duration: 2000,

      iterations: Infinity,

      delay: 0,

      easing: "linear",

      direction: "alternate",

    }

  );

});

我想将文本剪切在不断变化的颜色的网格上，但我无法找到一种方法来剪切网格的其余部分。

这是我想做的可能吗？

Answer 1

将文本移动到网格顶部并mix-blend-mode: lighten;在 CSS 中使用。看看这个实时片段：let titlePage = document.querySelector("#title-grid-ctn");createTitleGrid();function createTitleGrid() {&nbsp; for (i = 0; i < Math.pow(10, 2); i++) {&nbsp; &nbsp; const titleGrid = document.createElement("div");&nbsp; &nbsp; titleGrid.classList.add("title-grid");&nbsp; &nbsp; titlePage.appendChild(titleGrid);&nbsp; }}function rdmNumber() {&nbsp; return Math.floor(Math.random() * 255);}const titleGrid = titlePage.querySelectorAll(".title-grid");titleGrid.forEach((titleGrid, i) => {&nbsp; titleGrid.animate(&nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: 'red',&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; backgroundColor: 'blue',&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ],&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; duration: 2000,&nbsp; &nbsp; &nbsp; iterations: Infinity,&nbsp; &nbsp; &nbsp; delay: -i * 1000,&nbsp; &nbsp; &nbsp; easing: "linear",&nbsp; &nbsp; &nbsp; direction: "alternate",&nbsp; &nbsp; }&nbsp; );});body {&nbsp; margin: 0;}#title-pg {&nbsp; position: relative;}#title-grid-ctn {&nbsp; display: flex;&nbsp; flex-wrap: wrap;}.title-grid {&nbsp; width: 1.5em;&nbsp; height: 1.5em;&nbsp; display: inline-block;}#title {&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: 0;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; background: #fff;&nbsp; font: 900 4em sans-serif;&nbsp; margin: 0;&nbsp; mix-blend-mode: lighten;&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;}<div id="title-pg">&nbsp; <div id="title-grid-ctn"></div>&nbsp; <h1 id="title">etch-a-sketch</h1></div>