css一圈圆围绕一个圆

圆形布局在网页设计中是非常常见的，而让一圈圆围绕着另一个圆的布局也是十分有趣的一种设计方式。这篇文章将会介绍一种使用 CSS 实现这一效果的方法。

首先，我们需要一个 HTML 结构，在其中包含两个圆形元素。

 <div class="outer-circle"></div>
  <div class="inner-circle"></div> 

接下来，我们使用 CSS 对这两个元素进行样式设置。首先是外部圆形，我们将其设定为固定大小，水平和垂直居中，并且设置 border-radius 让其变成一个圆形。

.outer-circle{
  width: 300px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
  border: 1px solid #000;
} 

然后是内部圆形的设置，我们要让其位置固定在外部圆形的上面，并设置一个合适的大小，同样是一个圆形。同时，我们还要设置一个旋转动画，让一圈小圆绕着中心大圆旋转。

.inner-circle{
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: #fff;
  animation: rotate 10s linear infinite;
}

@keyframes rotate{
  from{
    transform: translate(-50%,-50%) rotate(0deg);
  }
  to{
    transform: translate(-50%,-50%) rotate(360deg);
  }
} 

最后，我们使用伪元素 ::before 和 ::after 来创建一圈小圆，将其设置为圆形，并让其绕着外部圆形旋转。

.outer-circle::before,
.outer-circle::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  animation: rotate 10s linear infinite;
}

.outer-circle::before{
  transform-origin: bottom center;
}

.outer-circle::after{
  transform-origin: top center;
}

@keyframes rotate{
  from{
    transform: translate(-50%,-50%) rotate(0deg);
  }
  to{
    transform: translate(-50%,-50%) rotate(360deg);
  }
} 

通过以上 CSS 样式设置，我们就可以在网页上实现一圈圆绕着一个圆的布局了。对于这种布局，你还可以根据自己的需求和创意加入更多的样式效果，让页面变得更加丰富和有趣。