0°

纯css实现简单的打字效果

以下几行代码可以实现纯css实现打字机的效果。

css部分:

.print{
width:250px;
white-space:nowrap;
overflow:hidden;
-webkit-animation: dy 3s steps(60, end) infinite;
animation: dy 3s steps(50, end) infinite;
}
@-webkit-keyframes dy{
from { width: 0;}
}
@keyframes dy{
from { width: 0;}
}

html部分:

<p class="print">SBKKO 新颖的创意,精美的视觉</p>

演示效果:

SBKKO 新颖的创意,精美的视觉

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论