《周末》（学习黑黑时钟效果）

红影

:doodle{ @size: 80px; top: 30px; z-index: 40; clip-path: @shape( fill: evenodd; points: 200; scale: .6; r: cos(5t)^2 + sin(5t) + .3;); background: snow; cursor: pointer; animation: rot 4s infinite linear var(--state); } @keyframes rot { to { transform: rotate(360deg); } } :doodle { top: 100px; right: 50px; @size: 200px; border: 10px solid SaddleBrown; border-radius: 50%; background: Linen @doodle( /* 刻度 */ :doodle { @grid: 1x60 / 100%; } @size: 3px; @place: center; @shape: circle; background: DarkSlateGray; transform: rotate(calc(@i * 6deg)) translate(90px); ) no-repeat; --sDeg: 0deg; --mDeg: 0deg; --hDeg: 0deg; } @place: center; transform-origin: 50% 100%; @match(i ≤ 12) { /* 钟点数 */ :before { content: '@pn(4,5,6,7,8,9,10,11,12,1,2,3)'; } transform: rotate(calc(@i * 30deg)) translate(78px) rotate(calc(@i * -30deg)); } @nth(13) { /* 时针 */ @size: 6px 60px; @place: 50% 32.5%; background: linear-gradient(snow,SaddleBrown); transform: rotate(var(--hDeg)); } @nth(14) { /* 分针 */ @size: 4px 80px; @place: 50% 27.5%; background: linear-gradient(tan,SaddleBrown); transform: rotate(var(--mDeg)); } @nth(15) { /* 秒针 */ @size: 2px 90px; @place: 50% 25%; background: linear-gradient(white,SaddleBrown); transform: rotate(var(--sDeg)); } @nth(16) { /* 针帽 */ @size: 18px; @shape: circle; background: radial-gradient(Peru,Tan); }

:doodle { @size: auto 4em; top: 100px; --geci: "花潮lrc在线"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: snow; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: Sienna; /* 同步歌词颜色 */ overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); } @keyframes cover1 { from { width: 0; } to { width: 100%; } } @keyframes cover2 { from { width: 0; } to { width: 100%; } } :doodle { @size: 1200px 750px; --state:paused; } position: absolute; left: @r(255)%; top: -10%; :after { position: absolute; content: '@p(周末,♪,休闲,♫,♯,快乐,♮,♩,♬,☺,✲,❄)'; color: snow; font-size: @r(6, 24)px; } animation: fall 40s @r(-6, 36)s infinite var(--state); @keyframes fall { from { transform: rotate(0deg) translate(0px); } to { transform: rotate(@r(-60,60)deg) translate(-1500px); } }

红影

休息天有空闲时间，也不管提醒了，赶紧去做个帖子学习一下。感谢黑黑的代码

红影

学了一下时钟，也去复习一下一种迷糊的css图片精灵相关知识。那个水果本来是另找的图，还特地合在图片里，就是为了用精灵再把它找出来。时钟的颜色调了一下，还学习了一下暂停时让所有动的都停下来。当然，时钟是不能停也不可以停的

红影

请教一下黑黑，播放器按钮怎么好像特别不容易点到啊？@马黑黑  

红影

哦，忽然想起来一个地方好像错了？关于打包那块。不过好像帖子正常，不管了

梦缘

好漂亮的客厅啊，感谢分享！

梦油

走时准确的时钟真好。

红影

醉美水芙蓉 发表于 2023-5-27 17:00
很漂亮，欣赏红影美贴！

谢谢水芙蓉美女鼓励

红影

梦缘 发表于 2023-5-27 17:18
好漂亮的客厅啊，感谢分享！

主要为了加黑黑的那个时钟的

红影

梦油 发表于 2023-5-27 18:04
走时准确的时钟真好。

是啊，看着帖子就知道当前时间

梦油

红影 发表于 2023-5-27 19:56
是啊，看着帖子就知道当前时间

我前几年试图加在签名里，始终未能成功。

南无月

影子速度一流，贴子质量一流，色彩搭得十分素雅，代码运用熟练，动画控制能力强。全方位好贴

马黑黑

红影 发表于 2023-5-27 16:52
请教一下黑黑，播放器按钮怎么好像特别不容易点到啊？@马黑黑

css-doodle元素的形状，基本上以 clip-path 实现，被切割掉的地方，都不接受交互操作。故此，建议整个css-doodle图案都弄成播放器控制器，而不是剥夺它们的点击权限。

红影

梦油 发表于 2023-5-27 20:27
我前几年试图加在签名里，始终未能成功。

这个是代码，签名里只能加图片呢。

红影

南无月 发表于 2023-5-27 21:33
影子速度一流，贴子质量一流，色彩搭得十分素雅，代码运用熟练，动画控制能力强。全方位好贴

呵呵，月儿谬赞了，其实也是套用而已呢

南无月

红影 发表于 2023-5-27 21:49
呵呵，月儿谬赞了，其实也是套用而已呢

影子用得十分得当

红影

马黑黑 发表于 2023-5-27 21:38
css-doodle元素的形状，基本上以 clip-path 实现，被切割掉的地方，都不接受交互操作。故此，建议整个css ...

嗯嗯，那么“整个css-doodle图案都弄成播放器控制器”，这个怎么弄啊

红影

南无月 发表于 2023-5-27 21:51
影子用得十分得当

帖子里弄了点水果，月儿请吃

马黑黑

红影 发表于 2023-5-27 21:52
嗯嗯，那么“整个css-doodle图案都弄成播放器控制器”，这个怎么弄啊

这个就是不弄呀