纯css实现网页打字效果

首页 > IT技术

作者：起点终站

2016年10月14日 16:39 星期五

字号：小中大

评论：11

我们经常看到别人网站上的一个字符逐个出现的打字效果，效果真的挺不错的，其实我们完全可以利用纯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>

以下为全部代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

<body>
<style>.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;}}</style>
<p class="print">纯css实现网页打字效果,请在这里添加文字。。。。</p>
</body>
</html>