css3一个大圆里面四个小圆

CSS3是一个强大的技术，它使得我们能够创建更加复杂的布局和样式，包括圆形布局。今天我来分享一个使用CSS3创建一个大圆里面有四个小圆的方法。

/* 创建大圆 */ .big-circle {
      width: 200px;
      height: 200px;
      border: 5px solid #333;
      border-radius: 50%;
      margin: 50px auto;
      position: relative;
}
/* 创建四个小圆 */ .small-circle {
      width: 50px;
      height: 50px;
      background-color: #333;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}
/* 设置四个小圆的位置 */ .first-circle {
      top: 0;
      left: 50%;
      transform: translateX(-50%);
}
 .second-circle {
      top: 50%;
      left: 0;
      transform: translateY(-50%);
}
 .third-circle {
      top: 50%;
      right: 0;
      transform: translateY(-50%);
}
 .fourth-circle {
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
}
/* 将四个小圆添加到大圆中 */ .big-circle .small-circle {
      position: absolute;
}
 .big-circle .first-circle {
      transform-origin: bottom center;
      transform: rotate(45deg) translateY(-100px) rotate(-45deg);
}
 .big-circle .second-circle {
      transform-origin: center right;
      transform: rotate(45deg) translateX(100px) rotate(-45deg);
}
 .big-circle .third-circle {
      transform-origin: center left;
      transform: rotate(-45deg) translateX(-100px) rotate(45deg);
}
 .big-circle .fourth-circle {
      transform-origin: top center;
      transform: rotate(-45deg) translateY(100px) rotate(45deg);
}
    

通过上述CSS样式代码，我们可以很轻松地创建一个大圆里面有四个小圆的形状。这样的布局可以用于各种设计需求，例如在一个网页中作为导航菜单，或者在一个产品介绍页面中作为特征点的展示。

总之，CSS3为我们带来了更多的创意空间，让我们有更多的自由去打造我们想要的网页布局和设计。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！