SOURCE

console 命令行工具 X clear

                    
>
console
<div class="container">
  <div class="text">Text 1</div>
  <div class="text">Text 2</div>
  <div class="text">Text 3</div>
  <div class="text">Text 4</div>
  <div class="text">Text 5</div>
  <div class="text">Text 6</div>
  <div class="text">Text 7</div>
  <div class="text">Text 8</div>
</div>
  .container {
    width: 300px;
    height: 300px;
    position: relative;
    border: 1px solid pink;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .text {
    position: absolute;
    transform-origin: center;
    text-align: center;
    color: #b11d49;
  }

  .text:nth-child(1) { transform: rotate(0deg) translateY(-130px) rotate(0deg); }
  .text:nth-child(2) { transform: rotate(45deg) translateY(-130px) rotate(-45deg); }
  .text:nth-child(3) { transform: rotate(90deg) translateY(-130px) rotate(-90deg); }
  .text:nth-child(4) { transform: rotate(135deg) translateY(-130px) rotate(-135deg); }
  .text:nth-child(5) { transform: rotate(180deg) translateY(-130px) rotate(180deg); }
  .text:nth-child(6) { transform: rotate(225deg) translateY(-130px) rotate(135deg); }
  .text:nth-child(7) { transform: rotate(270deg) translateY(-130px) rotate(90deg); }
  .text:nth-child(8) { transform: rotate(315deg) translateY(-130px) rotate(45deg); }