云菲菲 - 殇雪 学习套用一个TO：红影

小辣椒

:doodle { @grid: 2 / 800px 100px; color: var(--color); bottom: 20px; z-index: 100; --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: RoyalBlue; } /* 时间信息 : 左 */ @nth(1) { @place: 5% 140%; :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: 95% 140%; :after { content: var(--ttmsg2); } } /* 进度条 */ @nth(4) { @place: 50% 80%; @size: 100% 2px; background: Silver; 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: 80px; --geci: "花潮lrc在线"; --motion: cover2; --tt: 1s; } /* 单元格两个伪元素显示lrc歌词 */ display: grid; place-items: center start; :before, :after { content: var(--geci); color: snow; /* 歌词底色 */ font: bold 2.4em sans-serif; text-shadow: 1px 1px 1px #000; white-space: pre; } :after { position: absolute; width: 0; color: RoyalBlue; /* 同步歌词颜色 */ 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: 1278px 644px; --state:paused; } position: absolute; left: @r(-105)%; top: 10%; :after { position: absolute; content: '@p(❄,❄,❄,❄,❄,❄,❄,❄,❄,❄,❄,❄,❄,❄,❄,❄)'; color:AliceBlue; 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); } }

小辣椒

@马黑黑

谢谢黑黑的源码分享，今天测试了一下，把js上传在自己空间，结果刚才发同学群都说可以看见了
估计你的用的人多打开会稍微慢一点

小辣椒

@红影

亲爱的~~套用你的，但不能完全照搬吧，稍微改了一下，眼睛还是不行，基本用一只眼睛操作的，看起来暂时得悠着点了
前面做的图图，现成的歌词同步，就简单套用一个了

小辣椒

@亦是金 @起个网名好难 谢谢二位，我也是看了你们的代码。运用了一个小动图代码

起个网名好难

小辣椒 发表于 2023-5-13 19:53
@亦是金 @起个网名好难 谢谢二位，我也是看了你们的代码。运用了一个小动图代码

都是来这里学习的，用不着客气

起个网名好难

欣赏学习！

亦是金

小辣椒 发表于 2023-5-13 19:53
@亦是金 @起个网名好难 谢谢二位，我也是看了你们的代码。运用了一个小动图代码

问好小辣椒！挺担心你的眼睛的，悠着点吧！身体是自己的！！！我没有自己的代码，都是源于马黑黑老师的代码，这是改动几个数据而已！

亦是金

欣赏学习了！

红影

亲爱的那么大的动图，漂亮。雪花也用得漂亮，这个帖子太美了

红影

小辣椒 发表于 2023-5-13 19:50
@红影

亲爱的~~套用你的，但不能完全照搬吧，稍微改了一下，眼睛还是不行，基本用一只眼睛操作的，看起 ...

你这个全换成雪花了，底图尤其漂亮，那些雪中的树都带动态的，还有个可爱的小雪人。这个帖子很棒

梦缘

欣赏老师的分享，好听！

梦油

看啊，每一片雪花都轻柔地盘旋着落下，成了大地上一层雪的一小部分，每一片雪花又汇成了让大地银装素裹的美景。套用如此之妙，俺给一个大大的赞！

千羽

一片清凉世界，好美的雪景

千羽

抖动的树枝，飘散的雪花看着好美，播放器也漂亮

千羽

音乐也好听。小辣椒棒棒哒

焱鑫磊

欣赏小辣椒佳作！

罗浮梦

好看，好听。

马黑黑

小辣椒 发表于 2023-5-13 19:47
@马黑黑

谢谢黑黑的源码分享，今天测试了一下，把js上传在自己空间，结果刚才发同学群都说可以看见了{: ...

昨天起我也发现，unpkg.com 打不开。看样子资源文件还是要放在无障碍访问的地盘

马黑黑

帖子很漂亮。注意用眼卫生。