typed.js

官网链接

typed.js官网

usage（cdn）

引入js

<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

    var typed = new Typed('#element', {
      strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
      typeSpeed: 50,
    });

html

<span id="element"></span>

case

与jquery.appear插件一起使用，当dom元素出现时，开始打字效果

效果演示

js

<script src="https://cdn.jsdelivr.net/npm/jquery.appear@1.0.1/jquery.appear.min.js"></script>

<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

   const option = {
            strings: ['感知用心，专注提升 <br> 以技术与服务 <br> 助力实现品牌愿<span class="position-relative d-inline-block">景<span class="fs-0 lh-0 position-absolute start-110 d-inline-block bg-warning rounded-circle circle-1_5r top-80"></span></span>'],
            typeSpeed: 100,
            onComplete: function() {
                $(".typed-cursor").hide();
            }
        }
        $('#specialWord').appear(() => {
            var typed = new Typed('#element', option);
        })

onComplete 动画完成后要执行的方法

html

<p class="fs-9 lh-sm mb-0">
     <span class="" id="element"></span>
</p>

css

/* 光标的样式 */

.typed-cursor {
            font-size: 10rem;
            opacity: 1;
            font-weight: 100 !important;
            -webkit-animation: blink 0.7s infinite;
            -moz-animation: blink 0.7s infinite;
            animation: blink 0.7s infinite;
        }
        @keyframes blink {
            10% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @-webkit-keyframes blink {
            10% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @-moz-keyframes blink {
            10% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }