css3 animation 动画应用2 —— 打字效果

来源：互联网发布：词云图制作软件编辑：程序博客网时间：2024/05/16 01:40

来源：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>

中的字数必须和css中steps()中的值一致，

动画cursor是鼠标一闪一闪的效果

动画typing是字一个一个出现的效果

0 0