loading加载动画
演示地址:https://xibushijie.github.io/loading/loading.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> /* loading */ .loading { position: relative; } .loading::before { width: 4px; height: 4px; margin: auto; content: ''; -webkit-animation: spinZoom 1s steps(8) infinite; animation: spinZoom 1s steps(8) infinite; border-radius: 100%; box-shadow: 0 -10px 0 1px currentColor, 10px 0 currentColor, 0 10px currentColor, -10px 0 currentColor, -7px -7px 0 .5px currentColor, 7px -7px 0 1.5px currentColor, 7px 7px currentColor, -7px 7px currentColor; /* center */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; } /* loading动画 */ @-webkit-keyframes spinZoom { 0% { -webkit-transform: scale(.75) rotate(0); } 100% { -webkit-transform: scale(.75) rotate(360deg); } } @keyframes spinZoom { 0% { transform: scale(.75) rotate(0); } 100% { transform: scale(.75) rotate(360deg); } } </style> </head> <body> <a href="" class="btn loading"> </a> </body> </html>