[分享]css制作奥运五环

 奥运五环标志是世界范围内广为接受的标志之一，设计优美、寓意深刻，同时制作也比较简单，可以通过CSS实现。下面我们来一步步地实现奥运五环标志：/ 创建五个圆形 / .circle { width: 6...

 奥运五环标志是世界范围内广为接受的标志之一，设计优美、寓意深刻，同时制作也比较简单，可以通过CSS实现。下面我们来一步步地实现奥运五环标志：

/* 创建五个圆形 */
.circle {
  width: 60px;
  height: 60px;
  background-color: #0072C6;
  border-radius: 50%;
  position: absolute;
}

.circle:nth-child(2) {
  left: 60px;
  top: 30px;
  background-color: #F4C300;
}

.circle:nth-child(3) {
  left: 120px;
  background-color: #CE1126;
}

.circle:nth-child(4) {
  left: 90px;
  top: 90px;
  background-color: #009F3D;
}

.circle:nth-child(5) {
  left: 30px;
  top: 90px;
  background-color: #722F37;
}

/* 通过定位实现五个圆形组成一个奥运五环标志 */
.circle-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle:nth-child(2) {
  transform: translate(-120%) rotate(-30deg) translate(120%) rotate(30deg);
}

.circle:nth-child(3) {
  transform: translate(-180%, -50%);
}

.circle:nth-child(4) {
  transform: translate(-120%) rotate(30deg) translate(120%) rotate(-30deg);
}

.circle:nth-child(5) {
  transform: translate(0, -100%);
} 

以上代码通过定位和旋转，将五个圆形组合起来，形成了一个完整的奥运五环标志。我们可以根据需要对CSS进行调整，达到更好的效果。