做不到的承诺就不要对我说 （套用学习黑黑路径效果）

小辣椒

:doodle { @size: 100%; box-shadow: 20px auto; --ww: 250px; --prog: 0; --tt1: '00:00'; --tt2: '00:00'; --xplace: 80%; --yplace: 82%; --color: LimeGreen; } 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: 32px 32px; @place: 260px 260px; background: url('https://xlaj.cn/assets/file/zp/20230714212357.jpg'); offset-path: path('M300 120 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: 25%; top: 8%; 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 2.4em Sans-serif; color: #fff; text-shadow: 1px 1px 1px #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-7-14 21:51
小辣椒在图里加了很多的漂亮元素，俺的眼睛都有点不够用了

千羽这个图图也是岁月以前的AE制作，我加了点效果进去

小辣椒

千羽 发表于 2023-7-14 21:53
精美的制作，美美哒，很喜欢那个播放器，

千羽我现在作业很少做的，都脱下许多作业了

小辣椒

千羽 发表于 2023-7-14 21:54
音乐也很好听，小辣椒棒棒哒

这歌曲昨天听到就喜欢了，今天做了上去，是新歌

小辣椒

红影 发表于 2023-7-14 21:55
这么多动态元素，好漂亮啊。那绕着女孩的泡泡也很灵动。欣赏亲爱的漂亮的制作

亲爱的，路径我一直不会做，这个套用月月的，但还是不够圆，人物外面转的是路径制作，窗框小雨点是动图上的

小辣椒

千羽 发表于 2023-7-14 21:53
精美的制作，美美哒，很喜欢那个播放器，

千羽你看见歌词同步出来吗？

冬天的雨

换了个浏览器上来的，有歌词同步的

冬天的雨

小辣椒 发表于 2023-7-14 22:16
千羽你看见歌词同步出来吗？

有的，有歌词同步的

风中飞尘

没有歌词

小辣椒

风中飞尘 发表于 2023-7-14 22:31
没有歌词

你太丑的原因

樵歌

又是各种技术的综合应用，相当不错的效果！辛苦了。

马黑黑

小辣椒 发表于 2023-7-14 21:36
@马黑黑

黑黑~路径小辣椒是脱下了，一下子不会了，只能瞎捣鼓了

鼓捣一下有体会