让css-doodle时钟走起来

马黑黑

南无月 发表于 2023-5-26 17:59
这个实用性满满。
突然感觉十分亲切，不光光是代码了

马黑黑

焱鑫磊 发表于 2023-5-26 17:22
黑黑老师真厉害，赞赞赞！！！

马黑黑

梦油 发表于 2023-5-26 16:31
你真行！走时很准。

它去你所使用的电脑的时间

红影

马黑黑 发表于 2023-5-26 21:07
殊途同归

这里有好多看不动的，比如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);
这个不知道什么意思
前面一个帖子里的background: linear-gradient(@m3(rgb(@m3(@r(255)))));也没看懂。学习@m()的时候，3应该放括号里的吧？

马黑黑

红影 发表于 2023-5-26 21:16
这里有好多看不动的，比如background: @m60(radial-gradient(black 50%, black 0) @plot(r: 1) / 2px 2px ...

这是利用 background 属性做背景，背景就是那些刻度。

m60() 是 multiple(60, ...) 的缩写，你需要先了解这个函数。这句，通过制作 60 个不重复的 4px * 4px 的点来模拟刻度，使用的是 radial-gradient 渐变。

红影

马黑黑 发表于 2023-5-26 21:07
也不是什么都能做出来，能做出的做得出，不能的做不出

transform: rotate(calc(@i * 30deg)) translate(80px) rotate(calc(@i * -30deg));

这句也没看懂，是旋转个角度，然后沿着这个角度移动80再转回来么。看你cognitive4考试排列，那就是cognitive中心点横向开始转第一个30度吧。

马黑黑

红影 发表于 2023-5-26 21:22
transform: rotate(calc(@i * 30deg)) translate(80px) rotate(calc(@i * -30deg));

这句也没看懂，是 ...

这个是CSS3的东东，以前使用过也讲过的。

transform 的 rotate 和 translate 以一定角度和距离配合，可以让多个元素呈圆形排列，但元素会颠三倒四的，所以又按原角度旋转回来。

红影

马黑黑 发表于 2023-5-26 21:20
这是利用 background 属性做背景，背景就是那些刻度。

m60() 是 multiple(60, ...) 的缩写，你需要先 ...

嗯嗯，m的明白了，@plot是什么，感觉很陌生啊

红影

马黑黑 发表于 2023-5-26 21:24
这个是CSS3的东东，以前使用过也讲过的。

transform 的 rotate 和 translate 以一定角度和距离配合， ...

前面是位置上的变化，后面的角度是自身转到正方向。嗯，谢谢黑黑

马黑黑

红影 发表于 2023-5-26 21:51
前面是位置上的变化，后面的角度是自身转到正方向。嗯，谢谢黑黑

好像很早以前我介绍过这个方法

马黑黑

红影 发表于 2023-5-26 21:50
嗯嗯，m的明白了，@plot是什么，感觉很陌生啊

@plot中文版官网也没有介绍，你需要去英文版的瞧瞧

红影

马黑黑 发表于 2023-5-26 22:06
好像很早以前我介绍过这个方法

是的，以前那个时钟的时候，这不忘记了么

红影

马黑黑 发表于 2023-5-26 22:07
@plot中文版官网也没有介绍，你需要去英文版的瞧瞧

没本事，算了，这个暂且搁置

马黑黑

红影 发表于 2023-5-26 22:40
是的，以前那个时钟的时候，这不忘记了么

对，做时钟肯定用到这个原理，但更早之前应该已经介绍过

马黑黑

红影 发表于 2023-5-26 22:40
没本事，算了，这个暂且搁置

中文版文档相对滞后

红影

马黑黑 发表于 2023-5-26 22:40
对，做时钟肯定用到这个原理，但更早之前应该已经介绍过

当时没理解透呗，所以后面看到就迷惑。

红影

马黑黑 发表于 2023-5-26 22:41
中文版文档相对滞后

英文版的看不懂，随它去吧

马黑黑

红影 发表于 2023-5-26 23:09
当时没理解透呗，所以后面看到就迷惑。

这个知识点和技巧还是比较难的

马黑黑

红影 发表于 2023-5-26 23:10
英文版的看不懂，随它去吧

完整文档css-doodle其实也还没有

红影

马黑黑 发表于 2023-5-26 23:10
这个知识点和技巧还是比较难的

多接触，以后慢慢就熟悉了