编写一个简单的加载（loading）动画

bug郑

已于 2023-04-23 15:42:38 修改

阅读量205

点赞数 1

文章标签： css3 html uni-app 微信小程序动画

于 2023-04-23 14:50:08 首次发布

本文链接：https://blog.csdn.net/m0_59382352/article/details/130321660

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body class="body">
    <div class="loading"></div>
  </body>
  <style>
    .body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .loading {
      /* 背景颜色透明 */
      background: transparent;
      width: 80px;
      height: 80px;
      border: 6px solid aqua;
      border-color: aqua transparent;
      border-radius: 50%;
      /* loading下面自定义名称  
      1.2动画一次多久  
      linear动画平滑 
      infinite使动画无限循环*/
      animation: loading 1.2s linear infinite;
    }
    /*  loading定义的动画名称*/
    @keyframes loading {
      /* 开始0% 结束100% */
      0% {
        /*  rotate旋转角度*/
        transform: rotate(0deg);
      }

      20% {
        transform: rotate(72deg);
      }

      40% {
        transform: rotate(144deg);
      }

      60% {
        transform: rotate(216deg);
      }

      80% {
        transform: rotate(288deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</html>

效果图