冬天的雨 发表于 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:}