如果你一贫如洗

:doodle { @grid: 4 / 1115px 640px; z-index: 1; } @size: @r(50,150)px; position: absolute; background: linear-gradient(@m3(rgb(@m3(@r(255))))); clip-path: @shape( points: 300; turn: 2; frame: 2; scale: .5; r: seq(.85, 10, .85); ); border-radius: 50%; cursor: pointer; offset-path: path('M200 100 Q500 400 900 100'); offset-distance: calc((@i - 1) * 20%); animation: rot 8s infinite linear var(--state); @keyframes rot { to { transform: rotate(360deg); } } :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-23 23:52
欣赏！

谢谢朋友光临！

起个网名好难 发表于 2023-5-24 08:03

谢谢老师光临！

红影 发表于 2023-5-24 09:46
这制作真漂亮，歌词同步也做得很好。欣赏水芙蓉好帖

谢谢红影美女支持！

梦缘 发表于 2023-5-24 11:00
欣赏老师的精彩，好听。

谢谢老师支持！

南无月

背景选得漂亮，加了歌词很完美，厉害

红影

醉美水芙蓉 发表于 2023-5-24 11:49
谢谢红影美女支持！

问好水芙蓉美女，再赏好帖

南无月 发表于 2023-5-24 18:06
背景选得漂亮，加了歌词很完美，厉害

我是跟你学的呢？瞎猫碰上死耗子蒙对了！做了半天呢！

南无月

醉美水芙蓉 发表于 2023-5-24 20:41
我是跟你学的呢？瞎猫碰上死耗子蒙对了！做了半天呢！

我也是这么蒙出来的。握手

南无月 发表于 2023-5-24 21:47
我也是这么蒙出来的。握手

我感觉你懂得比较多，做一个是一个，得心应手！

南无月

醉美水芙蓉 发表于 2023-5-24 22:01
我感觉你懂得比较多，做一个是一个，得心应手！

用成贴套的。你刚发的那个贴子问关联，我也发一个给你瞧瞧。有歌词关联的，对比看看。

南无月

南无月 发表于 2023-5-24 22:02
用成贴套的。你刚发的那个贴子问关联，我也发一个给你瞧瞧。有歌词关联的，对比看看。

哎呀没看清，乱回复了。这句我收回了哈，你当没看到。