牢记网客网域名:Wkone.cn网客网论坛
关注网社
扫官微看看大世界
手机版
扫码打开掌上乐圈
收起左侧

纯css实现简单的打字机效果

0
回复
158
查看
[复制链接]

 成长值: 11665

铭牌:未领取
10100
等级头衔

等級:无上至尊

Rank: 129Rank: 129Rank: 129

钻石:1862 颗

氪券:580 票

押金:0 元

K币:2125 枚

 

土豪勋章055022铁粉×12084

发表于 2019-10-4 00:45:33 | 显示全部楼层 |阅读模式

马上注册~开启兴趣社区世界~享技术乐生活。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
以下几行代码可以实现纯css实现打字机的效果。8 V/ C$ ]! G# y
css部分:
  1. .print{! L2 D/ g1 J2 s. u, X( r& ]
  2. width:250px;% U! r0 B2 S; q, A+ q$ s- f
  3. white-space:nowrap;# Y& n  }& i4 ~2 w# U- F
  4. overflow:hidden;5 ]* I5 y( M- _: h
  5. -webkit-animation: dy 3s steps(60, end) infinite;) D3 Q2 N8 }6 [0 d
  6. animation: dy 3s steps(50, end) infinite;
    - P6 {! l$ q! s+ z/ v/ m# H% {1 ?, q
  7. }, u4 `+ l4 d/ G
  8. @-webkit-keyframes dy{
    2 [6 `0 `' D' G% P" I* F
  9. from { width: 0;}. _4 ?" ~. t5 i$ [, s! V0 F
  10. }# q' R9 ~6 D% U* `( q' y
  11. @keyframes dy{5 `3 I1 X& W- }+ d' F3 n5 o! L
  12. from { width: 0;}
    ) G; `5 E: Y3 n% f* C
  13. }
复制代码
5 L6 X+ g7 M4 k+ Y
html部分:
  1. <p class="print">网客网 新颖的创意,精美的视觉</p>
复制代码
" U$ S. ?9 q& w# X9 e! p# ]4 y$ F4 q, W7 V
6月不努力,九月当兄弟,我在训练场上等着你!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

发布资源 返回列表 客服中心 搜索 官方QQ群
技术资源享你所想

人工客服电话

1314-520-6071

客服QQ:3388700000

官方邮箱:1@wkone.cn

站长QQ:785256319

关注我们
  • 关注官方微信

  • 手机APP