css一个正方形中心的转圈

在CSS中创建一个位于正方形中心的圆形旋转效果，通常需要结合`border-radius`属性、绝对定位以及`transform`属性来实现。首先，你需要创建一个正方形容器，然后将其子元素设置为圆形，通过`border-radius`设置为50%使其变为圆形，再利用`position: absolute;`和一些偏移量(`top`, `right`, `bottom`, `left`)将圆居中。最后，你可以使用`transform: rotate();`来控制旋转角度。

例如：

<style>
  .parent {
    position: relative;
    width: 200px; /* 正方形边长 */
    height: 200px;
    background-color: #f1f1f1;
  }

  .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg); /* 可以调整旋转角度 */
    border-radius: 50%;
    width: 100%; /* 圆形宽度等于容器边长的一半 */
    height: 100%; /* 圆形高度也等于容器边长的一半 */
    background-color: red;
  }
</style>

<div class="parent">
  <div class="circle"></div>
</div>