纯css实现简单的打字效果

作者 : alan 本文共271个字,预计阅读时间需要1分钟 发布时间: 2021-02-8 共439人阅读

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

css部分:

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

html部分:

  1. <p class=“print”>SBKKO 新颖的创意,精美的视觉</p>

时光资源网平台互联网从业者提供精品源码下载和建站资源的交流分享
时光资源网-大蓝网络科技 » 纯css实现简单的打字效果

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们。