CSS手写loading

2023-12-25 14:59:00 浏览数 (2)

原理其实很简单,找一张loading的静态图 旋转即可! 知识点:transform

代码语言:javascript复制
<!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>loading</title>
    <style>
        .loading {
            width: 96px;
            height: 96px;
            display: inline-block;
            vertical-align: middle;
            animation: e 1s steps(12) infinite;
/*
* 提示:该行代码过长,系统自动注释不进行高亮。一键复制会移除系统注释 
* background:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAASgklEQVR4Xu1dC1BUZ5a r74N/UYEwUYeIkTogOJrookLZJJhQlKV7CQgrpHNw3QcZ1GZNQZJtpoeFQnJisEtTXC2kpmEJItJXKMpNZBEjRqVKAsKREHk4dAIDU1D04/b97F1rO4U8UHfRrtbtLvKqpY 93983zn/4/zn/BdF/B fIoD6tHZ/5YifAB8rgZ8APwE RsDH1U9IC9BoNGRYWJhKpVI9LJVKpTqd7uqpU6cOIwjSrtVqWR9j6lb1E5EArLy8PCY9PX3JpEmT1AiCSFEUHWxvby// uuvP9 8efM/3ELAx8ITjoDvv/ eYFn2n2fPnl1qtVqjLRYLIpVKEY7jLh05cmR1U1PTwYlkBROOgJ9  klAUdTyGTNmbLVYLHIgIDAwECFJ0tDQ0KA2Go17srOzGR8rNu/qJxwBGo0GS0lJeXLRokXbUBSdTlEUIhKJhvv7 6/U1NSsXLly5VHevb8LBL1KQFVVFd7d3a1kWTbMaDR2qlSqgezsbMpdHAoLC8OffvrpZ5VK5WocxwmKoj5vbW2t3b9//7dlZWUD7pYH8u //77AYDCEkyQZajabdTKZTL969WrbeMpy5xmvEfDSSy9Jn3jiiYXJyckLhULhH4aGhna3t7cfPnv27NmioiKzO40G2YKCgqAHHnhgVkBAgMxqtV6eMmXKxczMzHEBlp fPykzM3NxfHz8b3Acf2pkZOTLxsbGQ/X19XVardbqbtvckfcaAR988MHiBQsW7JDJZJEoisoEAkGP0Wj870OHDv3P0aNHm3bv3j2ucTsrKwuHDo/3eQRB0MrKyt8uWrSoXKFQRNhsNmlAQECPTqd7/6uvvvrUbDa3eHJS9woBMPTI5fLn4uPjd9I0HWSz2ZCAgAAEw7CulpaW10iS/CI9PZ12R3PulCxM6jRNPz99 vSykZERudlsRmQyGUzqHadPn15rsVj2eXJS9woBoKVLly59au7cuVtZlp0OBJAkibAs29HU1PTvZ86c2avVan1CQFVVFRkeHp6TmJi40WQyRdrtdkQsFoNytJ88eXLN2bNn9094C4CVS1BQUNxjjz2WBZsnjuOkDMMM6/X6v9bU1FSuX7  DUEQ7k5ptTvlaDQaQqlUPpiWlvacQqF4AUVRKcuyQ1euXNlZXV39cUFBQZcn2 YVCwBA8vLyhLNnz545a9as TKZTGEwGAYvXLhwrra29v 2b98 rsnTHaDHks3Pzw9cuHDh7OTk5PkCgUA8ODjYX1tbe rs2bNNFRUV9jtVz83K8RoBUDloW1tbm1CpVJIZGRmWixcvMq   qpHO8gXPFiGzp07V/Dtt9/iCxYssB8 fJj2xrDoVQL4gnE/yfkJ8DHbfgL8BPgYAR9X77eAiUgAnEgNDQ3hMpmMU6lUdk/uFH2MD6/qYXUnkUiEUVFRrMFgoN1Z2blrAWhVVZVYJBIlh4eHJ6Eoiup0Ot2xY8eObdmypZ9Xa 8xoTfeeEOZmpq6ICoqKmZ4eNjS2tpaR1HUudzcXHAwutxcukXACy 8EJCTk7MwLi7ucaFQ DzLshKGYfRtbW1vvPfee3t3797ttmt5IvOxdevWQDgaDQsLexPDsGCGYUZMJtMnzc3NBzo6Ok7wcWe7RcDrr78uz83NzVUoFOtHRkaUYAFisdhkMpm2VVZW7tRqtd0TGVA3246WlpbOyM3NXYUgiNpqtYpwHIej0W69Xv W1WrdtWjRIourMt0iYO3atYr8/Hw1SZL/odfrJVB4UFAQOzIyUrdnz54XCwoKzrmq8F76vby8/KGsrKwKlmVVVqsVQ1EUIQjCjGFYMUEQ28LCwkZc9dctAsCfs3z58qVRUVFamqYjOY5DBALBPzo6Osr27Nnz4f02DxQWFk5Rq9V/ksvlaovFMkUgECAMw3S1t7cXDQwMVPI5IHKLAPBqisXimNTU1EylUrmKpmnMYDDsOn78 FdHjhy5dBuHIq4U5a78HVY/M2fOTEpJSXlKKpUuJ0mSvXTp0s4DBw7s0Wq1vLyobhHgQAHLz89XxMbGxmEYhnZ1dV1qbW0duN/Ad2oEOPH6 vpCg4ODoxEEsV  fLm5tLR0mK/GjIcAvmX75Xgg4CeAB0ieFPET4El0eZTtJ4AHSJ4U8RPgSXR5lO0ngAdInhTxE BJdHmU7SeAB0ieFPET4El0eZTtJ4AHSJ4UcUkABC0JhcIpQqFwUKVSDWdnZ0MOlsuDBk82 l4q 1YEoOvWrROpVKqkqVOnpmAY9q8cx1XZ7faO/v5 Q1NTU11JScmgn4jbV4WbEYAWFxdPTk5OzpDL5RsQBAmHiGaWZQc5jqNwHDdQFPV2fX391 vXr  5/SbcmyU4wuYhm1OwePFia2NjI0Ta3ZDBeQMBq1atkmRmZj6jUCiKaJqOhWhh GAYBtHMCBw6BAYGtvX39xcdPHhwz44dO0z3JoTj71V5ebmQJMnYOXPmLHCk0fY3NzfX1dfXt14fa3oDARUVFU/ExMT8J4ZhM1mWvfY7gA4fOIBhGAZCyzmO4y7qdLo/LVu27DsURf1zgoMvOCOIiopKfuihh54MCwtbwbKs1G63D/f19e364osvPtNqta2jqb2BgL1796rFYnExy7LBAPho8J3fwRpQFB2wWq15p0 frvJGEOv49dG7T0K QWho6JLo6OhNKIpGgsKKRCIE5s8TJ068uWTJko/HJGD//v2rAgMDixiGCblZ051DEYIgervdvkYkElX5KrvFu9Dyq 38 fOkzWZ7MSwsrNRischomoaMGxZF0a5Tp05teuaZZ/46JgH79u1bKRaLN4EFwJjv/ID2Oy0AWMVxfICm6TyhUOgnYBSikI5FEMRTs2bNKpXL5eF2u11KEMSI2WzeUV1d/fmKFStOj0lAZWVlVlhY2CYEQeIYhoHIk19RD6RgGMYQBNE2MDCwjmGYr /3yLjrbWPdunWhGRkZjzz44IO/wTDs2YGBAUtbW9ubp0 fPnR91uUNc4BGo4lcuHBhplAofJ1hmCjnROxcAQEhJEkOMgyjbWho N/BwcFOT ZQ8TP8u08KVkIEQUQLBIJwvV5v7OrqarnZivFmBJBKpTJuxowZvyUIYq3dbo8B8J0TckBAwADDMN2dnZ1r9u3bd R PYznSTngO YK8aY7YY1GE6BUKiOnTZuWLhQK10L8FYZhHIqiBpqmd3R1dTWcOXMGcruGeDbEL3YLBG7pC4LJpK6ublJsbGyCWCyGrEZ2eHh4yGAw/FxYWHhfBuJ6QotcOuMcGzDnZOzfcN1hFngRcIfr9Bc3CgE/AT5WBz8BfgJ8jICPqx PBVxb26rVagGclNlstqsOF6vLNa P 3pXVu82AZAlI5PJogQCQRxcAYFhWLnNZmsdHh7uKikpMdyVvbyLG8WbgKysrMCUlJQooVAYD24IjuOmIggSiqJoL6Tl4DiuBSL0ev2lsrIyl6k5dzEmXm0abwI2btyYIBQK/4YgyDSWZadwHGyMf/GQchiGXcUwTEfT9OvNzc0/fPjhhx696surKI1dGWSOCi5fvgzZQ8yFCxcod9zzfAhANRqNWCaTPcowzC6WZUOhPdd7SeFvDndFPUVRSwoLCy/eRSB5qimQqDf9kUceeTgyMhKuYrOfOXOmtbq6 uj27dv7 FTKhwCkuLg4USgUfkzTdBKCIMRYBWMY1osgyEstLS3fePquHT4d9KTM22 /Lc7IyFgWFBRUKBQKJzEMw5lMpqvNzc0bpFLpXj6W4JIAyIqXy VPws2Odrs9BLyit7IAhxXQGIbV9/X15ZSUlPzq/NOTYPigbHTbtm3xOTk5r7Is yqkqcJpIY7jJpqmN/b39//XvHnzXN4G6ZKAvLy8iMjIyA84jvsnlmXJ0R292TDkmBd0BoPhd8XFxed9AIzXqty2bdv8nJycXSiKJplMJowgCEhTNTEMswXSVKdOnXr7BIAFSCSSJ1mW3cFxXNitCADLgH8YhoEFNBiNxpxNmza1eA0NH1S0YcOGYLVa/W9SqXQlTdNhKIqazGZzX2dnZ9HVq1c/43MprUsLgH699dZb8zAM 4rjuHAn0NcPQ/B3OLjBcbyPIIgVJ0 ePHivX10Am9HU1FRVUlJShkKh BcEQWo6Ojrqa2pqjmq12g5XhzHXMOSjOBqNJlEmk31C03QyHFGOHnrg yjt53Acb6BpellBQUEjn7InugzEASEIIoFbIQUCgSExMfFKeno6XELIy3XPiwBgOj4 Po1l2TKWZRNHE eclGEJShBEE8dxr/X09Bx95513eN0WMtEJuN328yIAKgES4uLiUgmCeJtlWYgXDXVsxq5twlAU7WFZdoNOpztSVlYGmzBeGnC7HZjoz/MmADoKd0UolcoZAoEAYkaLMAybzHGcHsMwDUVRl3t6ejq3b98OWeJ 8HlqhlsEOMsEIiQSSQxJkiKKoqxwe7nD/ P3iPIE3ik2LgLcrMMvPgYCXiNArVaLYmJiHoBwbRzHMYvFwlAUNfTzzz9fuI8cdzdQ4XECIFEhMTFRGhER8ShJkkUCgSAYlq4QtArXnXEcp 3p6fnearUafRxhB15NLCQkBD18 DDrrbZ4lAC4X4gkyRAI8EIQRMuyLBzioOAzceyaOYFA0MIwjOb8 fPVW7ZsgdePeH0ChzBCq9UaERsbq5JKpeLe3l54LVZDSEhIrzs3II5nrPUoAXl5ebJ58 Y9QRDEXyiKioNlq8Nh94s7G5I7gASTyfRGbW1tdUVFBUTbeY0EiAJMSEhISkhIeFwkEr0M7yWD6 vNZnNFQ0PDwePHjzd70qvrUQJKS0vnhIeH/43jOBVEWl/vvoChCNwXAoGAY1m2sbe396V169bVjkeTxvMMDI9paWnxixcvzpLJZGq73Q4vGLqWjiUUCq90d3dv /LLLz8tLS312GWEHiXg3XffTZfL5Z9iGDYFwIa8gl WXw4XBvwfvIgsy141mUzPr1q1qoYPmDC8qVQqtK6uToEgyBSapu3nz5/vPHDgAFydycuCIJliaGgoJzQ0dCPDMJGjg5AdaViXTp48uXrZsmUHPZWG5VECKioqHgsICPg77Jyd474zytrpwgCwHdc99lAU9eKKFSsOuQIQduUzZ86cBlHcYrF4Oo7jf0QQhDUajSWtra0/dHZ29vIZNk6cOBEYFBT0RxRFNQiCyKAtTguANkEYfktLSx6O45/xOVzhozjXy3iUgJ07dz4qkUg sdvt1yzgZucHDg8qmH2vxWLJVavVQMAtP2lpacSzzz47LTY29vcCgWAtwzCTcRyfBDcW4jh yWKxQArtNyaTqctV7lpLS4vQaDS LJfLizmOk4OFOhUjICAADr3bz50795on33HjUQLKysoWhoSEVNhstgQMw/BR WXXyHAuR8GRR5Jks16vf2XNmjUnxtq3bN68OXTWrFlPkyRZYLfb4aI81JlKBeWTJHnZbDaXnDp1al9xcTHkMd9yOIJhLCkp6fE5c ZsxzAszmq1Oldn8CKfbqPRuOvYsWNf1NTUjPs1W66swpMEoEVFRcGxsbGZHMdt5TguGBpz/XkCjK0EQbRyHFfU2NgIS1H9WKDt2rUrLSoqaifHcQ/YbDbUMXz9orkwoaMoeqGjo2OlWq0 4goAyIvOycl5burUqYWwR4GVGqyCKIr6e1NT0zcNDQ3jetGcq3q95oooKyubM3ny5F2OcJbJcNWlc6x1LEHh3LhYp9NV//jjjz1jZdyAxiYkJDwjkUjeB0egM21qdGcdKbR9AwMDLy9dunQ/n8lTo9FIUlJSHp42bVoUhmECo9E41NLSUi Xy1uys7M9GuPkSQu4hsvy5cvF8 fPj5fL5SqO4woQBAFLgM0YuLEh0aNEr9cfbWpq0rmaOB0ZiH8gCGInQRDXdtSjMzmdy1w4lRsYGFiRk5Ozjw8B8ByQ29HRQUZHR2OJiYk0KII30q88ToBTO4uKikIVCkW80xdE0zRjsVjgLagtHMcNuJowHcMX tFHH/0uODi4HMZsGC5Gr6bgO47jQOzFzs7OVa 88sp3fIcCX8l5jQDHKRpMiNdAG6WZvF3YoKVyuTw6ISHh9yiKrmNZNtqZxenYYcN80k5R1Dt1dXUHaJru8JZPZ7wEepOA8bbxV89BlEZ0dPT08PDwx1AU/TPHcTFOK4DcZYZhyrq7u7 rq6u75OsXxPHp8IQjADoFzjORSDQtNDQ0lSTJP2MYBrthg8lk2trb2/sDRVGdfF6ewAcgT8tMSAIAFPDjREREyCMiIlJEIlHg0NDQSG9v7zmJRDLIZz7xNLB8y5 wBPDt4N0u5yfAxwz5CfAT4GMEfFz9/wPDOTvZ5GY ewAAAABJRU5ErkJggg==) no-repeat;
*/
						background-size: 100%;
        }

        @keyframes e {
            0% {
                transform: rotate(0deg)
            }

            to {
                transform: rotate(1turn)
            }
        }
    </style>
</head>

<body>
	<i class="loading"></i>
</body>

</html>

0 人点赞