<!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>
