[分享]css3四色圆环怎么画

CSS3四色圆环是一种漂亮实用的效果，可以用于各种网页设计。以下是一个简单的CSS代码示例，演示如何创建四个不同颜色的圆环。 .circle1 { width: 200px; height: 200p...

CSS3四色圆环是一种漂亮实用的效果，可以用于各种网页设计。以下是一个简单的CSS代码示例，演示如何创建四个不同颜色的圆环。

 .circle1 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 10px solid #29c7ac;
    border-top-color: #feca57;
    animation: spin 2s linear infinite;
  }

  .circle2 {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 10px solid #feca57;
    border-top-color: #ff6b6b;
    animation: spin 2s linear infinite reverse;
  }

  .circle3 {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 10px solid #ff6b6b;
    border-top-color: #e74c3c;
    animation: spin 2s linear infinite;
  }

  .circle4 {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 10px solid #e74c3c;
    border-top-color: #29c7ac;
    animation: spin 2s linear infinite reverse;
  }

  @keyframes spin {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
  } 

这段代码定义了四个 CSS 类，每个类对应一个圆环。

• 类 .circle1 定义一个宽高为 200px 的圆环，边框颜色为 #29c7ac，圆环顶部颜色为 #feca57，使用 rotate 动画让圆环持续旋转。

• 类 .circle2 定义一个宽高为 220px 的圆环，边框颜色为 #feca57，圆环顶部颜色为 #ff6b6b，使用 reverse 动画让圆环反向旋转。

• 类 .circle3 定义一个宽高为 240px 的圆环，边框颜色为 #ff6b6b，圆环顶部颜色为 #e74c3c，使用 rotate 动画让圆环持续旋转。

• 类 .circle4 定义一个宽高为 260px 的圆环，边框颜色为 #e74c3c，圆环顶部颜色为 #29c7ac，使用 reverse 动画让圆环反向旋转。

最后，使用 @keyframes 规则定义了一个名为 spin 的简单动画，让圆环旋转起来。

 <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
  <div class="circle4"></div> 

在 HTML 代码中，我们只需要添加四个 DIV 元素，并分别为它们添加不同的 CSS 类，即可创建出漂亮的四色圆环。