html – CSS：创建一个border-radius的时钟

2023年7月13日 253次阅读

我决定尝试创建一个具有一些基本CSS属性的模拟12小时时钟.我首先创建一个500px的正方形div.然后我将border-radius设置为250px并获得漂亮的圆圈.在此之后,我添加十二个刻度线,将它们绝对定位,并获得相应的位置.

每个刻度标记的角度都是基于此(拼写出简单数学的道歉)：

> 12个刻度线
>我们圈内360°
> 360/12 = 30°角

每个刻度线的位置可以使用一些基本的三角学计算.我知道θ(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无花果,但它们并没有那么重要,使定位看起来很糟糕.这是我的代码：

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,但我觉得这样做太难了,并且会进行比我需要做的更多的处理……

任何帮助,将不胜感激！

最佳答案 看起来你已定位每个刻度线以使圆圈上的正确位置有一个角落.但随后蜱围绕原点旋转,将其中的一部分推到圆外.您应该能够通过适当地为每个刻度设置transform-origin来修复它.您需要围绕您定位的同一个角旋转.因此,如果您使用顶部和右侧定位,请将transform-origin设置为“右上角”.例如：

#two {
  /* ~93.3% */
  right: 33.5px;
  transform: rotate(60deg);
  transform-origin: top right;
}
点赞