化身孤岛的蓝鲸（学习黑师路径作业之四）

南无月

:doodle { @size: 300px; cursor: pointer; right: 227px; top: 42px; z-index: 4; }clip-path: @shape(frame: 4;points: 40;x: cos(12t)^1 * cos(15t);y: cos(12t)^1 * sin(15t););background: linear-gradient(green,MediumPurple,RoyalBlue);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); }}:doodle { @size: 1024px 640px; background: url('https://s1.ax1x.com/2023/06/12/pCeaJQP.jpg') no-repeat center / cover; box-shadow: 0 0 6px #000; margin: 20px auto;}@size: 120px;position: absolute;background: linear-gradient(green,MediumPurple,RoyalBlue);clip-path: @shape(frame: 4;points: 40;x: cos(12t)^1 * cos(15t);y: cos(12t)^1 * sin(15t););border-radius: 50%;cursor: pointer;offset-path: path('M360 70 A120 120 0 1 0 360 560');offset-distance: calc((@i - 1) * 20%);animation: rot 6s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); }} :doodle { @size: auto 4em; z-index:5; bottom: 10px;left:520PX; --geci: "css-doodle player"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: Honeydew; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color:Teal; /* 同步歌词颜色 */ 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-6-15 19:29
月儿会选背景图，美女和鲸鱼都很有看点，漂亮

千羽啊，这个背景灰蒙蒙，应该能调亮点有质感的，我试了下没成。。。。

南无月

千羽 发表于 2023-6-15 19:31
很美的学习帖，问好月儿

抱个，看到你最开心了

南无月

梦缘 发表于 2023-6-15 20:07
问好老师，欣赏精彩佳作，谢谢分享，点赞！

谢谢梦缘临贴支持

南无月

红影 发表于 2023-6-15 20:45
月儿自己设计的路径，真棒。而且暂停的时候，所有动态都能停止，这个制作月儿是动了很多脑筋的，很赞{:4_19 ...

如果有看点，还是个坛子学习氛围好，感谢影子

南无月

红影 发表于 2023-6-15 20:49
还把播放器对上那个月亮，这个需要调整播放器大小和仔细调位呢，非常不容易

贴子有点满，小播只能挂月亮上了

南无月

樵歌 发表于 2023-6-15 21:18
学霸来咧，大家快来抄作业

感谢樵管支持鼓励

南无月

醉美水芙蓉 发表于 2023-6-16 07:05
月儿真棒！设计精巧！

水芙蓉好啊，这是个路径作业

小辣椒

好美啊，小辣椒都不晓得黑黑的教程是那个了

马黑黑

一直到现在，周深的歌我还是听不出公的味道

南无月

小辣椒 发表于 2023-6-16 14:32
好美啊，小辣椒都不晓得黑黑的教程是那个了

小辣椒好啊。这是个路径的，优弧劣弧的那个教程，在书房里有的。。

南无月

马黑黑 发表于 2023-6-16 14:44
一直到现在，周深的歌我还是听不出公的味道

那以后也听不到，他就这音色。。。
长得像女生，唱得像女生，性格也像。。。

马黑黑

南无月 发表于 2023-6-16 18:02
那以后也听不到，他就这音色。。。
长得像女生，唱得像女生，性格也像。。。

额