CSS3 自制 loading 动画效果

小马驾到 发表于 2019-3-16 14:12

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 自制 loading 动画效果</title>
</head>
<body>

<style>
.loading-wrap {
   position: fixed;
   z-index: 100;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   background: #eee;
   line-height: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.loading-circle {
   position: relative;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 1px 2px rgba(0,0,0,.1);
   box-sizing: border-box;
}
.loading-circle-anim {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 24px;
   height: 24px;
   margin-left: -12px;
   margin-top: -12px;
   border-radius: 50%;
   border: 2px solid #888;
   box-sizing: border-box;
   animation: loading 2s ease-out infinite;
}
.loading-circle-anim:after {
   content: " ";
   z-index: 1;
   position: absolute;
   background: #fff;
   top: -5px;
   left: 58%;
   bottom: 0;
   width: 50%;
   height: 30px;
}
@keyframes loading {
   0% {
         transform: rotate(0deg);
   }
   50% {
         transform: rotate(360deg);
   }
   100% {
         transform: rotate(720deg);
   }
}
</style>

<div class="loading-wrap">
<div class="loading-circle">
   <div class="loading-circle-anim"></div>
</div>
</div>

</body>
</html>

wmg13178599398 发表于 2019-3-16 16:16

可以，强

Easul 发表于 2019-3-16 19:11

支持一下！共同加油！

巨无霸 发表于 2019-3-16 19:42

复制代码 → txt文本 → 后缀改成.html → 浏览器打开，显示白板。我感觉被耍了

页: [1]

吾爱破解 - 52pojie.cn's Archiver

CSS3 自制 loading 动画效果