东篱闲人 发表于 2023-9-20 20:52

【东篱音画】自与诗书结静缘


<style>
      #papa { left: -400px; width: 1400px; height: 800px; background: #ccc url('https://pic.imgdb.cn/item/650ad272c458853aef6f033d.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
      #mplayer { position: absolute; width: 1px; height: 1px; left: 20px; top: 20px; border-radius: 50%; background: conic-gradient(hsla(0,100%,50%,.7),hsla(120,100%,50%,.7),hsla(240,100%,50%,.7),hsla(300,100%,50%,.7)); mask: radial-gradient(transparent 3px,red 0); -webkit-mask: radial-gradient(transparent 3px,red 0); cursor: pointer; animation: rot 4s linear infinite; animation-play-state: paused; }
      #lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 600px; font: bold 1.5em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); } #lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(120,85%,40%,.75),hsla(0,70%,50%,.65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
      @keyframes cover1 { from { width: 0; } to { width: 100%; } }
      @keyframes cover2 { from { width: 0; } to { width: 100%; } }
      @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <img src="/data/attachment/forum/202210/02/075010yyxllzknx5yxfx3o.gif" alt="" style="position: absolute; left: 25px; top: 8px; mix-blend-mode: multiply;" />
      <div id="lrc" data-lrc="自与诗书结静缘">自与诗书结静缘</div>
      <div id="mplayer"></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1437287329.mp3" autoplay= "autoplay"></audio>

<script>
let mKey = 0, mFlag = true;
let lrcAr =[['0.00','自与诗书结静缘'],
        ['1.00','自与诗书结静缘'],
        ['14.73','图意：东篱闲人'],
        ['25.44','赭石与靛蓝 慢把颜色调'],
        ['29.17','提笔 心事 潦草'],
        ['33.41','绘成一幅 春风十里桃夭'],
        ['36.41','谁在 树下 拈花笑'],
        ['41.31','这无边风月 转瞬都暗了'],
        ['45.66','只盼着你的回眸'],
        ['48.93','看那绿罗裙 似漫天芳草'],
        ['53.07','随风飘呀飘'],
        ['55.84','绿罗裙 飘在谁的心潮   吹起一池春水摇'],
        ['63.07','心底事 醒也思醉也思 才知相思如山倒'],
        ['70.74','怎么好 为你已病入膏 等你那一味解药'],
        ['78.08','浮生梦 绿罗裙花影娇 只合与卿老'],
        ['99.36','赭石与靛蓝 慢把颜色调'],
        ['103.02','提笔 心事 潦草'],
        ['107.25','绘成一幅 春风十里桃夭'],
        ['110.38','谁在 树下 拈花笑'],
        ['114.98','这无边风月 转瞬都暗了'],
        ['119.42','只盼着你的回眸'],
        ['122.74','看那绿罗裙 似漫天芳草'],
        ['126.68','随风飘呀飘'],
        ['129.64','绿罗裙 飘在谁的心潮   吹起一池春水摇'],
        ['136.96','心底事 醒也思醉也思 才知相思如山倒'],
        ['144.39','怎么好 为你已病入膏 等你那一味解药'],
        ['151.80','浮生梦 绿罗裙花影娇 只合与卿老'],
        ['159.25','绿罗裙 飘在谁的心潮   吹起一池春水摇'],
        ['166.50','心底事 醒也思醉也思 才知相思如山倒'],
        ['173.84','怎么好 为你已病入膏 等你那一味解药'],
        ['181.29','浮生梦 绿罗裙花影娇 只合与卿老'],
        ['193.35','和声：茶语music'],
        ['196.05','监制：何湲'],
        ['197.18','发行：讯飞音乐]']
]

;

aud.loop = false;
mplayer.onclick = () => {
      aud.paused ? aud.play() : aud.pause();
}
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
let mState = () => aud.paused ? (mplayer.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (mplayer.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};
</script>

红影 发表于 2023-9-20 21:35

这画面好像是书本的封面呢。还有歌词同步。欣赏东篱大哥好帖{:4_199:}

红影 发表于 2023-9-20 21:36

这个好像没有暂停呢，找了半天没找到{:4_173:}

世外桃源 发表于 2023-9-21 12:15

这老人难不成比我还老？不可能不可能

坐看云起 发表于 2023-9-21 15:34

看到美图，还有个小风筝。

东篱闲人 发表于 2023-9-25 21:34

红影 发表于 2023-9-20 21:36
这个好像没有暂停呢，找了半天没找到

{:4_180:}

东篱闲人 发表于 2023-9-25 21:35

世外桃源 发表于 2023-9-21 12:15
这老人难不成比我还老？不可能不可能

不由人不信。。。{:5_117:}

东篱闲人 发表于 2023-9-25 21:35

坐看云起 发表于 2023-9-21 15:34
看到美图，还有个小风筝。

{:4_190:}

红影 发表于 2023-9-26 22:18

东篱闲人 发表于 2023-9-25 21:34


东篱大哥请{:4_180:}

东篱闲人 发表于 2023-9-27 09:57

红影 发表于 2023-9-26 22:18
东篱大哥请

不客气。。{:5_117:}

红影 发表于 2023-9-27 13:54

东篱闲人 发表于 2023-9-27 09:57
不客气。。

没啥好客气的啊，赶紧喝吧{:4_173:}

东篱闲人 发表于 2023-9-27 19:50

红影 发表于 2023-9-27 13:54
没啥好客气的啊，赶紧喝吧

{:4_172:}

红影 发表于 2023-9-27 20:53

东篱闲人 发表于 2023-9-27 19:50


到时间了，请{:4_180:}

东篱闲人 发表于 2023-9-27 21:40

红影 发表于 2023-9-27 20:53
到时间了，请

{:4_180:}

红影 发表于 2023-9-27 21:52

东篱闲人 发表于 2023-9-27 21:40


哈哈，看起来全都要灌一肚子水才可以下啊{:4_189:}

东篱闲人 发表于 2023-9-28 09:39

红影 发表于 2023-9-27 21:52
哈哈，看起来全都要灌一肚子水才可以下啊

{:4_174:}

红影 发表于 2023-9-28 22:22

东篱闲人 发表于 2023-9-28 09:39


东篱大哥好{:4_204:}
页: [1]
查看完整版本: 【东篱音画】自与诗书结静缘