用css-doodle做个表盘
本帖最后由 马黑黑 于 2023-5-27 21:35 编辑 <br /><br /><css-doodle grid="4">:doodle {
@size: 200px;
border: 6px solid black;
border-radius: 50%;
background: @m60(radial-gradient(black 50%, black 0) @plot(r: 1) / 2px 2px no-repeat), @m12(radial-gradient(black 50%, black 0) @plot(r: 1) / 4px 4px no-repeat);
}
@place: center;
position: absolute;
@match(i ≤ 12) {
:before { content: '@pn(4,5,6,7,8,9,10,11,12,1,2,3)'; }
transform: rotate(calc(@i * 30deg)) translate(80px) rotate(calc(@i * -30deg));
}
@nth(13) {
@size: 10px;
@shape: circle;
background: black;
}
@nth(14) {
@size: 2px 100px;
top: 60px;
background: black;
transform-origin: 1px 86px;
transform: rotate(120deg);
}
@nth(15) {
@size: 3px 80px;
top: 56px;
background: black;
transform-origin: 1.5px 80px;
transform: rotate(30deg);
}
@nth(16) {
@size: 4px 60px;
top: 66px;
background: black;
transform-origin: 2px 60px;
transform: rotate(15deg);
}
</css-doodle>
<script>
let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);
</script> 代码
<css-doodle grid="4">
:doodle {
@size: 200px;
border: 6px solid black;
border-radius: 50%;
background: @m60(radial-gradient(black 50%, black 0) @plot(r: 1) / 2px 2px no-repeat), @m12(radial-gradient(black 50%, black 0) @plot(r: 1) / 4px 4px no-repeat);
}
@place: center;
position: absolute;
@match(i ≤ 12) {
:before { content: '@pn(4,5,6,7,8,9,10,11,12,1,2,3)'; }
transform: rotate(calc(@i * 30deg)) translate(80px) rotate(calc(@i * -30deg));
}
@nth(13) {
@size: 10px;
@shape: circle;
background: black;
}
@nth(14) {
@size: 2px 100px;
top: 60px;
background: black;
transform-origin: 1px 86px;
transform: rotate(120deg);
}
@nth(15) {
@size: 3px 80px;
top: 56px;
background: black;
transform-origin: 1.5px 80px;
transform: rotate(30deg);
}
@nth(16) {
@size: 4px 60px;
top: 66px;
background: black;
transform-origin: 2px 60px;
transform: rotate(15deg);
}
</css-doodle>
<script>
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
</script>
大概有点像而已 马黑黑 发表于 2023-5-25 21:37
大概有点像而已
它就是个钟表。纯代码写的，太厉害了{:4_199:} 16个格子正好都用上了。这个做得很像呢{:4_199:} 太腻害了{:4_199:} 一斛珠 发表于 2023-5-25 22:14
太腻害了
{:4_190:} 南无月 发表于 2023-5-25 21:48
它就是个钟表。纯代码写的，太厉害了
以前用CSS+HTML+JS写过真的时钟 醉美水芙蓉 发表于 2023-5-25 22:09
黑黑老师就是厉害！神了！
{:4_190:} 红影 发表于 2023-5-25 21:55
16个格子正好都用上了。这个做得很像呢
有点像 马黑黑 发表于 2023-5-25 22:28
以前用CSS+HTML+JS写过真的时钟
<css-doodle grid="4">
:doodle {
@size: 200px;
border: 6px solid red;
border-radius: 50%;
@m12(radial-gradient(black 50%, black 0) @plot(r: 1) / 4px 4px no-repeat);
}
@place: center;
position: absolute;
@match(i ≤ 12) {
:before { content: '@pn(章,‍,‍,‍,马,黑,黑,诺,贝,尔,吹,牛)'; }
font-family:'宋体', sans-serif;
font-size: 2rem;
color: red;
transform: rotate(calc(@i * 30deg)) translate(80px) rotate(calc(@i * -30deg));
}
@nth(13) {
@size: 60px;
@shape: star;
background: red;
}
</css-doodle>
<script>
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
</script> 马黑黑 发表于 2023-5-25 22:28
以前用CSS+HTML+JS写过真的时钟
时钟样式的小播也有，还用来做过贴子{:4_173:} 南无月 发表于 2023-5-25 22:39
时钟样式的小播也有，还用来做过贴子
做过，有过 马黑黑 发表于 2023-5-25 22:51
做过，有过
那这个会动的也可以做贴子喽{:4_173:} 马黑黑 发表于 2023-5-25 22:28
以前用CSS+HTML+JS写过真的时钟
对的，以前做个的，上面还有花潮的拼音呢{:4_173:} 红影 发表于 2023-5-26 18:29
对的，以前做个的，上面还有花潮的拼音呢
是的 南无月 发表于 2023-5-26 17:51
那这个会动的也可以做贴子喽
这个做帖子合适吗 马黑黑 发表于 2023-5-26 21:09
是的
记得以前还有个数字表示的，直接显示当前时间和日期。 红影 发表于 2023-5-26 21:34
记得以前还有个数字表示的，直接显示当前时间和日期。
文本显示是最简单的