论坛 › 马黑黑教程专版 › 原生CSS+HTML钟表盘

马黑黑 发表于 2023-5-28 09:51

原生CSS+HTML钟表盘

本帖最后由 马黑黑 于 2023-5-28 09:57 编辑 <br /><br /><style>
#clock {
    width: var(--ww);
    height: var(--ww);
    background: lightblue;
    border: 12px solid olive;
    border-radius: 50%;
    user-select: none;
    display: grid;
    place-items: center;
    position: relative;
    --ww: 200px;
    --num_ww: 30px;
    --rr: calc((var(--ww) - var(--num_ww)) / 2);
}
hand, num { position: absolute; transform-origin: 50% 100%; }
num {
        width: var(--num_ww);
        height: var(--num_ww);
        font: bold 20px / var(--num_ww) sans-serif;
        text-align: center;
        left: calc(var(--rr) + (var(--rr) * cos(var(--deg))));
        top: calc(var(--rr) + (var(--rr) * sin(var(--deg))));
}
num:nth-of-type(1) { --deg: 270deg; }
num:nth-of-type(2) { --deg: 300deg; }
num:nth-of-type(3) { --deg: 330deg; }
num:nth-of-type(4) { --deg: 0deg; }
num:nth-of-type(5) { --deg: 30deg; }
num:nth-of-type(6) { --deg: 60deg; }
num:nth-of-type(7) { --deg: 90deg; }
num:nth-of-type(8) { --deg: 120deg; }
num:nth-of-type(9) { --deg: 150deg; }
num:nth-of-type(10) { --deg: 180deg; }
num:nth-of-type(11) { --deg: 210deg; }
num:nth-of-type(12) { --deg: 240deg; }
hand:nth-of-type(1) {
        width: 2px;
        height: calc(var(--ww) / 2 - 6px);
        background: rgba(100,100,0,.8);
        top: 6px;
        transform: rotate(0deg);
}
hand:nth-of-type(2) {
        width: 4px;
        height: calc(var(--ww) / 2 - 20px);
        background: rgba(300,300,300,.8);
        top: 20px;
        transform: rotate(70deg);
}
hand:nth-of-type(3) {
        width: 6px;
        height: calc(var(--ww) / 2 - 40px);
        background: rgba(200,200,0,.8);
        top: 40px;
        transform: rotate(20deg);
}
hand:nth-of-type(4) {
        width: 10px;
        height: 10px;
        border: 1px solid gray;
}
</style>

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

<p><br><br><br><br></p>

马黑黑 发表于 2023-5-28 09:52

代码
<style>
#clock {
    width: var(--ww);
    height: var(--ww);
    background: lightblue;
    border: 12px solid olive;
    border-radius: 50%;
    user-select: none;
    display: grid;
    place-items: center;
    position: relative;
    --ww: 200px;
    --num_ww: 24px;
    --rr: calc((var(--ww) - var(--num_ww)) / 2);
}
hand, num { position: absolute; transform-origin: 50% 100%; }
num {
        width: var(--num_ww);
        height: var(--num_ww);
        font: bold 20px / var(--num_ww) sans-serif;
        text-align: center;
        left: calc(var(--rr) + (var(--rr) * cos(var(--deg))));
        top: calc(var(--rr) + (var(--rr) * sin(var(--deg))));
}
num:nth-of-type(1) { --deg: 270deg; }
num:nth-of-type(2) { --deg: 300deg; }
num:nth-of-type(3) { --deg: 330deg; }
num:nth-of-type(4) { --deg: 0deg; }
num:nth-of-type(5) { --deg: 30deg; }
num:nth-of-type(6) { --deg: 60deg; }
num:nth-of-type(7) { --deg: 90deg; }
num:nth-of-type(8) { --deg: 120deg; }
num:nth-of-type(9) { --deg: 150deg; }
num:nth-of-type(10) { --deg: 180deg; }
num:nth-of-type(11) { --deg: 210deg; }
num:nth-of-type(12) { --deg: 240deg; }
hand:nth-of-type(1) {
        width: 2px;
        height: calc(var(--ww) / 2 - 6px);
        background: rgba(100,100,0,.8);
        top: 6px;
        transform: rotate(0deg);
}
hand:nth-of-type(2) {
        width: 4px;
        height: calc(var(--ww) / 2 - 20px);
        background: rgba(300,300,300,.8);
        top: 20px;
        transform: rotate(70deg);
}
hand:nth-of-type(3) {
        width: 6px;
        height: calc(var(--ww) / 2 - 40px);
        background: rgba(200,200,0,.8);
        top: 40px;
        transform: rotate(20deg);
}
hand:nth-of-type(4) {
        width: 10px;
        height: 10px;
        border: 1px solid gray;
}
</style>

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

马黑黑 发表于 2023-5-28 09:54

数字刻度的排列原理：

利用 cos 和 sin 两个三角函数，结合预设好的时钟尺寸、刻度应在的角度，计算出布局半径，继而计算出每一个刻度的 left 和 top 位置。

马黑黑 发表于 2023-5-28 09:56

当前，新版本的 Chromium、Firefox、Safari、Opera 等浏览器均支持在 CSS 中使用相应的三角函数。

樵歌 发表于 2023-5-28 11:09

各针没走呀

红影 发表于 2023-5-28 11:12

要给出这么多角度啊，要是用了JS就简单多了吧{:4_187:}

红影 发表于 2023-5-28 11:26

樵歌 发表于 2023-5-28 11:09
各针没走呀

这个是做出样子来，不是让它走啊{:4_173:}

马黑黑 发表于 2023-5-28 11:35

红影 发表于 2023-5-28 11:12
要给出这么多角度啊，要是用了JS就简单多了吧

对，但我需要演示一下纯CSS3对三角函数的应用

马黑黑 发表于 2023-5-28 11:36

樵歌 发表于 2023-5-28 11:09
各针没走呀

要走简单的，这里主要演示用三角函数定位数字刻度元素

樵歌 发表于 2023-5-28 12:18

红影 发表于 2023-5-28 11:26
这个是做出样子来，不是让它走啊

原来这样

樵歌 发表于 2023-5-28 12:21

马黑黑 发表于 2023-5-28 11:36
要走简单的，这里主要演示用三角函数定位数字刻度元素

现在用三角函数，以后是不用用微积分呀{:4_189:}

马黑黑 发表于 2023-5-28 12:29

樵歌 发表于 2023-5-28 12:21
现在用三角函数，以后是不用用微积分呀

CSS目前只支持几个三角函数，将来怎么样不知道

红影 发表于 2023-5-28 13:50

马黑黑 发表于 2023-5-28 11:35
对，但我需要演示一下纯CSS3对三角函数的应用

嗯，纯css能做出来也很了不起{:4_199:}

马黑黑 发表于 2023-5-28 17:35

红影 发表于 2023-5-28 13:50
嗯，纯css能做出来也很了不起

之前也是做过的，只是布局刻度的方式不同：过去用的是 rotate 和 translate的结合，这里使用的是三角函数

梦缘 发表于 2023-5-28 18:01

不一样的精彩，感谢分享！{:4_190:}

马黑黑 发表于 2023-5-28 18:20

梦缘 发表于 2023-5-28 18:01
不一样的精彩，感谢分享！

{:4_190:}

樵歌 发表于 2023-5-28 19:06

马黑黑 发表于 2023-5-28 12:29
CSS目前只支持几个三角函数，将来怎么样不知道

看样纸有无限可能，只有想不到没有做不做不的

红影 发表于 2023-5-28 19:20

马黑黑 发表于 2023-5-28 17:35
之前也是做过的，只是布局刻度的方式不同：过去用的是 rotate 和 translate的结合，这里使用的是三角函数

知道的，今天还专门回去看了一下的。

马黑黑 发表于 2023-5-28 20:07

红影 发表于 2023-5-28 19:20
知道的，今天还专门回去看了一下的。

三角函数应用于CSS是个开始，将来，CSS可能不止于此

马黑黑 发表于 2023-5-28 20:08

樵歌 发表于 2023-5-28 19:06
看样纸有无限可能，只有想不到没有做不做不的

大约如此

查看完整版本: 原生CSS+HTML钟表盘