版权声明：学习交流。。 https://blog.csdn.net/qq_38881495/article/details/83830218
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交订单中</title>
<style>
a{
width: 100%;
height: 100%;
background: #00bc12;
padding: .4rem;
border-radius: 6px;
color: #fff;
text-decoration: none;
}
span {
display: inline-block;
height: 1em; line-height: 1;
vertical-align: -.25em;
overflow: hidden;
}
span::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: span 3s infinite step-start both;
}
@keyframes span {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}
</style>
</head>
<body>
<a href="javascript:" class="grebtn">订单提交中<span>...</span></a>
</body>
</html>
