SOURCE

console 命令行工具 X clear

                    
>
console
<!-- 通过两个图形组合实现圆环 -->
<div class="loop"></div>
<!-- 晃动的圆环 -->
<div class="shaking-loop"></div>
<!-- 3重圆环 -->
<div class="shaking-ring"></div>
$size: 100px;
$borderwidth: 10px;
$shankwidth: 3px;

@keyframes rotating{
  from{ transform:rotate(0) }
  to{ transform:rotate(360deg) }
}

.loop{
  width: $size;
  height: $size;  
  border-radius: $size/2;
  animation: rotating 1s linear infinite;
  background: linear-gradient(to right,dodgerblue,pink,gold);
  &:before{
    content: '';
    display: inline-block;
    margin: $borderwidth;
    width: $size - 2*$borderwidth;
    height: $size - 2*$borderwidth;  
    border-radius: ($size - $borderwidth)/2;
    background: #fff;
  }
}

.shaking-loop{
  width: $size;
  height: $size;  
  border-radius: $size/2;
  animation: rotating 2s linear infinite;
  background: linear-gradient(to right,dodgerblue,pink,gold);
  &:before{
    content: '';
    display: inline-block;
    width: $size - $shankwidth;
    height: $size - $shankwidth;  
    border-radius: ($size - $shankwidth)/2;
    background: #fff;
  }
}

.shaking-ring{
  width: $size;
  height: $size; 
  border-radius: $size/2;
  background: #7fecad;
  animation: rotating 2s linear infinite;
  &:before{
    content: '';
    display: inline-block;
    position: absolute;
    width: $size - $shankwidth;
    height: $size - $shankwidth;  
    border-radius: ($size - $shankwidth)/2;
    margin: $shankwidth/2;
    background: yellow;
  }
  &:after{
    content: '';
    display: inline-block;
    position: absolute;
    width: $size - 2*$shankwidth;
    height: $size - 2*$shankwidth;  
    border-radius: ($size - 2*$shankwidth)/2;
    margin: $shankwidth;
    background: #fff;
  }
}