加载loading特效

如果要是实现当前loading特效，需要知道他的html结构,结构也不复杂，一个父元素，两个子元素，请看代码截图

在写之前分享样式小知识点，

• currentColor 这个属性值是一般是用在color 或者boder-color 给元素添加颜色的时候用，字面意思是当前颜色，如果当前的color有值，就直接用当前的，如果没有就用父元素的。
• css的声明变量我们一般很少用到，我们今天复习一下，你可以在父级元素声明一个变量如：--c:red 就可以在它的子元素用如：color: var(--c) 如果想了解更多请看w3c官网对其的解释 www.w3school.com.cn/css/css3_va…

使用方式1

.father{
  --c: red
}
.son{
 background: var(--c)  
}

使用方式2 设置全局变量

  // 全局设置变量
  :root {
    --col: red;
    --w: 100px
  }
  .class1{
     color: var(--col)
     width: var(--w)
  }

• 我们经常用rotate对元素进行转动用到的是角度deg，但是在css中还有其他的其他单位代表角度

1. deg 是角度 一个圆360度
2. grad 是梯度 一个圆是400度
3. rad 是弧度 一个圆是2π弧度
4. turn 是一圈 一个圆共1圈

换算方法 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

这里是我的一些样式代码，设置单位没有用到px像素，而是用到em，相对于更加弹性一些，他是根据父级像素来定义的，适应性更强

圆弧的效果就是用边框进行模拟的 利用 border-radius: 50% 然后在利用边框透明和不透明的效果 显示出咱们想要的效果

.loader .f:nth-child(1) {
    width: 100%;
    height: 100%;
    color: red;
    border-color: currentColor transparent transparent currentColor;
    border-width: 0.2em 0.2em 0em 0em;
    --d: -45deg;
    /* transform: rotate(-45deg); */
    animation-direction: normal; /**动画正常播放*/
}

.loader .f:nth-child(2) {
    width: 70%;
    height: 70%;
    color: green;
    border-color: currentColor currentColor transparent transparent;
    border-width: 0.2em 0em 0em 0.2em;
    --d: -135deg;
    animation-direction: reverse; /**动画反向播放*/
}

.loader .f .circle {
    position: absolute;
    width: 50%;
    height: 0.1em;
    top: 50%;
    left: 50%;
    background-color: transparent;
    transform: rotate(var(--d));
    transform-origin: left;
}

.loader .f .circle::before {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    content: '';
    width: 1em;
    height: 1em;
    background-color: currentColor;
    border-radius: 50%;
}

这是我的代码块

“我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！”