js实现文字字母多彩像素化变化动画效果代码-html代码-BFW代码库

js实现文字字母多彩像素化变化动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现文字字母多彩像素化变化动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        :root {
          --color-bg: #2B303A;
          --cell-size: min(1rem, 2vw);
          --letter-width: 5;
          --letter-height: 7;
        }
        
        .container {
          background-color: var(--color-bg);
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100vh;
        }
        
        .word {
          display: flex;
          flex-direction: row;
          gap: var(--cell-size);
        }
        
        .letter {
          width: calc(var(--letter-width) * var(--cell-size));
          height: calc(var(--letter-height) * var(--cell-size));
          display: grid;
          grid-template-columns: repeat(var(--letter-width), var(--cell-size));
          grid-template-rows: repeat(var(--letter-height), var(--cell-size));
        }
        
        .cell {
          transition: background-color .25s ease-in-out;
        }
    </style>



</head>

<body>
    <div class="container">
        <div class="word">Bazinga</div>
    </div>


    <script>
        const lettersDefinitions = {
          a: [
            0, 0, 1, 0, 0,
            0, 1, 0, 1, 0,
            1, 0, 0, 0, 1,
            1, 1, 1, 1, 1,
            1, 0, 0, 0, 1,
            1, 0, 0, 0, 1,
            1, 0, 0, 0, 1,
          ],
          b: [
            1, 1, 1, 1, 0,
            1, 0, 0, 0, 1,
            1, 0, 0, 0, 1,
            1, 1, 1, 1, 0,
            1, 0, 0, 0, 1,
            1, 0, 0, 0, 1,
            1, 1, 1, 1, 0,
          ],
          g: [
            0, 1, 1, 1, 0,
            1, 0, 0, 0, 1,
            1, 0, 0, 0, 0,
            1, 0, 0, 0, 0,
            1, 0, 1, 1, 1,
            1, 0, 0, 0, 1,
            0, 1, 1, 1, 0,
          ],
          i: [
            0, 1, 1, 1, 0,
            0, 0, 1, 0, 0,
            0, 0, 1, 0, 0,
            0, 0, 1, 0, 0,
            0, 0, 1, 0, 0,
            0, 0, 1, 0, 0,
            0, 1, 1, 1, 0,
          ],
          n: [
            1, 0, 0, 0, 1,
            1, 0, 0, 0, 1,
            1, 1, 0, 0, 1,
            1, 0, 1, 0, 1,
            1, 0, 0, 1, 1,
            1, 0, 0, 0, 1,
            1, 0, 0, 0, 1,
          ],
          z: [
            1, 1, 1, 1, 1,
            0, 0, 0, 0, 1,
            0, 0, 0, 1, 0,
            0, 0, 1, 0, 0,
            0, 1, 0, 0, 0,
            1, 0, 0, 0, 0,
            1, 1, 1, 1, 1,
          ],
        }
        const cellSettings = {
          height: 7,
          width: 5,
        }
        const colors = [
          '#f44336',
          '#e91e63',
          '#9c27b0',
          '#673ab7',
          '#3f51b5',
          '#2196f3',
          '#03a9f4',
          '#00bcd4',
          '#009688',
          '#4caf50',
     .........完整代码请登录后点击上方下载按钮下载查看