如何用CSS把元素像放在钟面上一样放在圆圈里？[已关闭]

9udxz4iz 于 2023-01-03 发布在其他

关注(0)|答案(2)|浏览(107)

- 已关闭**。此问题需要超过focused。当前不接受答案。
- 想要改进此问题吗？**更新此问题，使其仅关注editing this post的一个问题。

3天前关闭。
Improve this question
我是个编程新手，我在网上搜索了好几个小时，但没有找到一个简单明了的方法来设计一个数字钟面。
我的意思是如何把12或24个数字的时钟与CSS（而不是SCSS）？我知道我可以复制/粘贴代码，但我真的想弄清楚。
有没有可能用24小时或12小时设计出完美的圆形物体？
谢谢你的帮助。
我试着把数字与度数或顶部和左侧元素，但它没有完美的工作。

css

来源：https://stackoverflow.com/questions/74963965/how-to-place-elements-in-a-circle-as-on-a-clock-face-with-css

2条答案

按热度按时间

brc7rcf01#

您可以将CSS变量与nth-child结合使用：

body{
    color:white;
}
#clock{
    width:100%;
    aspect-ratio:1 / 1;
    background-color:blue;
    border-radius:100%;
    position:relative;
}
:nth-child(1) { --nth-child: 1 }
:nth-child(2) { --nth-child: 2 }
:nth-child(3) { --nth-child: 3 }
:nth-child(4) { --nth-child: 4 }
:nth-child(5) { --nth-child: 5}
:nth-child(6) { --nth-child: 6 }
:nth-child(7) { --nth-child: 7 }
:nth-child(8) { --nth-child: 8 }
:nth-child(9) { --nth-child: 9 }
:nth-child(10) { --nth-child: 10 }
:nth-child(11) { --nth-child: 11 }
:nth-child(12) { --nth-child: 12 }

.hour{
    left:45%;
    top:45%;
    position:absolute;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    width:10%;
    height:10%;
    background-color:black;
    border-radius:100%;
    transform:rotateZ(calc((var(--nth-child) + 6)*calc(360/12)*1deg))
            translateY(400%)
            rotateZ(calc((var(--nth-child) + 6)*calc(360/12)*-1deg));
}

<body>

  <div id="clock">
    <div class="hour">1</div>
    <div class="hour">2</div>
    <div class="hour">3</div>
    <div class="hour">4</div>
    <div class="hour">5</div>
    <div class="hour">6</div>
    <div class="hour">7</div>
    <div class="hour">8</div>
    <div class="hour">9</div>
    <div class="hour">10</div>
    <div class="hour">11</div>
    <div class="hour">12</div>
   
    </div>

  </div>
</body>

如果你想进一步简化代码，你可以使用javascript，就像下面的答案一样：Is there a way to use the "n" value in :nth-child(n)?

赞(0）回复(0）举报 2023-01-03

ztigrdn82#

有可能！这是密码
超文本标记语言

<div class="parent">
        <div class="clock">
            <span style="--n:1">1</span>
            <span style="--n:2">2</span>
            <span style="--n:3">3</span>
            <span style="--n:4">4</span>
            <span style="--n:5">5</span>
            <span style="--n:6">6</span>
            <span style="--n:7">7</span>
            <span style="--n:8">8</span>
            <span style="--n:9">9</span>
            <span style="--n:10">10</span>
            <span style="--n:11">11</span>
            <span style="--n:12">12</span>
           
        </div>
    </div>

CSS

.parent{
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background-color: #EFF6FF;
    position: relative;   
    padding: 10px; 
}
.clock{
    width: 500px;
    height: 500px;
    position: relative;
}
.clock span{
    width: 70px;
    height: 70px;
    background: #ffffff;
    color: #155674;
    border-radius: 50%;
    position: absolute;
    transform: rotate(calc(var(--n) * 30deg));
    transform-origin: 0 240px;
    margin-left: 250px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

赞(0）回复(0）举报 2023-01-03

我来回答

如何用CSS把元素像放在钟面上一样放在圆圈里？[已关闭]

2条答案

相关问题

热门标签

最新问答