夏意未满（学习黑师《寻》路径效果）

南无月

:doodle { @size: 1024px 640px; background: url('') no-repeat center/cover; box-shadow: 0 0 6px #000; position: relative; z-index: 1; } @size: 100px; clip-path: @shape( fill: evenodd; points: 400; x: cos(2t) * cos(5t) * sin(t); y: sin(2t) * sin(4t) * cos(5t); rotate: 90; ); position: absolute; background: rgb(@m3(@r(255))); offset-path: path('M212 180a300 120 0 1 0 600 0a300 120 0 1 0 -600 0z'); animation: move 40s infinite linear var(--state); cursor: pointer; @keyframes move { to { offset-distance: 100%; } } :doodle { @size: 620px 240px; right: 200px; bottom: 60px; cursor: pointer; z-index: 3; } @size: 50px; @place: calc(@col * 40px - 20px) calc(@row * 40px - 20px); font: normal 30px / 40px sans-serif; color:Orange; text-shadow: 1px 1px 2px #000; opacity: 0; :before { content: @pn([《咏二十四气诗·小满四月中》‍‍‍‍【唐】元稹‍‍‍‍‍‍小满气全时，如何靡草衰。‍‍田家私黍稷，方伯问蚕丝。‍‍杏麦修镰釤，錋瓜竖棘篱。‍‍向来看苦菜，独秀也何為？‍‍‍]); } animation: show .3s calc((@i - 1) * .3s) linear forwards var(--state); @keyframes show { to { opacity: 1; } } :doodle { @size: auto 4em; top: 10px; --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: DarkSeaGreen; /* 同步歌词颜色 */ 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-21 18:08
欣赏月儿漂亮音画！

水芙蓉来了，谢谢你支持哦

红影

月儿这个好，把飞行器换成了小蝴蝶，特别适合这个帖子的背景和主题呢

梦缘

好漂亮的音画，欣赏问好！

红影

这个里面不但有最新效果，还有诗词逐字输入和歌词同步，月儿太棒了

红影

这视频的动态和播放器的移动速度也差不多呢，调整得非常好

马黑黑

蝴蝶的飞翔姿势很特别

马黑黑

小满小满，交杯换盏

南无月

红影 发表于 2023-5-21 19:55
月儿这个好，把飞行器换成了小蝴蝶，特别适合这个帖子的背景和主题呢

小蝴蝶适合大自然

南无月

梦缘 发表于 2023-5-21 19:56
好漂亮的音画，欣赏问好！

谢谢梦缘支持鼓励

南无月

红影 发表于 2023-5-21 19:59
这个里面不但有最新效果，还有诗词逐字输入和歌词同步，月儿太棒了

练习作业，看看能否叠在一起

南无月

红影 发表于 2023-5-21 20:00
这视频的动态和播放器的移动速度也差不多呢，调整得非常好

这个没调，碰巧一致

南无月

马黑黑 发表于 2023-5-22 13:05
蝴蝶的飞翔姿势很特别

愣头愣脑的蝴蝶飞得不错吧。。。。瞧这乐呵的。。
用老师教得方法改好了，改好了

南无月

马黑黑 发表于 2023-5-22 13:05
小满小满，交杯换盏

听起来很押韵，得喝一杯

马黑黑

南无月 发表于 2023-5-22 17:54
听起来很押韵，得喝一杯

这是呼叫 @小满 的节奏

马黑黑

南无月 发表于 2023-5-22 17:53
愣头愣脑的蝴蝶飞得不错吧。。。。瞧这乐呵的。。
用老师教得方法改好了，改好了

以后就记住一个问题：凡使用 offset-path 的，元素如果有头尾，则应是水平朝向的。

你可以用图片沿 offset-path 运行，试试朝向问题

南无月

马黑黑 发表于 2023-5-22 18:07
这是呼叫 @小满 的节奏

小满好久不见，早该喊来喝酒

南无月

马黑黑 发表于 2023-5-22 18:09
以后就记住一个问题：凡使用 offset-path 的，元素如果有头尾，则应是水平朝向的。

你可以用图片沿 of ...

好的，我得记个笔记， 不然以后还得翻 贴

马黑黑

南无月 发表于 2023-5-22 18:13
好的，我得记个笔记， 不然以后还得翻 贴

学东西，尽可能记在心里，心里才是最好的笔记