前端入坑纪 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;
}
其实注解基本都贴了，剩下就是小伙伴自己上手实践了，加油！
