您的足迹:首页 > 网页源码 >纯css实现网页打字效果

纯css实现网页打字效果

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

纯css实现网页打字效果

CSS部分如下:

.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 { width: 0;}
}
@keyframes dy{
    from { width: 0;}
}
调用:

<p class="print">纯css实现网页打字效果,请在这里添加文字,王商博客(http://ws234.com/)谢谢你的支持!</p>
演示地址:http://ws234.com/yanshi/cssdazi

本文作者:王商   文章标题:纯css实现网页打字效果
本文地址:http://ws234.com/post-436.html     本文已被百度收录!
版权说明:若无注明,本文皆为“王商博客”原创,转载请保留文章出处。

相关推荐

发表评论

路人甲 表情

看不清楚?点图切换

网友评论(6)

因为博主我才知道emlog这个开源博客系统,跟王哥学习,支持
海南SEO小建 4个月前 (2016-10-17) 回复
@海南SEO小建:谢谢支持,大家一起学习交流。
王商 4个月前 (2016-10-19) 回复
css是真心的强大。
192.68.1.1 4个月前 (2016-10-14) 回复
谢谢分享
购物街 4个月前 (2016-10-14) 回复
之前也写过   不过跟你的有一点点不同
南京美贝尔 4个月前 (2016-10-14) 回复
之前也写过   不过跟你的有一点点不同  赞啦  这么有分享精神的人
南京美贝尔 4个月前 (2016-10-14) 回复