[分享]css3打字特效

在网页设计中，打字特效是一种常见的效果，可以为网页增加很好的视觉效果。在CSS3中，通过使用一些新的属性和选择器，可以创建出各种各样的打字特效。/ 基础样式 / .typewriter { overf...

在网页设计中，打字特效是一种常见的效果，可以为网页增加很好的视觉效果。在CSS3中，通过使用一些新的属性和选择器，可以创建出各种各样的打字特效。

/* 基础样式 */
.typewriter {
  overflow: hidden; /* 隐藏超过div宽度的部分 */
  border-right: .15em solid orange; /* 光标样式 */
  white-space: nowrap; /* 取消换行 */
  letter-spacing: .15em; /* 字符间距 */
  animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite; /* 组合动画 */
}

/* 打字动画 */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* 光标动画 */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
} 

上面的代码实现了一个简单的打字特效。首先定义了一个类名为“typewriter”的div元素，通过设置overflow属性为hidden，使得超出div宽度的内容被隐藏起来；设置border-right属性为.15em solid orange，使得光标的样式变为一个橙色竖线；设置white-space属性为nowrap，取消换行，以便实现类似打字机一样的效果；设置letter-spacing属性为.15em，增加字符间距，使得个字符之间的距离更加明显。

然后是关键的动画效果。使用@keyframes定义了两个动画：typing和blink-caret。通过组合这两个动画，实现了一个打字特效。typing动画从0到100%改变了div元素的宽度，从而实现了一个逐字显示的效果。blink-caret动画则是利用边框颜色的变化，产生了一个光标闪烁的效果。

总的来说，通过使用CSS3提供的动画属性和选择器，可以相对简单地实现出各种各样的打字特效效果，为网页增添了丰富的视觉体验。