[分享]css3打字机效果

CSS3是一种强大的样式表语言，它可以为网页带来非常多的视觉效果。其中，打字机效果是一种很有趣的动态效果，可以让文本逐个字地出现在页面上。下面我们来看看如何使用CSS3实现这种效果。/ HTML结构 ...

CSS3是一种强大的样式表语言，它可以为网页带来非常多的视觉效果。其中，打字机效果是一种很有趣的动态效果，可以让文本逐个字地出现在页面上。下面我们来看看如何使用CSS3实现这种效果。

/* HTML结构 */
<div class="typing">
  <p>这里是要输出的文本</p>
</div>

/* CSS代码 */
.typing p {
  overflow: hidden; /* 隐藏溢出文本 */
  border-right: .15em solid #666; /* 光标样式 */
  white-space: nowrap; /* 禁止换行 */
  margin: 0; /* 去除默认边距 */
  letter-spacing: .15em; /* 字母之间的间距 */
  animation:
    typing 3.5s steps(40, end), /* 动画名称和时间 */
    blink-caret .75s step-end infinite; /* 光标闪烁效果 */
}

/* 打字机效果动画 */
@keyframes typing {
  from {
    width: 0; /* 文本区域宽度为0 */
  }
  to {
    width: 100%; /* 文本区域宽度为100% */
  }
}

/* 光标闪烁效果 */
@keyframes blink-caret {
  from, to {
    border-color: transparent; /* 无颜色 */
  }
  50% {
    border-color: #666; /* 有颜色 */
  }
} 

通过设置p标签的样式，我们实现了打字机效果。关键是通过animation属性设置了两个关键帧，分别控制了文本区域的宽度和光标的闪烁效果。此外，其他样式也对打字机效果有一定的影响，比如控制字母之间的间距、禁止换行等。

总的来说，CSS3的打字机效果非常有趣、实用，可以让页面更加动态、吸引人。我们可以根据实际需要调整相应的参数，从而得到最佳的效果。