当前位置：首页 > Web开发 > 正文

caret 1s steps(1) infinite;} 字符串长度是108; 总结： js实现不用考虑兼容性

2024-03-31 Web开发

我们经常但愿一段文本中的字符逐个显示，模拟出一种打字的效果。类似于终端命令行的觉得。最终效果

用JS去实现：

html：

js代码：

JS实现给人的觉得又臭又长，那能不能用CSS去实现呢？
html：

<h1>The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.</h1> @keyframes typing { from { width: 0 } } @keyframes caret { 50% { border-right-color: transparent; } } h1 { font: bold 200% Consolas, Monaco, monospace; width: 108ch; white-space: nowrap; overflow: hidden; border-right: .05em solid; animation: typing 10.8s steps(108), caret 1s steps(1) infinite; }

字符串长度是108;

总结：

js实现不用考虑兼容性，CSS3实现的需要考虑兼容性，还要兼顾字符串的长度and宽度且不能换行==，不能换行，不过使用起来似乎更简单一些，具体的取舍还是看小我私家习惯。

增补:

以前看某公司的主页有这个打字动画的效果，今天看发明有个代码高亮的效果，于是优化了代码：

//... const timer = setInterval(() => { const showText = textArr.slice(0, index).join(‘‘); textDom.innerHTML = showText; let current = text.substr(index, 1); if (current === ‘<‘) { index = text.indexOf(‘>‘, index) + 1; } else { index++; } if (index > textArr.length) clearInterval(timer); }, 100); //... input(‘<span>The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is </span><span>the successor of the ZGMF-X10A Freedom.</span>‘);

效果似乎还是不一样，我要的效果应该是输入结束的时候才高亮，我先看看，实现了再增补...

继续增补：

看来只能祭出强无敌的正则匹配了==

//... const timer = setInterval(() => { const showText = textArr.slice(0, index).join(‘‘).replace(/\<span\>([\s\S]*)\<\/span\>/ig, ‘\<span\>$1\<\/span\>‘); textDom.innerHTML = showText; let current = text.substr(index, 1); if (current === ‘<‘) { index = text.indexOf(‘>‘, index) + 1; } else { index++; } if (index > textArr.length) clearInterval(timer); }, 100); //... input(‘The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is <span>the successor of the ZGMF-X10A Freedom.</span>‘);

完成
完整代码：

<!DOCTYPE html> <html lang="en"> <head> <title>自动打字</title> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1"> <style> body { background: #000; color: white; } @keyframes typing { from { width: 0 } } @keyframes caret { 50% { border-right-color: transparent; } } h1 { font: bold 200% Consolas, Monaco, monospace; width: 108ch; white-space: nowrap; overflow: hidden; border-right: .05em solid; animation: typing 10.8s steps(108), caret 1s steps(1) infinite; } </style> </head> <body> <span>>>></span> <span></span> <i></i> <h1>The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is the successor of the ZGMF-X10A Freedom.</h1> <script> const $ = attr => document.querySelector(attr); const textDom = $(‘.text‘); const cursorDom = $(‘.cursor‘); const input = (text) => { const textArr = text.split(‘‘); let index = 0; const timer = setInterval(() => { const showText = textArr.slice(0, index).join(‘‘).replace(/\<span\>([\s\S]*)\<\/span\>/ig, ‘\<span\>$1\<\/span\>‘); textDom.innerHTML = showText; var current = text.substr(index, 1); if (current === ‘<‘) { index = text.indexOf(‘>‘, index) + 1; } else { index++; } if (index > textArr.length) clearInterval(timer); }, 100); setInterval(() => { if (cursorDom.style.display === ‘none‘) { cursorDom.style.display = ‘inline‘; } else { cursorDom.style.display = ‘none‘; } }, 500); } input(‘The ZGMF-X20A Strike Freedom Gundam (aka Strike Freedom, Freedom) is <span>the successor</span> of the ZGMF-X10A Freedom.‘); </script> </body> </html>

用JS和CSS3实现打字动画

，

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31279.html

上一篇： like Gecko) Chrome/59.0.3071.115 Safari/537.36‘}};request(o
下一篇：其他同理在应用公共文件夹

caret 1s steps(1) infinite;} 字符串长度是108; 总结： js实现不用考虑兼容性

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢