html + css to achieve typing effect without js

In the past, to achieve the effect of typing on a computer, it was necessary js+html. Today I will introduce a new method. This article mainly introduces the pure html+cssrealization of typing effect, which has a certain reference value. You can learn it. All codes are provided and can be used directly.

1. Principle analysis

Animation can be thought of as three distinct levels:

bottom text
A background that blocks the text in the middle
top cursor

The text is static, while the background in the middle and the cursor on the top layer are dynamic.

Initially, the background blocks all text and the cursor is at the far left.

As the animation progresses, the background and cursor move from left to right at the same pace.

When the animation ends, the background no longer blocks the text, and the cursor blinks on the far right.

The only advantage of this implementation is that it does not require js, but the disadvantage is that it can only be used for one line of text, and multi-line text can theoretically be implemented, but it is more troublesome.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typing effect without js</title>
  <style>
    :root {
      /* number of characters */
      --steps: 345;
      /* animation time */
      --duration: 2.5s;
      --fontSize: 50px;
      --cursorSize: 20px;
    }
    .text {
      color: #333;;
      position: relative;
      display: inline-block;
      font-family: 'Courier New', Courier, monospace;
      font-size: var(--fontSize);
      line-height: 1;
    }
    .text::after {
      content: '';
      width: var(--cursorSize);
      height: var(--fontSize);
      background-color: black;
      z-index: 2;
      position: absolute;
      animation: blink 1s var(--duration) step-end infinite,
      moveCursor var(--duration) steps(var(--steps)) forwards;
    }
    .text::before {
      content: '';
      width: 100%;
      height: var(--fontSize);
      z-index: 1;
      position: absolute;
      background: linear-gradient(#fff, #fff) no-repeat top right;
      animation: showText var(--duration) steps(var(--steps)) forwards;
    }
    /* Cursor blink animation */
    @keyframes blink {
      0% {
        background-color: black;
      }
      50% {
        background-color: transparent;
      }
      100% {
        background-color: black;
      }
    }
    /* Cursor movement animation */
    @keyframes moveCursor {
      0% {
        left: 0%;
      }
      100% {
        left: 100%;
      }
    }
    /* background moving animation */
    @keyframes showText {
      0% {
        background-size: 100% 100%;
      }
      100% {
        background-size: 0% 100%;
      }
    }
  </style>
</head>
<body>
<div class="text">hello,world!</div>
</body>
</htm>

Two, javascript to achieve typing effect 1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typing effect with js</title>
</head>
<body>
<div style="font-size: 36px;" id="text">hello,world!</div>
<script>
  var str = 'In the past, to achieve an effect similar to typing on a computer,js+html was required. Today I will introduce a new method.';
  var i = 0;
  function typing(){
    var divTyping = document.getElementById('text');
    if (i <= str.length) {
      divTyping.innerHTML = str.slice(0, i++) + '_';
      setTimeout('typing()', 200);
    }
    else{
      divTyping.innerHTML = str;
    }
  }
  typing();
</script>
</body>
</html>

Three, javascript to achieve typing effect 2

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Typing effect with js</title>
  <style>
    .divcss5{word-wrap:break-word;font-size: 36px;}
  </style>
</head>
<body>
<div class="divcss5"  id="aa">
  In the past, to achieve an effect similar to typing on a computer, js+html was required. Today I will introduce a new method.This article mainly
</div>
<div style="display:none" id="w">
  In the past, to achieve an effect similar to typing on a computer, js+html was required. Today I will introduce a new method.This article mainly introduces pure html+css to achieve typing effect, which has certain reference value, you can learn about it. Provide all the code, you can use it directly.
</div>
<script language="javascript">
  var index=0;
  var word=document.getElementById("w").innerHTML;
  function type(){
    document.getElementById("aa").innerText = word.substring(0,index++);
  }
  setInterval(type, 200);
</script>
</body>
</html>

Finally, a front-end spree is given to everyone [Jiajun Yang: 581286372] to help everyone learn better!