话不多说,基本思路是第一步先画一个大圆,然后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: relati