一直打转的圆圈——CSS3 loadding

前端入坑纪 22

思来想去，不晓得今天要发什么，忽然一个idea 上来，等待了这么久，不如直接就来个“等待”好了！！

OK，first things first！项目链接

HTML 结构

<div class="circle">
 </div>

其实我是不想贴它的，因为也就只有一个Div！

CSS 结构

        * {
            margin: 0;
            padding: 0
        }
        body{
            background-color:#fff;  /*背景色不一样就会被看穿啦*/
      }
        /*在这里建个容器先，10个像素边框*/
        .circle {
            width: 180px;
            border: 10px solid skyblue;
            height: 180px;
            border-radius: 100px;
            margin: 20vh auto;/*20vh 很有意思的单位，感兴趣就百度吧*/
            position: relative;
            animation: roate 1.5s infinite linear;/*这里是给动画调用的时的参数*/
        }

        /*旋转360度的设定，动画开始时0%，为0度，到动画结束时100%，为360度*/
        @keyframes roate {
            0% {
                transform: rotateZ(0)
            }
            100% {
                transform: rotateZ(360deg)
            }
        }
        

        /*这个是渐变半透明盖在circle上的，z-index=2*/
        .circle::after {
            content: "";
            display: block;
            width: 200px;
            height: 200px;
            position: absolute;
            top: -10px;
            left: -10px;
            z-index: 2;
            background-image: linear-gradient(to left, #fefefe, rgba(255, 255, 255, .1));
        }
        

        /*这个盖最上层，遮住一半的圆，半圆效果就有了*/
        .circle::before {
            content: "";
            display: block;
            width: 200px;
            height: 100px;
            position: absolute;
            z-index: 3;
            background-color: #fefefe;
            top: -10px;
            left: -10px;
        }

其实注解基本都贴了，剩下就是小伙伴自己上手实践了，加油！