文字以打字样式展现形式

实现文字以打字的形式出现

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>Documenttitle>
head>
<body>
    <div >
        <span id="demo"> span><span  class="blink">span>
    div>
    <script >
        var str = "停车坐爱枫林晚，霜叶红于二月花"
	var i = 0;
	function typing(){
		var demo= document.getElementById('demo')
		if(i<=str.length){
			demo.innerHTML = str.slice(0,i++) ;
			setTimeout("typing()",200)
		}else{
			demo.innerHTML = str;
		}
	}
	typing();
    script>
    <style>
       .blink{
		display:inline-block;
		width:8px;
        height: 8px;
		-webkit-animation:blink 1.2s infinite steps(1,start);
	}
        @-webkit-keyframes blink {
	  0%, 100% {
	        background-color: #000;
	        
	  }
	  50% {
	        background-color: #bbb;
	  }
	}
	

    style>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

相关阅读:
宠物赛道，用AI定制宠物头像搞钱项目教程
海思芯片pcie启动——pcie_mcc驱动框架的booter程序分析
构建企业级DNS系统（十）搭建Docker容器bind
[C++ 网络协议] 异步通知I/O模型
[SQL开发笔记]IN操作符: 在WHERE子句中规定多个值
TypeScript学习第二天：认识ts的数据类型
东风新能源电动汽车E60/E70在驾培驾考领域的CAN数据应用
关于Redis在windows上运行及fork函数问题
软件架构设计（业务架构、应用架构、数据架构、技术架构）
设计模式：迭代器模式（C++实现）

原文地址：https://blog.csdn.net/Christina0109/article/details/134284545