她自身

马黑黑

冬天的雨 发表于 2023-3-19 19:42
可惜冬雨不才，游手好闲浪荡子，做不出好东西了

这个看兴趣来，有兴趣了做一做就好

马黑黑

红影 发表于 2023-3-19 19:47
歌词很奇特。和画面制作也很相符。黑黑好帖

冬雨 @冬天的雨 说想要评为5星精华，可他只有两颗星。要不，你在给他加三颗星呗

樵歌

她自己，怎么搞的嘛，都爬不起来了吗。
看了好多播放器，觉得这个顺眼，放的位置也不喧宾夺主。

马黑黑

樵歌 发表于 2023-3-19 20:00
她自己，怎么搞的嘛，都爬不起来了吗。
看了好多播放器，觉得这个顺眼，放的位置也不喧宾夺主。

嗯，这歌挺好，不抢菇凉的位置

樵歌

马黑黑 发表于 2023-3-19 20:15
嗯，这歌挺好，不抢菇凉的位置

你也是的，好好的菇凉，让人家躺地上，不冷吗

马黑黑

樵歌 发表于 2023-3-19 20:56
你也是的，好好的菇凉，让人家躺地上，不冷吗

这个时节不冷

绿叶清舟

也喝醉了吗

马黑黑

绿叶清舟 发表于 2023-3-19 21:12
也喝醉了吗

她自身午夜醉

红影

马黑黑 发表于 2023-3-19 19:46
这是很常见的做法。长条形图片其实是一组“动图”的描述，像蒙太奇一样，由一帧一帧的静图构成。然后，我 ...

这个做法还是头一次看到呢，那到底是怎样让它变成现在的样子呢，黑黑详细讲讲呗

红影

马黑黑 发表于 2023-3-19 19:49
冬雨 @冬天的雨 说想要评为5星精华，可他只有两颗星。要不，你在给他加三颗星呗

好啊，我去多加两个星星去

马黑黑

红影 发表于 2023-3-19 21:26
好啊，我去多加两个星星去

小辣椒

这颗小红星的png换一个还是不行，都不会做，奇怪2900的长条居然出来一个闪动的小红心

小辣椒

马黑黑 发表于 2023-3-19 19:46
这是很常见的做法。长条形图片其实是一组“动图”的描述，像蒙太奇一样，由一帧一帧的静图构成。然后，我 ...

黑黑这个制作有点难度的

马黑黑

红影 发表于 2023-3-19 21:25
这个做法还是头一次看到呢，那到底是怎样让它变成现在的样子呢，黑黑详细讲讲呗

关键帧动画驱动背景，就这么简单：
#papa::before {
        position: absolute;
        content: '';
        width: 100px;
        height: 100px;
        background: url('https://638183.freep.cn/638183/t23/1/heart_133236768103332344.png') 0 0 no-repeat;
        background-size: 2900%;
        animation: chgBg steps(28) 2s infinite both;
        animation-play-state: var(--state);
}
@keyframes chgBg {
        0% { background-position: 0%; }
        100% { background-position: 100%; }
}


设置好背景为长条图片。background-size 为 2900% 是依据图片宽度2900px而来。关键帧动画 chgBg 改变背景图片的位置，从 0% 到 100% 变化；而 animation 属性将动画分 28步（steps）走，因为动画开始时就在第一步（即第一个 100px），走到第28步时正好在2800px - 2900px 这一帧。

马黑黑

小辣椒 发表于 2023-3-19 21:40
黑黑这个制作有点难度的

图片制作可能有难度

马黑黑

小辣椒 发表于 2023-3-19 21:39
这颗小红星的png换一个还是不行，都不会做，奇怪2900的长条居然出来一个闪动的小红心

CSS动画设计依据图片的特征来，不能简单换图了事

小辣椒

马黑黑 发表于 2023-3-19 21:44
CSS动画设计依据图片的特征来，不能简单换图了事

这个图还真换不了。这种图我第一次看见的

小辣椒

马黑黑 发表于 2023-3-19 21:43
图片制作可能有难度

这个难度有点大的

千羽

这图通透，漂亮

千羽

左上角的小动图很亮眼，美美哒