html中颜色打字机效果,Css打字机效果

插件预览图

使用教程

代码展示

vue页面使用

The cat and the hat.

Style

.typewriter {

width: 390upx;

margin: auto;

}

.typewriter .text {

font-size: 40upx;

overflow: hidden;

border-right: 2upx solid orange;

white-space: nowrap;

margin: 0 auto;

letter-spacing: 2;

animation:typing 3.5s steps(40, end),blink-caret .75s step-end infinite;

}

@keyframes typing {

from {

width: 0

}

to {

width: 100%

}

}

@keyframes blink-caret {

from,

to {

border-color: transparent

}

50% {

border-color: orange;

}

}

兼容性

全平台兼容