快乐果农（学习黑师路径课程作业一）

南无月

: doodle {@size: 1024px 640px; background: url('') no-repeat center/cover; box-shadow: 0 0 6px #000; position: relative; margin: 20px auto; z-index: 1;} @size: 60px; clip-path: @shape(points: 360; scale: .3; move: 0 .6; x: sin(5t) + sin(t) + tan.sin(3t); y: cos(2t) + cos(t) + tan.cos(6t);rotate: 90;); position: absolute; background: WhiteSmoke; offset-path: path('M0 60 Q300 200,400 180 T850 10'); animation: move 20s infinite linear var(--state); cursor: pointer;@keyframes move { to { offset-distance: 100%; } } :doodle { @size: auto 4em; z-index:5; bottom: 10px; --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%; } }

南无月

@马黑黑 老师来瞧瞧，路径作业，入门哈

马黑黑

把 d 路径放到 offset-path 里来，不错

红影

这播放器图形还真的像小飞机呢，月儿把自己头像都拿出来做帖子了啊

红影

这样的场景真悠闲呢，好自在。看到是路径学习一，看样子后面还有啊

焱鑫磊

好帖！

南无月

马黑黑 发表于 2023-5-26 22:30
把 d 路径放到 offset-path 里来，不错

黑黑辛苦

南无月

红影 发表于 2023-5-26 23:01
这播放器图形还真的像小飞机呢，月儿把自己头像都拿出来做帖子了啊

这个图好看，拿来当素材用一下

南无月

红影 发表于 2023-5-26 23:02
这样的场景真悠闲呢，好自在。看到是路径学习一，看样子后面还有啊

对路径一无所知，现在刚入门哈，后面应该有的吧

南无月

醉美水芙蓉 发表于 2023-5-26 23:40
月儿很聪明，我都看不懂呢？

谢谢水芙蓉夸奖

南无月

焱鑫磊 发表于 2023-5-27 00:12
好帖！

感谢临贴支持

南无月

醉美水芙蓉 发表于 2023-5-27 17:10
月儿好悠闲啊！

嗯哪，很自在。这就是世界上最好的头像

马黑黑

南无月 发表于 2023-5-27 21:20
黑黑辛苦

辛苦的应该不是我

南无月

马黑黑 发表于 2023-5-27 21:41
辛苦的应该不是我

是我吧

马黑黑

南无月 发表于 2023-5-27 21:44
是我吧

对

南无月

马黑黑 发表于 2023-5-27 21:45
对

这事不提醒不晓得，后知后觉

红影

南无月 发表于 2023-5-27 21:21
这个图好看，拿来当素材用一下

是啊，用来做飞行器真的很不错的呢

红影

南无月 发表于 2023-5-27 21:22
对路径一无所知，现在刚入门哈，后面应该有的吧

月儿加油，你一定行的