纯css实现大圆圆弧上画12个小圆均匀分布

话不多说，基本思路是第一步先画一个大圆，然后12个小圆，每个小圆通过css transform 的rotate旋转，光旋转还不行，要通过transform-origin（设置旋转元素的基点位置），根据不同基点去旋转，还有一个地方就是小圆旋转角度360/小圆个数，大概思路就是这样，核心代码：大圆代码位置自己调试下 HTML

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</div>

CSS

ul{
    width: 400px;
	height: 400px;
	background: #ccc;
	border-radius: 50%;
	position: relative;
}
li {
    margin: 0;
    list-style-type: none;
    padding: 0;
    width: 46px;
    height: 46px;
    position: absolute;
    background-color:red;
    border-radius: 50%;
    line-height: 46px;
    text-align: center;
    left: 50%;
    margin-left: -23px;
    margin-top: -23px;
    color: #fff;
    transform-origin: 23px 163px;
  }
  li:first-child {
    transform-origin: 0 0;
  }
  @for $i from 1 through 12 {
    li:nth-of-type(#{$i}) {
      transform: rotate(($i - 1) * 30  + deg);
    }
  }
  @for $i from 1 through 12 {
    li:nth-of-type(#{$i}) span {
      display: block;
      transform: rotate(($i - 1) * -30  + deg);
    }
  }