CSS手写loading

CSS/设计
454
0
0
2024-02-25

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

<!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,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) no-repeat;
*/
						background-size: 100%;
        }

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

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

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

</html>