css能做什么-border篇2

内容预告：今天我们用border实现一个加载效果

先让我们看下我们的目标，然后我们一步步实现它

现在我们来实现它

这个效果的关键在于如何实现飞线，即下面这个东西，这个效果其实就是由4条下面这种飞线组合而成，不过多了些动画和变换

这里先来看几个border的几种其他效果

1、三角形

.tri{  
  width: 0;  
  height: 0;  
  border-left: teal solid 40px;  
  border-right: darkorchid solid 40px;  
  border-top: chocolate solid 40px;  
  border-bottom: springgreen solid 40px;  
}

2、扇形

.sector{  
  width: 0;  
  height: 0;  
  border-radius: 50%;  
  border-left: teal solid 40px;  
  border-right: darkorchid solid 40px;  
  border-top: chocolate solid 40px;  
  border-bottom: springgreen solid 40px;  
}

3、梯形

.trapezoid{  
  width: 20px;  
  height: 20px;  
  border-left: teal solid 20px;  
  border-right: darkorchid solid 20px;  
  border-top: chocolate solid 20px;  
  border-bottom: springgreen solid 20px;  
}

4、环形

.ring{  
  width: 20px;  
  height: 20px;  
  border-radius: 50%;  
  border-left: teal solid 20px;  
  border-right: darkorchid solid 20px;  
  border-top: chocolate solid 20px;  
  border-bottom: springgreen solid 20px;  
}

接下来，让我们回到正题

至于我们的目标，飞线一样的形状，其实是环形的一种变体。上述的几种效果我们都是展示了4个border，并且宽度一样。那么如果少点border，宽度不一样呢？

针对上面的环形效果，我们先把border的宽度调整成不一样的，可以看见不同的宽度的border会平滑的进行连接

.ring{  
  width: 80px;  
  height: 80px;  
  border-radius: 50%;  
  border-left: teal solid 10px;  
  border-right: darkorchid solid 10px;  
  border-top: chocolate solid 1px;  
  border-bottom: springgreen solid 20px;  
}

可以看到上面的效果已经逐渐接近我们的目标了，接下来我们继续调整border的宽度，并且将上，左，右设置为透明的，因为我们并不需要它们

.ring{  
  --c: teal;  
  width: 200px;  
  height: 200px;  
  border-radius: 50%;  
  border: 2px solid transparent;  
  border-bottom: var(--c) solid 10px;
}

接下来的就是组装我们的动画的时候了

<div class="loading-wrapper">  
<div style="--c: teal" class="loading-item rotate-item1"></div>  
<div style="--c: #f18c08" class="loading-item rotate-item2"></div>  
<div style="--c: #da104c" class="loading-item rotate-item3"></div>  
<div style="--c: #16ee8d" class="loading-item rotate-item4"></div>  
</div>

/*容器*/
.loading-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}
/*飞线的实现*/
.loading-item {
  position: absolute;
  top: 0;
  left: 0;
  --c: teal;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom: var(--c) solid 10px;
}

/*4个飞线的变换和动画*/
.rotate-item1 {
  animation: rotate1 2s infinite linear;
}
.rotate-item2 {
  animation: rotate2 2s infinite linear;
}
.rotate-item3 {
  animation: rotate3 2s infinite linear;
}
.rotate-item4 {
  animation: rotate4 2s infinite linear;
}


@keyframes rotate1 {
  from {
    transform: rotateX(-45deg) rotateY(-60deg) rotateZ(45deg);
  }
  to {
    transform: rotateX(-45deg) rotateY(-60deg) rotateZ(405deg);
  }
}
@keyframes rotate2 {
  from {
    transform: rotateX(-45deg) rotateY(-30deg) rotateZ(225deg);
  }
  to {
    transform: rotateX(-45deg) rotateY(-30deg) rotateZ(585deg);
  }
}
@keyframes rotate3 {
  from {
    transform: rotateX(325deg) rotateY(60deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(325deg) rotateY(60deg) rotateZ(360deg);
  }
}
@keyframes rotate4 {
  from {
    transform: rotateX(325deg) rotateY(30deg) rotateZ(180deg);
  }
  to {
    transform: rotateX(325deg) rotateY(30deg) rotateZ(560deg);
  }
}