劝君更尽一杯酒（学习黑黑镂空效果）

红影

:doodle { @size: 1024px 640px; display: block; opacity: .95; position: absolute; z-index: 1; --geci: 'HUACHAO'; --motion: cover2; --ww: 300px; --prog: 0; --tt: 1s; --tt1: '00:00'; --tt2: '00:00'; --xplace: 69%; --yplace: 94%; --color: Gold; --state: paused; } position: absolute; @nth(1) { /* 歌词 */ @size: auto 3em; @place: 69% 76%; transform: translate(-50%); display: grid; place-items: center start; :before, :after { content: var(--geci); width: fit-content; height: fit-content; font: bold 1.8em Sans-serif; color: #ccc; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; white-space: pre; width: 0; color: Gold; overflow: hidden; animation: var(--motion) var(--tt) linear forwards var(--state); } } @nth(2) { /* 进度条 */ @size: var(--ww) 2px; @place: var(--xplace) calc(var(--yplace) - 10px); 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) - 52px); cursor: pointer; animation: rot 6s infinite linear var(--state); :after { content: ''; @size: inherit; @shape: clover 4; background-color: Navy; background-image: radial-gradient(red, Yellow, green); } } @nth(4) { /* 播放时间 */ @size: var(--ww) 20px; @place: var(--xplace) calc(var(--yplace) - 30px); :before, :after{ position: absolute; width: 100%; height: 100%; color: var(--color); } :before { content: var(--tt1); } :after { content: var(--tt2); text-align: right; } } @keyframes cover1 { from { width: 0; } to { width: 100%; } } @keyframes cover2 { from { width: 0; } to { width: 100%; } } @keyframes rot { to { transform: rotate(360deg); } }

红影

把那个镂空四边形再多加4点，让它们往里面再进来点。总是复制的不好意思了，自己也学着挖个

千羽

这个小巧精致的播放器好漂亮，影儿好像再加工过了

红影

把原图截了一块，作为镂空的背景。有镂空的遮挡，可以让倒酒动作不那么突兀。

千羽

镂空效果上也加了冲茶的图案，好厉害啊

红影

又去复习了一下文字变大的效果，因为歌曲前奏太短，加歌名替换太快，索性用个变化的文字放旁边。
其他的动态都能按下暂停时停下来，就那个复习的文字，不知道怎么让它停下来

红影

对了，倒酒动态也没停，这个就不用停了，酒不能断，还得继续喝呢

千羽

红影 发表于 2023-6-18 14:42
把原图截了一块，作为镂空的背景。有镂空的遮挡，可以让倒酒动作不那么突兀。

哈哈，俺看成是冲茶了

千羽

好不简单啊，影儿棒棒哒

小辣椒

亲爱的，这个效果太漂亮了

梦油

你这是一个永远到不满的魔杯

樵歌

各种技术综合运用，有创新！和南无月学霸有得一拼！

小文

恩师太厉害了，真了不起！

岩新新

欣赏精彩制作！

红影

千羽 发表于 2023-6-18 14:41
这个小巧精致的播放器好漂亮，影儿好像再加工过了

羽儿回复得那么快啊，播放器没变，就是加了个径向渐变的色彩而已

红影

千羽 发表于 2023-6-18 14:43
镂空效果上也加了冲茶的图案，好厉害啊

在背后加了个动态图片，这样好玩点

红影

千羽 发表于 2023-6-18 14:45
哈哈，俺看成是冲茶了

没事啊，应该是冲茶呢，这个帖子想要个倒酒的，就把它硬当作是酒了

红影

千羽 发表于 2023-6-18 14:45
好不简单啊，影儿棒棒哒

这个也挺简单的。谢谢羽儿鼓励，谬赞了

红影

小辣椒 发表于 2023-6-18 14:56
亲爱的，这个效果太漂亮了

亲爱的，我就做了个镂空效果，挺简单的啊

红影

梦油 发表于 2023-6-18 16:07
你这是一个永远到不满的魔杯

哈哈，那个动图就是这样的