css3實現的打字機效果程式碼例項

admin發表於2017-02-21
CSSS3

在css3之前要想實現打字效果，通常需要藉助於javascript。

具體可以參閱js如何將字串中的字元逐字輸出一章節。

下面分享一段使用css3實現的打字機效果。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width: 0px;
  height: 100px;
  animation: stepAnimate 4s linear;
  animation-timing-function: steps(10,end);
  font-size: 12px;
  white-space:nowrap;
  overflow: hidden;
}
@keyframes stepAnimate {
  0% {
    width: 0px;
  }
  100% {
    width: 120px;
  }
}
</style>
</head>
<body>
<div>一二三四五六七八九十</div>
</body>
</html>

相關文章