圆圈加载中

中平签

于 2023-04-13 14:01:17 发布

阅读量71

点赞数

分类专栏：点点寒鸦文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43392545/article/details/130128957

版权

点点寒鸦专栏收录该内容

37 篇文章 0 订阅

订阅专栏

 <div class="out">
      <div class="inner"></div>
    </div>
<style>
      .out{
        background-image: conic-gradient(from 1.5708rad at 50% 50%, #FFFFFF 0%, #333333 100%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        position: relative;
        animation:fadenum 1.2s infinite;
        animation-timing-function:linear;
      }
      @keyframes fadenum{
        0%{transform:rotate(0deg);}
         100%{transform:rotate(360deg);}
      }
      .inner{
        position: absolute;
        width:44px;
        height: 44px;
        left:2px;
        top:2px;
        border-radius: 50%;
        background: #fff;
      }
    </style>

效果：

在这里插入图片描述