纯css实现打字机效果

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

css代码

[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代码

[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

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

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 纯css实现打字机效果

免费评分

个人中心