css 书写的loading 页面

最新推荐文章于 2023-02-08 00:00:00 发布

walker1838

最新推荐文章于 2023-02-08 00:00:00 发布

阅读量126

点赞数

分类专栏： web 文章标签： html css

本文链接：https://blog.csdn.net/qq_25194685/article/details/113176120

版权

web 专栏收录该内容

37 篇文章 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>
</head>
<style>
  .loading-css {
    width: 50px;
    /*先将loading区域变成正方形*/
    height: 50px;
    display: inline-block;
    /*将loading区域变成行内元素，防止旋转的时候，100%宽度都在旋转*/
    border: 3px solid #f3f3f3;
    /*设置四周边框大小，并将颜色设置为浅白色*/
    border-top: 3px solid red;
    /*将上边框颜色设置为红色高亮，以便旋转的时候能够看到旋转的效果*/
    border-radius: 50%;
    /*将边框和内容区域都变成圆形*/
  }

  @keyframes loading-360 {
    0% {
      transform: rotate(0deg);
      /*动画起始的时候旋转了0度*/
    }

    100% {
      transform: rotate(360deg);
      /*动画结束的时候旋转了360度*/
    }
  }

  .loading-css {
    /*在之前的CSS中加上动画效果即可*/
    animation: loading-360 0.8s infinite linear;
    /*给圆环添加旋转360度的动画，并且是无限次*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .cover {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
  }
</style>

<body>
  <div class="cover">
    <div class="loading-css"></div>
  </div>
</body>

<script>

</script>

</html>

walker1838

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 书写的loading 页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .loading-css { .
复制链接

扫一扫