刘明野的博客
纯css实现网页打字效果
  • 2016年10月13日
  • 干货分享
  • 1 评论
  • 140 汉字
  • 38 热度

我们经常看到别人网站上的一个字符逐个出现的打字效果,效果真的挺不错的,其实我们完全可以利用纯css实现网页打字效果。

纯css实现打字效果代码分享

CSS部分如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

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

调用:

<p class="print">纯css实现网页打字效果,请在这里添加文字,刘明野的博客谢谢你的支持!</p>

演示:

纯css实现网页打字效果,请在这里添加文字,刘明野的博客谢谢你的支持!

本文由 刘明野 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: 2016-10-13 16:25:31