纯css实现打字机效果

tanzhongfa2 发表于 2022-3-19 10:46

css代码div {
         overflow: hidden;
         font-size: 20px;
         width: 0;
         height: 30px;
         background-color: pink;
         /* 让我们的文字强制一行内显示 */
         white-space: nowrap;
         /* steps 就是分几步来完成我们的动画有了steps 就不要在写 ease 或者linear 了 */
         animation: w 4s steps(10) forwards;
   }

   @keyframes w {
         0% {
            width: 0;
         }
         100% {
            width: 200px;
         }
   }
HTML代码
<div>世纪佳缘我在这里等你</div>

mingbaijun 发表于 2022-12-1 16:44

<HTML><HEAD><TITLE>打字机效果</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT>
var msg="因为陌生，所以勇敢，因为距离，所以美."
var len=msg.length
var seq=0
var speed=400
function type()
{
a.innerText=msg.substring(0,seq)
if(seq==len){seq=0}
else
seq++
setTimeout("type()",speed)

}

</SCRIPT>

<META content="MSHTML 6.00.3790.186" name=GENERATOR></HEAD>
<BODY onload=type()>
<DIV id=a style="FONT-SIZE:22pt; COLOR: fuchsia"></DIV>

tencentma 发表于 2022-3-19 13:24

纯css实现打字机效果，这个不错，有创意

sandon 发表于 2022-3-19 13:45

感谢分享！

mokson 发表于 2022-3-19 17:35

云中333 发表于 2022-4-6 14:43

有点儿针式打印的感觉

jiaong 发表于 2022-4-6 15:12

谢谢分享！

aiyao 发表于 2022-4-6 15:20

大佬有没有那种刚进入页面时那种淡入的

页: [1]

吾爱破解 - 52pojie.cn's Archiver

纯css实现打字机效果