CSS3打字效果詳解

antzone發表於2017-03-08
CSSS3

本章節分享一段程式碼例項，它使用純css3實現了打字機效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
  font-family:arial,sans-serif;
  font-size:18px;
  font-weight:normal;
}
body{
  background:rgba(0,0,0,.7);
}
@keyframes typing{
  from{width:0;}
}
@keyframes caret{
  0%{
    color:#fff;
  }
  50%{
    border-color:transparent;
    color:red;
  }
}
h1{
  width:30ch;/*文字的寬度*/
  overflow:hidden;
  white-space:nowrap;/*強制一行顯示*/
  margin:100px auto;
  border-right:.05em solid;
  animation:typing 8s steps(23),caret 1s steps(1) infinite;
  -webkit-animation: typing 8s steps(23),caret 1s steps(1) infinite;
}
</style>
</head>
<body>
<h1>本站的url地址是www.softwhy.com</h1>
</body>
</html>

上面的程式碼實現了打字機效果，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.@keyframes可以參閱CSS3 @keyframes一章節。

（2）.rgba可以參閱CSS3 RGBA一章節。

（3）.animation可以參閱CSS3 animation一章節。

相關文章