js+css模仿打字效果

Posted 2020-10-29 冷月葬残花

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js+css模仿打字效果相关的知识，希望对你有一定的参考价值。

1.效果

2.源码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <style type="text/css">
        #myDiv{
            display: inline-block;
            width:500px;
            height:300px;
            background-color:rgba(0,0,0,0.3);
            color:hsla(0,100%,70%,1);
            word-wrap:break-word;
            line-height:30px;
            letter-spacing:3px;
            padding-left:3px;
            text-indent:40px;
            border-radius:5px;
            -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
            -moz-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
            box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1);
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var myDiv = document.getElementById("myDiv");
            var contentArr = "秋天来临了天空像一块覆盖大地的蓝宝石。村外那个小池塘睁着碧澄澄的眼睛，凝望着这美好的天色。一对小白鹅侧着脑袋欣赏自己映在水里的影子。山谷里枫树的叶子，不知是否喝了过量的酒，红的像一团火似的。村前村后的稻子，低着头弯着腰，在秋风中默默地等待着人们去收割，半空中，排着“人”字形的雁群，高兴的唱着歌，告别人们，向天边慢慢飞去……".split("");
            var content = "";
            var index = 0;
            var ID = setInterval(function () {
                content += contentArr[index];
                myDiv.innerHTML = content + "_";
                index++;
                if(index === contentArr.length){
                    myDiv.innerHTML = content ;
                    clearInterval(ID);
                    console.log("结束了");
                }
            },100);
        }
    </script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>

以上是关于js+css模仿打字效果的主要内容，如果未能解决你的问题，请参考以下文章

JS+CSS实现CodePen首页多行打字机动画，最通俗易懂版本

实战用CSS实现文本打字机效果

CSS打字效果

html + css + js 实现一个打字小游戏（建议收藏）

从打字机效果的 N 种实现看JS定时器机制和前端动画