【作业贴】如果（学习黑师《母亲》CSS-DOODLE加歌词效果）

南无月

:doodle { @grid: 4 / 1024px 640px; z-index: 1; } @size: @r(40,100)px; @place: @r(5,90)% @r(5,20)%; background: rgba(@m3(@r(255)), @r(.6,.9)); clip-path: @shape( fill: evenodd; points: 400; x: cos(5t)^2 * sin(t); y: sin(2t)^2 * cos(5t); ); @nth(@size) { @size: 160px; @place: center; cursor: pointer; } animation: rot @r(3,9)s infinite linear var(--state); @keyframes rot {to {transform: rotate(@p(-360,360)deg); } } :doodle { @size: auto 4em; bottom: 10px; --geci: "css-doodle player"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: gray; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: darkgreen; /* 同步歌词颜色 */ 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%; } }

南无月

换了一个蝴蝶图案，放在星空上，和背景上空的小蝴蝶呼应
歌曲是昨天看向往的生活，里面的人唱的歌，觉得好听就搜来做了一个同步，今天做贴顺手拿来用用。

起个网名好难

欣赏佳作，下午好！

小文

欣赏佳作

红影

这个厉害了，我连花朵的图案都没弄明白，月儿已经可以换蝴蝶图案了

梦缘

欣赏老师的精彩分享，很好看！

马黑黑

看见到有条狗狗。袁川大佬的示例里也有狗狗，不过没有图中的灵动

南无月

起个网名好难 发表于 2023-5-14 15:41
欣赏佳作，下午好！

下午好

南无月

小文 发表于 2023-5-14 16:44
欣赏佳作

问好小文

南无月

红影 发表于 2023-5-14 16:51
这个厉害了，我连花朵的图案都没弄明白，月儿已经可以换蝴蝶图案了

老师提供的CSS网里搜到的代码，自己不会写的

南无月

醉美水芙蓉 发表于 2023-5-14 17:22
厉害呀！把黑黑老师的图案都换了！漂亮！

大佬的图案代码，拿来一用。水芙蓉好

南无月

醉美水芙蓉 发表于 2023-5-14 17:23
看来朋友对代码很熟悉！

不咋滴，跟大家一样正在学习中。。

南无月

梦缘 发表于 2023-5-14 17:45
欣赏老师的精彩分享，很好看！

谢谢梦缘支持鼓励

南无月

马黑黑 发表于 2023-5-14 18:06
看见到有条狗狗。袁川大佬的示例里也有狗狗，不过没有图中的灵动

那小狗狗看上去象中猫。

南无月

马黑黑 发表于 2023-5-14 18:06
看见到有条狗狗。袁川大佬的示例里也有狗狗，不过没有图中的灵动

蝴蝶代码是网上复制来的，是不是袁大佬的就不知道了

南无月

醉美水芙蓉 发表于 2023-5-14 18:56
图片和播放器美美哒！收藏学习了！

如果有用，那最好不过了。。

马黑黑

南无月 发表于 2023-5-14 18:42
蝴蝶代码是网上复制来的，是不是袁大佬的就不知道了

他的示例里有