用css畫出中間一個大圓，四周有12個小圓環繞並和大圓是同心

王铁柱6發表於2024-12-05
CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Ensure the body takes up the full viewport height */
  background-color: #f0f0f0;
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
}

.center-circle {
  width: 100px;
  height: 100px;
  background-color: #3498db; /* Example color */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.small-circle {
  width: 20px;
  height: 20px;
  background-color: #e74c3c; /* Example color */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
}

/* Positioning for the 12 small circles */
.small-circle:nth-child(1) { transform: translate(-50%, -50%) rotate(0deg) translate(100px, 0); }
.small-circle:nth-child(2) { transform: translate(-50%, -50%) rotate(30deg) translate(100px, 0); }
.small-circle:nth-child(3) { transform: translate(-50%, -50%) rotate(60deg) translate(100px, 0); }
.small-circle:nth-child(4) { transform: translate(-50%, -50%) rotate(90deg) translate(100px, 0); }
.small-circle:nth-child(5) { transform: translate(-50%, -50%) rotate(120deg) translate(100px, 0); }
.small-circle:nth-child(6) { transform: translate(-50%, -50%) rotate(150deg) translate(100px, 0); }
.small-circle:nth-child(7) { transform: translate(-50%, -50%) rotate(180deg) translate(100px, 0); }
.small-circle:nth-child(8) { transform: translate(-50%, -50%) rotate(210deg) translate(100px, 0); }
.small-circle:nth-child(9) { transform: translate(-50%, -50%) rotate(240deg) translate(100px, 0); }
.small-circle:nth-child(10) { transform: translate(-50%, -50%) rotate(270deg) translate(100px, 0); }
.small-circle:nth-child(11) { transform: translate(-50%, -50%) rotate(300deg) translate(100px, 0); }
.small-circle:nth-child(12) { transform: translate(-50%, -50%) rotate(330deg) translate(100px, 0); }


</style>
</head>
<body>

<div class="container">
  <div class="center-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
</div>

</body>
</html>

Explanation and Key Improvements:

  • Centering: The body now uses flexbox to perfectly center the content both horizontally and vertically. The `min-height: 10

相關文章