纯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 新颖的创意,精美的视觉

文章链接:https://www.sbkko.com/1-10.html
文章标题:纯css实现简单的打字效果
文章版权:SBKKO 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!

给TA打赏
共{{data.count}}人
人已打赏
文章网站笔记

HTML中的那些空格,你知道多少?

2017-11-21 16:55:48

WP文章文章

尽量加速你的 WordPress 网站

2017-11-22 10:22:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索