Css打字机效果，⽂字循环逐个出现，逐个删除
最近在做个⼈⽹站，想实现下⾯的效果，在⽹上搜了下，基本都只有打字机效果，没得出现后再删除的效果，于是就⾃⼰简单写了个，功能⽐较简单，详细的描述在注释中都有说明。
效果如下：
html ⽂本
<h1 id="box"></h1>
css 样式
/
/ keyframes 可根据展⽰的⽂本长度，⾃⾏添加，我的格式为： @keyframes  ‘type’+'⽂本长度'
@keyframes typing10 {
from {
width: 0;
}
50% {
width: 10ch;
}
100% {
width: 0
}
}
@keyframes typing4 {
from {
width: 0;
}
50% {
width: 4ch;
}
100% {
width: 0
}
}
@keyframes typing6 {
from {
width: 0;
}
50% {
width: 6ch;
}
100% {
width: 0
}
}
@keyframes caret { 50% { border-color: transparent; } }
h1 {
width: 0;
animation: typing 6s steps(15) infinite,caret 1s steps(1) infinite;
white-space: nowrap;
overflow:hidden;
border-right: .05em solid;
font-family: Consolas, Monaco, monospace;//注意这⼉，要设置字体为等宽字体,ch才会充分发挥效果}
js⽂件
const arr = ['TypeScript','JavaScript','⼩程序','less','sass' ];//显⽰的⽂本
const dom = ElementById('box')
let j = 0; //从数组第⼀个开始展⽰
// 递归函数
const func =(j) => {
if(j < arr.length){ // 当达到数组长度时，就从头开始继续
css特效文字const item = arr[j]
const itemLen = item === '⼩程序' ? 6 : item.length; // 汉字是占两个ch
dom.innerHTML = item; // 显⽰⽂字
for (var i = 0, len = itemLen; i < len; i++) { // 添加⽂本效果
var textLen = Content.length, s = dom.style;
s.animationTimingFunction = "steps(" + textLen + "),steps(1)";; //动态设置steps
s.animationName = `typing${itemLen}`; //⽂本长度不同，展⽰的宽度就不同，所以需要动态设置      s.animationDuration = `${itemLen/2}s,0.5s`; //这⼉设置速度
}
setTimeout(() => {
func(j + 1)
},itemLen*500) //这⼉和上⾯的animationDuration速度⼀致，只不过这⼉是毫秒，所以要乘以1000
}else{
func(0); //就从头开始继续
}
}
func(j);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。