来源:http://www.smashingmagazine.com/2014/04/15/understanding-css-timing-functions/
上面的这篇文章中介绍了很多css3的动画效果,这里节选其中的打字效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title>Font Step Show</title> <style type="text/css"> @-webkit-keyframes typing { from { width: 0; } } @keyframes typing { from { width: 0; } } @-webkit-keyframes cursor { 50% { border-color: transparent; } } @keyframes cursor { 50% { border-color: transparent; } } .text { width: 0; border-right: .1em solid; overflow: hidden; font: 5em monospace; margin-top: 50px; -webkit-animation: cursor 1s step-end infinite; animation: cursor 1s step-end infinite; } #go:target .text { width: 6.6em; width: 11ch; /* Number of characters */ -webkit-animation: typing 8s steps(11),cursor 1s step-end infinite; animation: typing 8s steps(11),cursor 1s step-end infinite; } a { padding: 5px 10px; background: blue; color: #fff; border-radius: 8px; text-decoration: none; font: .9em Arial; margin-top: 10px; display: inline-block; } a:hover { opacity: 0.6; } </style> </head> <body> <div id="go"> <a href="#go">Start</a> <a href="#reset">Reset</a> <p class="text">smashingmag</p> </div> </body> </html>
<p class=”text”></p>
中的字数必须和css中steps()中的值一致,
动画cursor是鼠标一闪一闪的效果
动画typing是字一个一个出现的效果