东篱闲人 发表于 2022-11-10 19:34

情深深路漫漫

<style>
      #papa { left: -400px; width: 1400px; height: 800px; background: #ccc url('https://pic1.imgdb.cn/item/636cddc316f2c2beb146aa55.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;left: 950px; top: 660px; font: bold 1.7em 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="" 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=1908029964.mp3" autoplay= "autoplay"></audio>

<script>
let mKey = 0, mFlag = true;
let lrcAr =[['0.00', ' 作词 : 郭冬青',0.95],
['1.00', ' 作曲 : 陈伟',0.95],
['2.00', ' 编曲 : 孙侠',0.95],
['3.00', ' 制作人 : 陈伟',0.95],
['4.00', ' 吉他 : 牛侠',0.95],
['5.00', ' 混音 : 王哲',0.95],
['6.00', ' 发行 : 壹歌传媒',0.95],
['7.00', ' 配图 : 东篱闲人',9.43],
['28.66', '风雨走过了 不过是云烟',6.47],
['35.47', '红尘看穿了 不过是羁绊',6.19],
['41.99', '偏偏这人间 沧海桑田',6.38],
['48.71', '仿佛有了你 才不一般',6.32],
['55.36', '爱情错过了 不过是聚散',6.05],
['61.73', '生命参破了 不过是悲欢',6.34],
['68.40', '回望这一路 苦乐酸甜',5.88],
['74.59', '岁月的音节 与你有关',7.15],
['82.12', '情深深 别问路漫漫',6.36],
['88.82', '牵我的手 就是答案',6.29],
['95.44', '曾经心酸的心碎的遗憾',6.17],
['101.93', '都由我来一一偿还',6.46],
['108.73', '情深深 别怕路漫漫',6.45],
['115.52', '牵你的手 直到永远',6.36],
['122.21', '不管旅途漫长或是短暂',6.05],
['128.58', '我们都作一生的伴',5.17],
['134.02', '',26.69],
['162.12', '爱情错过了 不过是聚散',6.17],
['168.62', '生命参破了 不过是悲欢',6.33],
['175.28', '回望这一路 苦乐酸甜',6.36],
['181.97', '岁月的音节 与你有关',6.34],
['188.64', '情深深 别问路漫漫',6.42],
['195.40', '牵我的手 就是答案',6.38],
['202.12', '曾经心酸的心碎的遗憾',6.26],
['208.71', '都由我来一一偿还',6.28],
['215.32', '情深深 别怕路漫漫',6.01],
['221.65', '牵你的手 直到永远',6.75],
['228.76', '不管旅途漫长或是短暂',6.28],
['235.37', '我们都作一生的伴',6.36],
['242.07', '我们都作一生的伴',8.46],
['250.97', '',4.5]]

;

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>

绿叶清舟 发表于 2022-11-10 20:33

好久不见，跟着姑娘去了啊{:4_189:}

马黑黑 发表于 2022-11-10 20:47

绿叶清舟 发表于 2022-11-10 20:33
好久不见，跟着姑娘去了啊

去隔离

马黑黑 发表于 2022-11-10 20:48

意境深远，图意明晰

非常开心 发表于 2022-11-10 20:53

欣赏楼主的新作，点赞{:4_178:}多谢分享！

东篱闲人 发表于 2022-11-10 21:09

绿叶清舟 发表于 2022-11-10 20:33
好久不见，跟着姑娘去了啊

师傅别瞎说。。。。。{:5_117:}

东篱闲人 发表于 2022-11-10 21:10

马黑黑 发表于 2022-11-10 20:47
去隔离

你咋那么喜欢隔离？{:4_397:}

东篱闲人 发表于 2022-11-10 21:10

马黑黑 发表于 2022-11-10 20:48
意境深远，图意明晰

{:4_176:}

东篱闲人 发表于 2022-11-10 21:11

非常开心 发表于 2022-11-10 20:53
欣赏楼主的新作，点赞多谢分享！

谢谢开心。。。。{:4_176:}

红影 发表于 2022-11-10 21:13

漂亮的同步歌词，抹图也很美。欣赏东篱大哥好帖{:4_187:}

马黑黑 发表于 2022-11-10 21:43

东篱闲人 发表于 2022-11-10 21:10


{:4_191:}

马黑黑 发表于 2022-11-10 21:44

东篱闲人 发表于 2022-11-10 21:10
你咋那么喜欢隔离？

跟镁铝一块儿隔离挺好的嘛{:4_170:}

东篱闲人 发表于 2022-11-10 21:46

红影 发表于 2022-11-10 21:13
漂亮的同步歌词，抹图也很美。欣赏东篱大哥好帖

喝水。。。{:4_180:}

东篱闲人 发表于 2022-11-10 21:46

马黑黑 发表于 2022-11-10 21:44
跟镁铝一块儿隔离挺好的嘛

你的理想很丰满。。。{:4_170:}

马黑黑 发表于 2022-11-10 21:46

东篱闲人 发表于 2022-11-10 21:46
你的理想很丰满。。。

现实也不肿么骨感

东篱闲人 发表于 2022-11-10 21:48

马黑黑 发表于 2022-11-10 21:46
现实也不肿么骨感

你牛！{:5_116:}

马黑黑 发表于 2022-11-10 21:49

东篱闲人 发表于 2022-11-10 21:48
你牛！

这世道，人人牛

红影 发表于 2022-11-10 21:56

东篱闲人 发表于 2022-11-10 21:46
喝水。。。

饿呢，又到时间了{:4_170:}

东篱闲人 发表于 2022-11-10 22:07

红影 发表于 2022-11-10 21:56
饿呢，又到时间了

这几天俺没来，你渴坏了吧？{:5_117:}

小辣椒 发表于 2022-11-10 22:11

老头回家就做帖了{:4_199:}
页: [1] 2 3
查看完整版本: 情深深路漫漫