【作业贴】如果（学习黑师《母亲》CSS-DOODLE加歌词效果）
本帖最后由 南无月 于 2023-5-14 14:34 编辑 <br /><br /> <style>#papa {margin: -80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: tan url('https://s1.ax1x.com/2023/05/14/p9cwLBn.jpg');box-shadow: 0 0 8px #000;display: grid;place-items: center;position: relative;--state: paused;}
css-doodle{position: absolute;}
</style>
<div id="papa">
<css-doodle id="mplayer">
:doodle {
@grid: 4 / 1024px 640px;
z-index: 1;
}
@size: @r(40,100)px;
@place: @r(5,90)% @r(5,20)%;
background: rgba(@m3(@r(255)), @r(.6,.9));
clip-path: @shape(
fill: evenodd;
points: 400;
x: cos(5t)^2 * sin(t);
y: sin(2t)^2 * cos(5t);
);
@nth(@size) {
@size: 160px;
@place: center;
cursor: pointer;
}
animation: rot @r(3,9)s infinite linear var(--state);
@keyframes rot {to {transform: rotate(@p(-360,360)deg); } }
</css-doodle>
<css-doodle id="lrc">
:doodle {
@size: auto 4em;
bottom: 10px;
--geci: "css-doodle player"; --motion: cover2; --tt: 1s;
}
/* 单元格两个伪元素显示lrc歌词 */
display: grid;
place-items: center start;
:before, :after {
content: var(--geci);
color: gray; /* 歌词底色 */
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
white-space: pre;
}
:after {
position: absolute;
width: 0;
color: darkgreen; /* 同步歌词颜色 */
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%; } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=259625" autoplay loop></audio></div>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let slip = 0.5, mFlag = true, mKey = 0, clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let lrcAr = [ ,
,
,
,
,
,
,
, ,
,
,
,
,
,
,
,
,
, ,
,
,
];
let calcKey = () => {for (j = 0;j < lrcAr.length;j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {lrc.style.setProperty('--motion', mFlag ? 'cover1' : 'cover2');lrc.style.setProperty('--geci', '"' + lrcAr + '"');lrc.style.setProperty('--tt', time + 's');mKey += 1;mFlag = !mFlag;};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime - slip >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`);});
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
换了一个蝴蝶图案，放在星空上，和背景上空的小蝴蝶呼应
歌曲是昨天看向往的生活，里面的人唱的歌，觉得好听就搜来做了一个同步，今天做贴顺手拿来用用。 欣赏佳作，下午好！ 欣赏佳作 这个厉害了，我连花朵的图案都没弄明白，月儿已经可以换蝴蝶图案了{:4_199:} 欣赏老师的精彩分享，很好看！{:4_187:} 看见到有条狗狗。袁川大佬的示例里也有狗狗，不过没有图中的灵动 起个网名好难 发表于 2023-5-14 15:41
欣赏佳作，下午好！
下午好{:4_187:} 小文 发表于 2023-5-14 16:44
欣赏佳作
问好小文{:4_187:} 红影 发表于 2023-5-14 16:51
这个厉害了，我连花朵的图案都没弄明白，月儿已经可以换蝴蝶图案了
老师提供的CSS网里搜到的代码，自己不会写的{:4_170:} 醉美水芙蓉 发表于 2023-5-14 17:22
厉害呀！把黑黑老师的图案都换了！漂亮！
大佬的图案代码，拿来一用。水芙蓉好{:4_187:} 醉美水芙蓉 发表于 2023-5-14 17:23
看来朋友对代码很熟悉！
不咋滴，跟大家一样正在学习中。。 梦缘 发表于 2023-5-14 17:45
欣赏老师的精彩分享，很好看！
谢谢梦缘支持鼓励{:4_187:} 马黑黑 发表于 2023-5-14 18:06
看见到有条狗狗。袁川大佬的示例里也有狗狗，不过没有图中的灵动
{:4_173:}那小狗狗看上去象中猫。{:4_170:} 马黑黑 发表于 2023-5-14 18:06
看见到有条狗狗。袁川大佬的示例里也有狗狗，不过没有图中的灵动
蝴蝶代码是网上复制来的，是不是袁大佬的就不知道了{:4_170:} 醉美水芙蓉 发表于 2023-5-14 18:56
图片和播放器美美哒！收藏学习了！
如果有用，那最好不过了。。{:4_204:} 南无月 发表于 2023-5-14 18:42
蝴蝶代码是网上复制来的，是不是袁大佬的就不知道了
他的示例里有