我决定尝试使用一些基本的 CSS 属性创建一个模拟 12 小时时钟。我首先创建一个 500 像素的正方形 div。然后我将 border-radius 设置为 250px 并得到一个漂亮的圆圈。在此之后，我添加了十二个刻度线，将它们绝对定位，并得到它们对应的位置。
每个刻度线的 Angular 都基于此(很抱歉拼出了简单的数学):
- 12 个刻度线
- 360° 在我们的圈子里
- 360/12 = 30° Angular
可以使用一些基本的三 Angular 函数计算每个刻度线的位置。我知道 θ(0°、30°、60° 等)和半径 (250)，通过使用 cos 和 sin，我可以计算出相关的顶部、底部、左侧和右侧值。要获得左值或右值 (x)，我可以简单地使用:r * sin θ。要获得最高值或最低值 (y)，我可以使用:r - (r * cos θ)。希望下面的图片(请原谅 MS Paint 缺乏技能)可以帮助弄清我正在尝试做的事情。
一旦有了这些等式，就可以更容易地获得相应的 x 和 y 值:
θ (angle) | 250 * sin θ [x] | 250 - (250 * cos θ) [y]
--------------------------------------------------------------
30° (1:00) | right: 125px | top: 33.5px
60° (2:00) | right: 33.5px | top: 125px
90° (3:00) | right: 0px | top: 250px
120° (4:00) | right: 33.5px | bottom: 125px
150° (5:00) | right: 125px | bottom: 33.5px
180° (6:00) | right: 250px | bottom: 0px
210° (7:00) | left: 125px | bottom: 33.5px
240° (8:00) | left: 33.5px | bottom: 125px
270° (9:00) | left: 0px | bottom: 250px
300° (10:00) | left: 33.5px | top: 125px
330° (11:00) | left: 125px | top: 33.5px
360° (12:00) | left: 250px | top: 0px
既然我把这个问题拖得太久了……我的问题是，为什么我的 2、3、4、8、9 和 10 的刻度线都有点偏离？根据我的计算(我一直想这么说)，我不应该遇到这些问题。当然，我做了一些四舍五入并遗漏了一些 sig figs，但它们并不重要，不会让定位看起来不稳定。这是我的代码:
HTML
<body>
<div id="clock">
<div id="one" class="oneEleven tick"></div>
<div id="two" class="twoTen tick"></div>
<div id="three" class="threeNine tick"></div>
<div id="four" class="fourEight tick"></div>
<div id="five" class="fiveSeven tick"></div>
<div id="six" class="sixTwelve tick"></div>
<div id="seven" class="fiveSeven tick"></div>
<div id="eight" class="fourEight tick"></div>
<div id="nine" class="threeNine tick"></div>
<div id="ten" class="twoTen tick"></div>
<div id="eleven" class="oneEleven tick"></div>
<div id="twelve" class="sixTwelve tick"></div>
</div>
</body>
CSS
#clock {
height: 500px;
width: 500px;
border-radius: 50%;
border: 1px solid black;
position: relative;
}
.tick {
background-color: black;
height: 20px;
width: 5px;
position: absolute;
}
.oneEleven {
/* ~6.7% */
top: 33.5px;
}
.twoTen {
/* 25% */
top: 125px;
}
.threeNine {
/* 50% */
top: 250px;
}
.fourEight {
/* 25% */
bottom: 125px;
}
.fiveSeven {
/* ~6.7% */
bottom: 33.5px;
}
#one {
right: 125px;
transform: rotate(30deg);
}
#two {
/* ~93.3% */
right: 33.5px;
transform: rotate(60deg);
}
#three {
right: 0px;
transform: rotate(90deg);
}
#four {
right: 33.5px;
transform: rotate(120deg);
}
#five {
right: 125px;
transform: rotate(150deg);
}
#six {
left: 250px;
bottom: 0px;
}
#seven {
left: 125px;
transform: rotate(-150deg);
}
#eight {
left: 33.5px;
transform: rotate(-120deg);
}
#nine {
left: 0px;
transform: rotate(-90deg);
}
#ten {
left: 33.5px;
transform: rotate(-60deg);
}
#eleven {
left: 125px;
transform: rotate(-30deg);
}
#twelve {
left: 250px;
top: 0px;
}
jsFiddle .乍一看并不完全明显，但如果你看一下我提到的刻度线，你会发现它们并没有在圆圈上排成一行。我最终将转向百分比，但我想知道为什么它们会关闭，这是创建您也想添加样式的圆圈的最佳方法吗？我意识到有 HTML5 canvas tag ，但我觉得这太难处理了，而且会做比我需要执行的更多的处理......
如有任何帮助，我们将不胜感激!
最佳答案
看起来您已经定位了每个刻度以在圆上的正确位置获得一个 Angular 。但随后刻度线绕原点旋转，将其部分推到圆圈外。您应该能够通过为每个刻度适本地设置 transform-origin 来修复它。您需要围绕您定位的同一个 Angular 旋转。因此，如果您使用 top 和 right 定位，请将 transform-origin 设置为“top right”。例如:
#two {
/* ~93.3% */
right: 33.5px;
transform: rotate(60deg);
transform-origin: top right;
}
关于html - CSS:创建一个带有边界半径的时钟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16282008/