冬天的雨 发表于 2023-3-19 19:42
可惜冬雨不才，游手好闲浪荡子，做不出好东西了
这个看兴趣来，有兴趣了做一做就好
红影 发表于 2023-3-19 19:47
歌词很奇特。和画面制作也很相符。黑黑好帖
冬雨 @冬天的雨 说想要评为5星精华，可他只有两颗星。要不，你在给他加三颗星呗{:4_170:}
她自己，怎么搞的嘛，都爬不起来了吗。{:4_173:}
看了好多播放器，觉得这个顺眼，放的位置也不喧宾夺主。
樵歌 发表于 2023-3-19 20:00
她自己，怎么搞的嘛，都爬不起来了吗。
看了好多播放器，觉得这个顺眼，放的位置也不喧宾夺主。
嗯，这歌挺好，不抢菇凉的位置{:4_170:}
马黑黑 发表于 2023-3-19 20:15
嗯，这歌挺好，不抢菇凉的位置
你也是的，好好的菇凉，让人家躺地上，不冷吗{:4_189:}
樵歌 发表于 2023-3-19 20:56
你也是的，好好的菇凉，让人家躺地上，不冷吗
这个时节不冷
也喝醉了吗{:4_189:}
绿叶清舟 发表于 2023-3-19 21:12
也喝醉了吗
她自身午夜醉
马黑黑 发表于 2023-3-19 19:46
这是很常见的做法。长条形图片其实是一组“动图”的描述，像蒙太奇一样，由一帧一帧的静图构成。然后，我 ...
这个做法还是头一次看到呢，那到底是怎样让它变成现在的样子呢，黑黑详细讲讲呗{:4_187:}
马黑黑 发表于 2023-3-19 19:49
冬雨 @冬天的雨 说想要评为5星精华，可他只有两颗星。要不，你在给他加三颗星呗
好啊，我去多加两个星星去{:4_187:}
红影 发表于 2023-3-19 21:26
好啊，我去多加两个星星去
{:4_189:}
这颗小红星的png换一个还是不行，都不会做，奇怪2900的长条居然出来一个闪动的小红心{:4_178:}
马黑黑 发表于 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
图片制作可能有难度
这个难度有点大的
这图通透，漂亮{:4_187:}
左上角的小动图很亮眼，美美哒{:4_187:}