《纸船》学习黑黑css-doodle代码

红影

:doodle { @grid: 2 / 600px 100px; color: var(--color); bottom: 24px; z-index: 100; --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: LightPink; } /* 时间信息 : 左 */ @nth(1) { @place: 15% 100%; :after { content: var(--ttmsg1); } } /* 控制器 */ @nth(2) { @size: 60px; @shape: windmill; @place: 50% 35%; background: var(--color); animation: rot 6s infinite linear var(--state); } /* 时间信息 : 右 */ @nth(3) { @place: 85% 100%; :after { content: var(--ttmsg2); } } /* 进度条 */ @nth(4) { @place: 50% 80%; @size: 100% 2px; background: snow; display: grid; place-items: center start; :before { content: ''; width: var(--prog); height: 100%; background: var(--color); } } @keyframes rot { to { transform: rotate(1turn); } } :doodle { @size: auto 4em; top: 20px; --geci: "花潮lrc在线"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: snow; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: LightPink; /* 同步歌词颜色 */ 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%; } } :doodle { @size: 1024px 640px; --state:paused; } position: absolute; left: @r(-105)%; top: 10%; :after { position: absolute; content: '@p(♪,¶,♫,♯,♭,♮,♩,♬,☺,❀)'; color:LightSkyBlue; font-size: @r(8, 30)px; } animation: fall 40s @r(-6, 36)s infinite var(--state); @keyframes fall { from { transform: rotate(0deg) translate(0px); } to { transform: rotate(@r(-60,60)deg) translate(1500px); } }

红影

也跟着学做个，为了做帖子，论坛的提醒都没来得及回复。
感谢@马黑黑  的代码

红影

同时也感谢@亦是金  和@起个网名好难  两位老师，帖子里也借鉴了你们的代码

小辣椒

亲爱的做的好美

小辣椒

我今天没有电脑，争取明天学习做一次

马黑黑

有创意，色彩运用的也很好

起个网名好难

你这更高级，完全是css-doodle代码了， 大赞！

亦是金

问好红影，欣赏你的美帖，歌曲，背景，动画协调！收藏欣赏学习了！

红影

小辣椒 发表于 2023-5-12 22:08
亲爱的做的好美

亲爱的，你这个回复得真快，发出来没多久你就回复了

红影

小辣椒 发表于 2023-5-12 22:09
我今天没有电脑，争取明天学习做一次

嗯，这个黑黑的最新代码还是很有趣的。

红影

马黑黑 发表于 2023-5-12 22:18
有创意，色彩运用的也很好

我把那个进度条也拉长了一点。颜色也懒得配了，就都取一样的了

马黑黑

红影 发表于 2023-5-12 22:52
我把那个进度条也拉长了一点。颜色也懒得配了，就都取一样的了

效果挺好的

红影

起个网名好难 发表于 2023-5-12 22:47
你这更高级，完全是css-doodle代码了， 大赞！

把您的那个最新制作的帖子也取了一段放进帖子了，谢谢难难

红影

亦是金 发表于 2023-5-12 22:48
问好红影，欣赏你的美帖，歌曲，背景，动画协调！收藏欣赏学习了！

谢谢亦是金，学了你的横向飘飞的花朵。感谢你的代码

起个网名好难

红影 发表于 2023-5-12 22:52
把您的那个最新制作的帖子也取了一段放进帖子了，谢谢难难

三个css-doodle段 按 fFloat、lrc、mplayer 的顺序就用不着设置  z-index: 100;

千羽

影儿，我今晚看图都很困难啊， 看黑黑老师的也是这样的

千羽

回帖也是很卡

小文

太厉害了，又美又漂亮，不知道说什么好啦，哈哈！

亦是金

红影 发表于 2023-5-12 22:53
谢谢亦是金，学了你的横向飘飞的花朵。感谢你的代码

@红影  问好红影！我没有原创的代码。横向飘飞的花朵是应用了朵拉\芙蓉雨帖子的代码，我只是调整了飞花起点位置而已！