如何写一个一直旋转的Loading
时间：2021-01-27 12:50:11
收藏：0
阅读：0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#nuxt-loading>div {
font-size: 10px;
position: relative;
text-indent: -9999em;
border: .5rem solid #f5f5f5;
border-left: .5rem solid #ff4c3b;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: nuxtLoading 1.1s infinite linear;
animation: nuxtLoading 1.1s infinite linear;
}
#nuxt-loading>div,
#nuxt-loading>div:after {
border-radius: 50%;
width: 5rem;
height: 5rem;
animation: abc 3s linear infinite;
}
@keyframes abc {
0% {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div id="nuxt-loading">
<div>Loading</div>
</div>
</body>
</html>
接下来的逻辑 怎么用 看大家了
评论（0）