html文本逐个出现,js和css3实现字体逐个显示

* {

padding: 0;

margin: 0;

}

#picture {

position: absolute;

width: 200px;

height: 200px;

top: 100px;

left: 100px;

}

#show {

position: absolute;

width: 0;

height: 1.5em;

top: 400px;

left: 100px;

overflow: hidden;

white-space： pre；  //保留空白字符；在英文的打印中会用到；如果没有这个属性，会出现先闪烁完，才出现英文单词的情况；

}

#picture:hover~#show {

animation: cursor 1s step-end infinite,typing 8s steps(20) forwards;          //forwards停在动画的结束状态；

border-right: 2px solid black;

}

@keyframes cursor {

50% {

border-color: transparent;                        //来实现右边框的闪烁；

}

}

@keyframes typing {

form {

width: 0;

}

to {

width: 20em;

}

}

https://hbimg.huabanimg.com/3dab484f2f5f33be47d45fcc549a6837e0decf7018283e-VJXMha_fw658"id="picture">

你是我的小呀小苹果~,怎么爱你都不嫌多~