我们应该感谢相遇,无论结局是喜是悲....
纯css实现网页打字效果
  • 首页 > IT技术
  • 作者:起点终站
  • 2016年10月14日 16:39 星期五
  • 浏览:4601
  • 字号:
  • 评论:9
  • 我们经常看到别人网站上的一个字符逐个出现的打字效果,效果真的挺不错的,其实我们完全可以利用纯css实现网页打字效果。

    CSS部分如下:


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


    如果不想重复打字,在css里的print 样式属性animation和-webkit-animation
    最后参数改为1就行,如下

    -webkit-animation: dy 3s steps(50, end) 1;
    animation: dy 3s steps(50, end) 1;


    html调用:

    <p class="print">纯css实现网页打字效果,请在这里添加文字。。。。</p>
    


    以下为全部代码:
      您阅读这篇文章共花了:  
    本文作者:起点终站      文章标题: 纯css实现网页打字效果
    本文地址:https://blog.hellozwh.com/?post=215
    版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
    火端网络2016-11-04 22:55
    确实很酷啊!
    起点终站 没错,我就是那个帅逼站长2016-11-05 00:45
    呵呵
    李东辉博客2016-10-28 21:59
    这动效。可以啊
    起点终站 没错,我就是那个帅逼站长2016-10-30 20:56
    哈。瞎折腾
    Suppore 没错,我就是那个帅逼站长---的朋友2016-10-14 23:57
    不错的。
    起点终站 没错,我就是那个帅逼站长2016-10-15 14:03
    Suppore 没错,我就是那个帅逼站长---的朋友2016-10-15 15:04
    现在多说自带邮件回复了。挺好,每次都能收到你的2封邮件 [嘻嘻]
    起点终站 没错,我就是那个帅逼站长2016-10-16 13:26
    哈哈哈哈,多说的是一直都有,只是经常延迟收到
    淘金小站2016-10-14 18:01
    个性十足的网站~~
    返回顶部| 首页| 手气不错| 网站地图| sitemap| 装逼生成器| 站长介绍|

    Copyright © 2014-2017 起点终站   闽ICP备16011094号-1

    00:00 / 00:00
    顺序播放