走在阳光里 TO红影（学习黑师《鹰》贴子效果）

南无月

:doodle { @size: 100%; box-shadow: 20px auto; --ww: 300px; --prog: 0; --tt1: '00:00'; --tt2: '00:00'; --xplace: 65%; --yplace: 92%; --color: Coral; } position: absolute; @nth(1) { @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: 80%; height: 10px; cursor: pointer; } } @nth(2) { @size: var(--ww) 20px; @place: var(--xplace) calc(var(--yplace) - 20px); :before, :after{ position: absolute; width: 80%; height: 100%; color: var(--color); } :before { content: var(--tt1); } :after { content: var(--tt2); text-align: right; } } @nth(3) { @size: 60px; @place: var(--xplace) calc(var(--yplace) - 36px); cursor: pointer; z-index: 10; animation: rot 6s infinite linear var(--state); :after { content: ''; @size: inherit; clip-path: @shape( fill: evenodd; points: 300; scale: .45; x: cos(2t) + cos(π - 7t); y: sin(2t) + sin(7t); ); background: var(--color); } } @match(i ≥ 4) { @size: 300px 300px; @place: 520px 304px; background: url('https://img.soogif.com/eec7c8e4bca44deba45771d76e759ef0.gif'); offset-path: path('M80 100 a240 160 0 1 0 480 0 a240 160 0 1 0 -480 0z'); animation: fly 18s calc((@size - @i) * -6.5s) infinite linear var(--state); } @keyframes rot { to { transform: rotate(360deg); } } @keyframes fly { to { offset-distance: 100%; }} :doodle { @size: auto 3em; left: 50%; top: 5%; transform: translate(-50%); --geci: 'HUACHAO'; --motion: cover2; --tt: 1s; } 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: SeaGreen; 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-11 12:15
@马黑黑 改作业费神了哈。。

不费神，一眼瞧出来那对中括号。

就是你的代码书写还不够规范，退格逻辑不清晰。

南无月

马黑黑 发表于 2023-6-11 12:22
不费神，一眼瞧出来那对中括号。

就是你的代码书写还不够规范，退格逻辑不清晰。

我顾不上退格。。。。
做个贴子手忙脚乱的，它显出来就松一口气了。。。
下回注意哈。。。

马黑黑

南无月 发表于 2023-6-11 12:24
我顾不上退格。。。。
做个贴子手忙脚乱的，它显出来就松一口气了。。。
下回注意哈。。。

代码的逻辑，靠分行与退格，这个要严格

南无月

马黑黑 发表于 2023-6-11 12:25
代码的逻辑，靠分行与退格，这个要严格

严格的黑老师。。
退格要慢慢点好多下。。
我记住了，书写有退格，代码学得快。。。

马黑黑

南无月 发表于 2023-6-11 12:30
严格的黑老师。。
退格要慢慢点好多下。。
我记住了，书写有退格，代码学得快。。。

退格一般用 Tab键，它默认是4个空格

红影

南无月 发表于 2023-6-11 11:55
@红影
感谢红影昨天的美贴，管管对小会员太厚爱了，辛苦做专贴。。。
感谢红影一直象阳光一样暖着大家~~ ...

这么快就收到回礼，月儿也太敏捷了。别提管理两字，大家都是一样玩的啊。谢谢月儿，咱们一起《走在阳光里》

红影

南无月 发表于 2023-6-11 11:57
技术水平一般般，抄老师的做业，影子不要嫌弃，等以后送你更好的哈。。。

这么多蝴蝶，月儿还把它们设计了飞行的路径，很是缤纷漂亮

梦缘

好看好听，老师的分享好棒！

南无月

马黑黑 发表于 2023-6-11 12:31
退格一般用 Tab键，它默认是4个空格

好的。这个方法好，回头我试试。
之前空格很不容易对齐，老多或者少。。
反正不整齐，索性不管它了。

南无月

醉美水芙蓉 发表于 2023-6-11 14:44
欣赏月儿好作品！很漂亮！

谢谢水芙蓉夸奖

南无月

红影 发表于 2023-6-11 15:55
这么快就收到回礼，月儿也太敏捷了。别提管理两字，大家都是一样玩的啊。谢谢月儿，咱们一起《走在阳光里 ...

好哒，和影子一起开心走哈。。。。

南无月

红影 发表于 2023-6-11 15:58
这么多蝴蝶，月儿还把它们设计了飞行的路径，很是缤纷漂亮

影子一下子看出贴子优劣，是有真功夫

南无月

梦缘 发表于 2023-6-11 17:26
好看好听，老师的分享好棒！

谢谢梦缘临贴支持

樵歌

好多花蝴蝶飞满天空，红影喜欢小动物，这个礼送得正投其所好了。

南无月

樵歌 发表于 2023-6-11 19:16
好多花蝴蝶飞满天空，红影喜欢小动物，这个礼送得正投其所好了。

喜欢小动物一定是个内心柔软的人，影管十分优秀