【作业贴】雨中荷塘（学习黑师《夜雨》CSS-DOODLE雨丝&歌词效果）
本帖最后由 南无月 于 2023-5-15 20:45 编辑 <br /><br /> <style>#papa {margin:0 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: tan url('https://s1.ax1x.com/2023/05/15/p9gXhR0.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 grid="30" id="mplayer"> :doodle { @size: 1024px 640px; box-shadow: 0 0 8px #000; position: relative; z-index: 1; } @match(i ≤ @size - 2) { @size: @r(1,2)px @r(10,60)px; @place: @r(0,1024)px -100px; background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.3)); animation: fall @r(.5,1.5)s @r(-4,0)s infinite linear var(--state); } @nth(@size - 1, @size) { @size: 100px; @place: 248px 400px; clip-path: @shape(fill: evenodd;points: 300;scale: .45;x: cos(2t) + cos(π - 7t);y: sin(2t) + sin(7t); ); background: Lavender; cursor: pointer; animation: rot 4s infinite linear var(--state); } @nth(@size) { @place: 500px 340px; } @keyframes fall { to { transform: translateY(783px); } } @keyframes rot { to { transform: rotate(360deg); } } </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: LightGrey; /* 歌词底色 */ font: bold 2em sans-serif; text-shadow: 1px 1px 2px #000; white-space: pre; } :after { position: absolute; width: 0; color: DarkSeaGreen; /* 同步歌词颜色 */ 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=5235635" 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>
看看评份啥的正常不 雨丝没出来？ 出来了啊。。评完又不出来了？ 马黑黑 发表于 2023-5-15 20:19
雨丝没出来？
有个试贴的删了吧{:4_173:} 欣赏佳作，晚上好！ 起个网名好难 发表于 2023-5-15 20:38
欣赏佳作，晚上好！
谢谢临贴支持，晚上好{:4_187:} 南无月 发表于 2023-5-15 20:34
有个试贴的删了吧
额？ 这个做的漂亮，也是有2个播放器呢，还有漂亮的雨丝。月儿做的真快{:4_199:} 真美的帖，欣赏点赞！{:4_187:} 马黑黑 发表于 2023-5-15 20:49
额？
刚才又开了个贴子试代码，现在好象已经没了 红影 发表于 2023-5-15 20:51
这个做的漂亮，也是有2个播放器呢，还有漂亮的雨丝。月儿做的真快
{:4_187:}谢谢影子鼓励 醉美水芙蓉 发表于 2023-5-15 21:31
速度呀！漂亮！
{:4_199:}你来了，太好了，谢谢水芙蓉 梦缘 发表于 2023-5-15 21:55
真美的帖，欣赏点赞！
谢谢梦缘哦，晚上好 南无月 发表于 2023-5-15 22:21
谢谢影子鼓励
抱抱月儿，太棒了，你学得那么快的{:4_179:} 红影 发表于 2023-5-15 22:31
抱抱月儿，太棒了，你学得那么快的
亲，这就是抄作业，你知道的。。。{:4_173:} 南无月 发表于 2023-5-15 22:20
刚才又开了个贴子试代码，现在好象已经没了
额 漂亮！欣赏学习了！{:4_190:} 很美丽
页:
[1]
2