CSS3 animation ch单位等宽字体+text-indent点点点动画实例
<!DOCTYPE html>
<html>
<head>
<meta>
<title>等宽字体模拟边框类型实战实例页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
@supports (display:none) {
dot {
display: inline-block;
3ch;
text-indent: -1ch;
vertical-align: bottom;
overflow: hidden;
animation: dot 3s infinite step-start both;
/* 等宽字体很重要 */
font-family: Consolas, Monaco, monospace;
}
}
@keyframes dot {
33% { text-indent: 0; }
66% { text-indent: -2ch; }
}
.grebtn{background:green;text-decoration: none;color:#fff;padding:10px;margin:20px;}
</style>
</head>
<body>
<a href="javascript:" class="grebtn">订单提交中<dot>...</dot></a>
</body>
</html>