侧边栏壁纸
    • 累计撰写 204 篇文章
    • 累计收到 555 条评论
    html + css 实现无需 js 的打字效果
    2022-10-02  69 阅读 0 评论 1 点赞

    html + css 实现无需 js 的打字效果

    奉天
    2022-10-02 / 0 评论 / 69 阅读 / 检测收录中......
    温馨提示:
    本文最后更新于2022年10月02日,已超过543天没有更新,若内容或图片失效,请留言反馈。
    以前要达到类似在电脑上打字的效果,需要 js+html 。今天我将介绍一种新方法。本文主要介绍纯 html+css 实现打字效果,有一定的参考价值,大家可以学习一下。提供所有代码,可以直接使用。

    样品

    19359146-21b92e341292d392..gif

    原理分析

    可以将动画看做三个不同的层次:

    1. 最底层的文字
    2. 中间挡住文字的背景
    3. 最上层的光标

      字是静止的,而中间的背景和最上层的光标是动态的。

    初始时,背景挡住所有的文字,光标在最左边。

    动画进行时,背景和光标以相同的步伐从左往右移动。

    动画结束时,背景不再遮挡文字,光标则在最右边闪烁。

    这种实现唯一的好处是不需要 js,但缺点是只能用于一行文本,多行文本理论上可以实现,但是比较麻烦。

    通过CSS代码

    <!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>

    javascript 实现打字效果 1

    19359146-64a2b5fee22dd2c5..gif

    <!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>

    javascript 实现打字效果 2

    19359146-6ccf541cf3a00ee8..gif

    <!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>
    1

    海报

    正在生成.....

    评论 (0)

    取消