帽子边缘的蝴蝶（学习黑师《外婆桥》路径作业之六自由乱飞）

南无月

:doodle { @size: 1024px 768px; background: url('https://s1.ax1x.com/2023/06/24/pCtXsTP.jpg'); box-shadow: 0 0 8px #000; position: relative; margin: 0 0 0 calc(50% - 593px); --geci: 'HUACHAO'; --motion: cover2; --ww: 300px; --prog: 0; --tt: 1s; --tt1: '00:00'; --tt2: '00:00'; --xplace: 50%; --yplace: 95%; --color: orange; --state: paused;}@nth(1) { @size: auto 3em; @place: 50% 5%; transform: translate(-50%); display: grid; place-items: center start; :before, :after { content: var(--geci); width: fit-content; height: fit-content; font: bold 2em Sans-serif; color: #ccc; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; white-space: pre; width: 0; color: orange; overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); }}@nth(2) { @size: var(--ww) 2px; @place: var(--xplace) var(--yplace); background: silver; :before, :after { content: ''; } :before { position: absolute; left: 0; width: var(--prog); height: 100%; background: var(--color); } :after { width: 100%; height: 10px; cursor: pointer; }}@nth(3) { @size: 60px; @place: var(--xplace) calc(var(--yplace) - 36px); cursor: pointer; animation: rot 6s infinite linear var(--state); :after { content: ''; @size: inherit; @shape: clover 4; background: var(--color); }}@nth(4) { @size: var(--ww) 20px; @place: var(--xplace) calc(var(--yplace) - 20px); :before, :after { position: absolute; width: 100%; height: 100%; color: var(--color); } :before { content: var(--tt1); } :after { content: var(--tt2); text-align: right; }}@nth(5) { @size: 200px 113px; background: url('https://638183.freep.cn/638183/Pic/2022/btf.gif'); offset-path: path('m213.5,575.6l-20.5,2.4l-25,4l-39,1l-22,-7l-18,-8l-11,-14l-7,-18c0.5,0.6 -3.5,-20.4 -3.5,-22.4c0,-2 -1,-24 0,-27c1,-3 9,-23 8.5,-23.6c0.5,0.6 15.5,-19.4 15,-20c0.5,0.6 16.5,-16.4 16,-17c0.5,0.6 15.5,-10.4 15,-11c0.5,0.6 16.5,-12.4 16,-13c0.5,0.6 31.5,0.6 31,0c0.5,0.6 15.5,0.6 16.5,0.6c1,0 31,0 30.5,-0.6c0.5,0.6 35.5,7.6 35,7c0.5,0.6 47.5,12.6 47,12c0.5,0.6 30.5,0.6 30,0c0.5,0.6 20.5,-0.4 20,-1c0.5,0.6 33.5,-10.4 33,-11c0.5,0.6 31.5,-10.4 31,-11c0.5,0.6 15.5,-21.4 15,-22c0.5,0.6 23.5,-8.4 23,-9c0.5,0.6 16.5,-16.4 16.5,-18.4c0,-2 8,-24 8,-24c0,0 15,-15 17,-16c2,-1 14,-16 15,-18c1,-2 11,-20 13,-22c2,-2 13,-15 16,-17c3,-2 22,-30 21.5,-30.6c0.5,0.6 21.5,-12.4 21,-13c0.5,0.6 18.5,-19.4 19.5,-19.4c1,0 19,-11 18.5,-11.6c0.5,0.6 16.5,-9.4 16,-10c0.5,0.6 26.5,-2.4 26.5,-2.4c0,0 12,-2 11.5,-2.6c0.5,0.6 15.5,3.6 15,3c0.5,0.6 11.5,10.6 11,10c0.5,0.6 7.5,20.6 7,20c0.5,0.6 0.5,25.6 0,25c0.5,0.6 -8.5,36.6 -9,36c0.5,0.6 -11.5,36.6 -12,36c0.5,0.6 -23.5,24.6 -24,24c0.5,0.6 -24.5,25.6 -25.5,25.6c-1,0 -37,11 -37.5,10.4c0.5,0.6 -30.5,11.6 -31,11c0.5,0.6 -27.5,5.6 -32.5,7.6c-5,2 -38,11 -39,11c-1,0 -22,3 -22.5,2.4c0.5,0.6 -9.5,3.6 -10,3'); offset-distance: 0%; animation: fly 40s infinite alternate var(--state);}@keyframes cover1 { from { width: 0; } to { width: 100%; }}@keyframes cover2 { from { width: 0; } to { width: 100%; }}@keyframes rot { to { transform: rotate(360deg); }}@keyframes fly { to { offset-distance: 100%; }}

红影

月儿给了蝴蝶一个曲线的路径呢，漂亮

红影

这美女的帽檐很宽大，正好适合月儿在上面做文章呢

南无月

红影 发表于 2023-6-25 21:08
这美女的帽檐很宽大，正好适合月儿在上面做文章呢

大点好做大概的路径，精细的就不成了

南无月

红影 发表于 2023-6-25 21:06
月儿给了蝴蝶一个曲线的路径呢，漂亮

练习作业，正尝试中

南无月

醉美水芙蓉 发表于 2023-6-25 18:21
这个图图美美哒！

巧了，我也这么觉得

红影

南无月 发表于 2023-6-25 22:18
大点好做大概的路径，精细的就不成了

主要那蝴蝶的动图范围很大，如果是小点点就会在路径上非常清楚。

红影

南无月 发表于 2023-6-25 22:19
练习作业，正尝试中

尝试的非常成功。

马黑黑

如果是蜜蜂，菇凉会吓跑滴

樵歌

如果把那美女换成无盐，那对蝶儿还会绕着帽沿飞吗

南无月

红影 发表于 2023-6-25 23:48
主要那蝴蝶的动图范围很大，如果是小点点就会在路径上非常清楚。

需要不断尝试

南无月

红影 发表于 2023-6-25 23:49
尝试的非常成功。

影子鼓励了，我加油

南无月

马黑黑 发表于 2023-6-25 23:50
如果是蜜蜂，菇凉会吓跑滴

你这个建议菇凉紧张的很

南无月

樵歌 发表于 2023-6-26 07:15
如果把那美女换成无盐，那对蝶儿还会绕着帽沿飞吗

无盐内秀更难能可贵，会的吧

辫子哥哥

南无月

辫子哥哥 发表于 2023-6-26 20:40

感谢临贴回复

梦缘

欣赏精彩佳作，谢谢分享，点赞！

马黑黑

南无月 发表于 2023-6-26 20:30
你这个建议菇凉紧张的很

蜜蜂是人类的好朋友

南无月

梦缘 发表于 2023-6-26 20:49
欣赏精彩佳作，谢谢分享，点赞！

谢谢梦缘鼓励支持哦