码迷,mamicode.com
首页 > 其他好文 > 详细

如何写一个一直旋转的Loading

时间:2021-01-27 12:50:11      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:near   height   旋转   mat   size   nbsp   ext   scale   relative   

 
<!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>
 
接下来的逻辑 怎么用  看大家了
技术图片

 

 

如何写一个一直旋转的Loading

标签:near   height   旋转   mat   size   nbsp   ext   scale   relative   

原文地址:https://www.cnblogs.com/coderwhytop/p/14326309.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!