css手写动态加载中...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { margin: 200px; } .load-indicator { font-size: 16px; color: black; } .span { display: inline-block; overflow: hidden; height: 1em; line-height: 1; vertical-align: -.25em; } .span::after { display: block; white-space: pre-wrap; content: "...\A..\A."; animation: loading 3s infinite step-start both; } @keyframes loading { 33% { transform: translate3d(0, -2em, 0); } 66% { transform: translate3d(0, -1em, 0); } } </style> </head> <body> <div class="box"> <div class="load-indicator">加载中<span class="span"></span></div> </div> </body> </html>
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18