html5网站打字特效代码

HTML5打字特效是一个受欢迎的功能，可以让网站更加有趣和吸引人。HTML5的打字特效可以让文字一个一个的显示出来，就像打字的效果。下面是一个HTML5打字特效的代码示例：

代码如下：

<style>
#effect {
font-size: 20px;
font-weight: bold;
color:#ff0000;
overflow:hidden; 
white-space: nowrap; 
border-right: 3px solid orange;
width: 14em;
animation: typing 3s steps(18, end), 
blink-caret .5s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 14em }
}
@keyframes blink-caret {
from, to { border-color: transparent}
50% { border-color: orange; }
}
</style>
<div id="effect"></div>
<script>
var text = "徐结华的记事本www.xu219.cn";
var i = 0;
function typing() {
if (i < text.length) {
document.getElementById("effect").innerHTML += text.charAt(i);
i++;
setTimeout(typing, 50);
}
}
typing();
</script>