文字输入动画

Question

如何使用 css 或 bootstrap 创建文本输入和删除动画？

我有三个标题，应该一个接一个地显示。 首先它应该显示输入第一个标题然后擦除第一个标题，然后输入第二个标题，然后擦除第二个标题。它应该继续这样做。

Answer 1

您可以使用简单的 js/jQuery 字符串操作来模拟 write 和 erase 函数

$(document).ready(function() {
  // take origin text
  var text = $('#content').text();
  // make content empty
  $('#content').text('');

  write(text);
});

function write(text) {
  var currentLetter = 0;
  var timer;

  //add letter by letter
  timer = setInterval(function() {
    $('#content').append(text[currentLetter]);

    // if it's end of text, call erase function.
    if (currentLetter == text.length) {
      clearInterval(timer);
      setTimeout(function() {erase(text);}, 1000);
    }

    currentLetter++;
  }, 2);
}

function erase(text) {
  var timer = '';
  var currentLetter = text.length - 1;

  // remove one letter from the end of text
  timer = setInterval(function() {
    $('#content').text(text.substring(0, currentLetter));

    // if no more text - write text back;
    if (currentLetter == 0) {
      clearInterval(timer);
      setTimeout(function() {write(text);}, 1000);
    }

    currentLetter--;
  }, 2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mauris arcu, auctor nec dui ut, accumsan imperdiet sapien. Cras eu varius dolor. Quisque tempus dapibus mattis. Donec tempus eleifend iaculis. Vivamus suscipit dui eu finibus consectetur. Curabitur dapibus ut mi quis vehicula. Vivamus vehicula lectus metus. In ex leo, fermentum sit amet laoreet at, tempus at urna. Quisque et ligula eget arcu convallis consectetur vel venenatis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce mollis risus in commodo bibendum. Donec lorem diam, auctor vel lectus vel, hendrerit semper nibh.</span>

Answer 2

希望这可能会有所帮助，我正在尝试使文本行都具有透明背景。

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="typing-animation-container">
        <h2 style="background-color: rgba(252, 156, 249, 0)">
          As Your Trusted IT Partner,
        </h2>

        <div class="d-flex justify-content-start align-items-center mt-1">
          <div class="typed-strings">
            <div class="typed">&nbsp;</div>

            <h3 style="background-color: rgba(252, 156, 249, 0)">
              This is a test
            </h3>

            <p>
              we maintain your existing systems for mission-critical success
            </p>

            <p>we enhance your systems to meet required efficiencies</p>

            <p>we develop new systems to meet continuing demand</p>

            <p>we predict what systems you will need in the future</p>
          </div>

          <div class="typed">&nbsp;</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

提炼以上代码后：

$(document).ready(function() {
  // take origin text
  var text = $('#content').text();
  // make content empty
  $('#content').text('');

  write(text);
});

function write(text) {
  var currentLetter = 0;
  var timer;

  //add letter by letter
  timer = setInterval(function() {
    $('#content').append(text[currentLetter]);

    // if it's end of text, call erase function.
    if (currentLetter == text.length) {
      clearInterval(timer);
      setTimeout(function() {erase(text);}, 1000);
    }

    currentLetter++;
  }, 20);
}

function erase(text) {
  var timer = '';
  var currentLetter = text.length - 1;

  // remove one letter from the end of text
  timer = setInterval(function() {
    $('#content').text(text.substring(0, currentLetter));

    // if no more text - write text back;
    if (currentLetter == 0) {
      clearInterval(timer);
      setTimeout(function() {write(text);}, 1000);
    }

    currentLetter--;
  }, 100);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mauris arcu, auctor nec dui ut, accumsan imperdiet sapien. Cras eu varius dolor. Quisque tempus dapibus mattis. Donec tempus eleifend iaculis. Vivamus suscipit dui eu finibus consectetur. Curabitur dapibus ut mi quis vehicula. Vivamus vehicula lectus metus. In ex leo, fermentum sit amet laoreet at, tempus at urna. Quisque et ligula eget arcu convallis consectetur vel venenatis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce mollis risus in commodo bibendum. Donec lorem diam, auctor vel lectus vel, hendrerit semper nibh.</span>|