一花一世界（学习黑师《可能》css-doodle player效果）

南无月

:doodle { @grid: 2 / 300px 60px; color: var(--color); bottom:40px; z-index: 100; --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: Thistle; } /* 时间信息 : 左 */ @nth(1) { @place: 25% 80%; :after { content: var(--ttmsg1); } } /* 控制器 */ @nth(2) { @size: var(--size); @shape: windmill; @place: 50% 35%; background: var(--color); animation: rot 6s infinite linear var(--state); } /* 时间信息 : 右 */ @nth(3) { @place: 75% 80%; :after { content: var(--ttmsg2); } } /* 进度条 */ @nth(4) { @place: 50% 80%; @size: 100% 2px; background: #bbb; display: grid; place-items: center start; :before { content: ''; width: var(--prog); height: 100%; background: var(--color); } } @keyframes rot { to { transform: rotate(1turn); } } :doodle { @size: auto 4em; bottom: 0; --geci: "css-doodle player"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: LightGrey; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: Thistle; /* 同步歌词颜色 */ 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: 1024px 640px;} @grid: 40x1 / 150vmin 90vmin; :container { perspective: 23vmin; }pointer-events: auto; background: @m( @r(140, 100), radial-gradient( @p(#00b8a9, #f8f3d4, #f6416c, #ffde7d) 15%, transparent 50% ) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat ); @size: 30%; @place-cell: center; border-radius: 50%; transform-style: preserve-3d; animation: scale-up 15s linear infinite var(--state); animation-delay: calc(@i * -.6s); @keyframes scale-up { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 10% { opacity: 1; } 95% { transform: translate3d(0, 0, @r(50vmin, 55vmin)) rotate(@r(-360deg, 360deg)); } 100% { opacity: 0; transform: translate3d(0, 0, 1vmin); } }

梦油

美不胜收。问候南无月朋友。

马黑黑

很美的帖子。

不过，就我个人而言，带进度条的播放器不宜放在上方偏左或偏右之处，底部正中的位置比较合适。当然个人看法不同，自己觉得好就行。

南无月

梦油 发表于 2023-5-13 10:56
美不胜收。问候南无月朋友。

谢谢梦油临贴支持问好

南无月

马黑黑 发表于 2023-5-13 10:59
很美的帖子。

不过，就我个人而言，带进度条的播放器不宜放在上方偏左或偏右之处，底部正中的位置比较合 ...

我整的时候觉得歌词放头顶有头重脚轻的感觉，所以就想调到下方。
进度条的在下方方便点击，这个实用。
都放下方中间好了。。。

梦油

南无月 发表于 2023-5-13 11:12
谢谢梦油临贴支持问好

南无月朋友别客气。

马黑黑

南无月 发表于 2023-5-13 11:15
我整的时候觉得歌词放头顶有头重脚轻的感觉，所以就想调到下方。
进度条的在下方方便点击，这个实用。
...

也行

亦是金

问好南无月！耳目一新的好帖！欣赏学习了！想试着模仿一个！

红影

当中的小图案很棒，这个也还是自己的创新呢。欣赏南无月好帖

梦缘

如梦如幻，好美啊！欣赏点赞！

南无月

梦油 发表于 2023-5-13 11:21
南无月朋友别客气。

不客气的

南无月

醉美水芙蓉 发表于 2023-5-13 11:50
欣赏朋友佳作！

水芙蓉来了，谢谢回复临贴

南无月

马黑黑 发表于 2023-5-13 13:14
也行

这个贴子也只能这么放了。其他地方都不合适

南无月

亦是金 发表于 2023-5-13 15:02
问好南无月！耳目一新的好帖！欣赏学习了！想试着模仿一个！

谢谢亦是金肯定，学习不敢当。期待你的作品

马黑黑

南无月 发表于 2023-5-14 10:31
这个贴子也只能这么放了。其他地方都不合适

对。天地之间是个大姑凉，只能如此了

南无月

红影 发表于 2023-5-13 15:25
当中的小图案很棒，这个也还是自己的创新呢。欣赏南无月好帖

谢谢肯定，当中的小图案是原来的粒子，并没有更改

南无月

梦缘 发表于 2023-5-13 20:43
如梦如幻，好美啊！欣赏点赞！

谢谢梦缘临贴点赞

梦油

南无月 发表于 2023-5-14 10:30
不客气的

谢谢你的香茶。

南无月

马黑黑 发表于 2023-5-14 10:32
对。天地之间是个大姑凉，只能如此了

播放器和歌词放一起，也说得过去的