零基础学做网站培训介绍

当前位置:

CSS3实现网站文字打字效果

我们做网站时,经常看到有些网站上会有文字打字效果,就是一段文字不是直接显示,而是一个字一个字自动打出来的。实现效果如下图:

怎么实现这种网站文字打字效果呢?使用CSS3就可以实现。代码如下:


<p>CSS3实现网站文字打字效果</p>
<style>
@keyframes cursor {
 50% {
 border-color: transparent;
}
}
@keyframes text {
from {
width: 0;
}
}
p {
    width: 35ch;
    border-right: solid 1px #000;
    white-space: nowrap;
    overflow: hidden;
    font: 28px monospace;
    animation: cursor 1s infinite step-end, text 4s steps(35);
}
</style>

就是这么简单的CSS代码就可以实现网站文字打字效果,我们自己做网站时,也可以使用上面的代码来实现这种效果。

相关阅读:

CSS3选择器有哪些

CSS3背景图固定:设置背景图片不随拖动条滚动

CSS3中display:inline-block 和float的区别

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 通过CSS样式可以控制网页中各个元素的显示方式,通过CSS样式可以在网页中画出一个三角形,圆形等形状。(了解更多CSS知识,请学习CSS视频教程)CSS
  • 什么是自适应网页随着网站浏览设备屏幕大小不同(包括PC,IPAD,手机等浏览设备),为了适应不同的屏幕,做网站制作时可以自动根据浏览网站的屏幕尺
  • 在实际网站制作过程,往往需要给一个列表添加项目序列编号,使数据给用户展现更加清楚。如下图:给一个列表添加这样的项目序列编号,我们可以
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • HTML文字倾斜标签是什么 (120617 次浏览)
    HTML文字倾斜标签是什么?我们在做网站时,有的文字需要倾斜显示,这时就需要使用HTML文字倾斜标签了。HTML斜体标签:HTML 斜体标签元素知识与
  • 在制作网页中我们时常会将一些文字、图片等做成超链接,但如果在制作时,某些链接页面还没有做好,这时我们就可以用的空链接,提醒自己哪些地方需要添
  • 只要会打字,轻松建站 (130374 次浏览)
    作者: 夏众院俱乐部Email: 2983457128@qq.com详细内容:只要会打字上千种行业模板只需输入文字、图片就能做出你想要的网站这个网站就是
  • 我们做网站时,经常看到有些网站上会有文字打字效果,就是一段文字不是直接显示,而是一个字一个字自动打出来的。实现效果如下图:怎么实现这
  • Wordpress标签云是将网站里的标签附着不同的颜色,好像一个七彩的云一样,在自己建网站时,可以美化我们的网站。效果如下:我们在学习怎么做
  • 使用WP程序制作门户网站时,需要调用网站头条新闻,让第一个文章标题与其它的标题不一样,以形成新闻头条的效果。如下图:如何使用wp网站代码
  • 有些网站的文字的后面或者下面都有阴影效果,这样使文字更有立体感。并且可以根据自己网站版面要求去设置阴影的颜色,离文字的距离,阴影范围的大小等