Question

我正在尝试执行以下操作，但是不确定是否可行/如何进行。是否可以在CSS样式中制作此动画。

以下是HTML-我正在尝试生成一些动画，以将以下文本用数字1和0填充。我设法获得了一些JavaScript来为1,0创建动画，但不确定如何填充“ DEVELOPER”（带有文字的文字）组成每个字母。

var outputbinary = document.querySelector(".output");

var optionsarray = [0, 1];
var binaryarray = [];


setInterval(function() {

  if (binaryarray.length <= 2000) {
    var binarynumber = optionsarray[Math.floor(Math.random() * optionsarray.length)];
    binaryarray.push(binarynumber);
    var str = binaryarray.join(" ");
    outputbinary.innerText = str;
  }

}, 10);

<div class="output"></div>
<div class="loading">Developer</div>
<div>

我希望文本开发者显示为

 111  0000
 1  1 0
 1  1 000
 1  1 0
 111  0000 //etc

Answer 1

此示例从一系列零和一开始构建字母，将其添加到页面中，然后淡入。

它将它们显示在列表中。每个列表项都有一个容器，该容器使用CSS网格显示子单元。

const mapping = {
  D: '1111010001100011000111110',
  E: '1111110000111101000011111',
  V: '1000110001100010101000100',
  O: '0111010001100011000101110',
  L: '1000010000100001000011111',
  P: '1111010001111101000010000',
  R: '1111010001111101000110001'
};

// Grab the binary mapping of the letter and
// return some HTML
function binaryise(letter) {
  const arr = mapping[letter].split('');
  return arr.map(char => `<div class="${char === '0' ? 'zero' : 'one'}">${char}</div>`).join('');
}
  
// For each letter in the word create a 
// binary version and return it in a list-item container
function processWord(arr) {
  const items = arr.map((letter, i) => {
    const binaryised = binaryise(letter);
    return `
      <li data-id=${i}>
        <div class="container">${binaryised}</div>
      </li>
    `;
  }).join('');
  return `<url>${items}</ul>`;
}

// Get a random number that hasn't previously appeared
function getRandom(arr, memo) {
  const index = Math.floor(Math.random() * arr.length);
  return memo.includes(index) ? getRandom(arr, memo) : index;  
}

// Once the html has been added to the page
// (all set with opacity to 0)
// iterate over the letters turning the
// opacity of each to 1
function showLetters(arr, memo) {
  memo = memo || [];
  if (memo.length !== arr.length) {
    const index = getRandom(arr, memo);
    const letter = arr[index];
    const el = document.querySelector(`[data-id="${index}"]`);
    setTimeout(() => {
      el.classList.add('show');
      memo.push(index);
      showLetters(arr, memo);
    }, 1000);
  }
}

var wordArr = 'Developer'.toUpperCase().split('');

// Process all the letters of the word and add them
// to the page...
const html = processWord(wordArr);
output.insertAdjacentHTML('beforeend', html);

// ...then fade them in
showLetters(wordArr);

ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  list-style-type: none;
}

li {
  display: inline-block;
  margin-right: 1em;
  opacity: 0;
}

.container {
  width: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.show {
  opacity: 1;
  transition: opacity 4s linear;
}

.zero {
  opacity: 0.2;
}

<div id="output"></div>

CSS文本样式-使用数字1和0的动画填充文本-HTML

1 个答案: