东篱闲人 发表于 2022-10-20 17:56

一杯烈酒一杯愁

<style>
      #papa { left: -400px; width: 1400px; height: 800px; background: #ccc url('https://pic1.imgdb.cn/item/634ff43c16f2c2beb1b8ad2e.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: 680px; font: bold 2.4em 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=1883889891.mp3" autoplay= "autoplay"></audio>

<script>
let mKey = 0, mFlag = true;
let lrcAr =[['0.00', ' 作词 : 张灵茹',0],
['0.00', ' 作曲 : 陈伟',10],
['0.01', '《一杯烈酒一杯愁》',6890],
['6.90', '演唱：安静',1679],
['8.58', '词：张灵茹',1800],
['10.38', '曲：陈伟',1319],
['11.70', '编曲：赵新',1140],
['12.84', '音乐制作人：陈伟',1040],
['13.88', '发行公司：壹歌传媒',549],
['14.43', '图意：东篱闲人',17900],
['32.33', '曾经月上柳梢头',6579],
['38.91', '曾经人约黄昏后',5830],
['44.74', '曾经缠缠绵绵爱不够',7339],
['52.08', '许下青丝到白首',6600],
['58.68', '如今缘分匆匆走',6610],
['65.29', '如今人比黄花瘦',6049],
['71.34', '如今凄凄惨惨两分手',6949],
['78.29', '失了天长和地久',6750],
['85.04', '一杯烈酒一杯愁',6500],
['91.54', '一杯相思入了喉',6550],
['98.09', '想起昨日的温柔',6639],
['104.73', '不知不觉泪水流',6650],
['111.38', '一杯烈酒一杯愁',6540],
['117.92', '一杯忧伤灼心口',6500],
['124.42', '明天你在谁左右',6499],
['130.92', '是否还会有归舟',5340],
['136.26', '',27580],
['163.84', '如今缘分匆匆走',6599],
['170.44', '如今人比黄花瘦',6080],
['176.52', '如今凄凄惨惨两分手',7199],
['183.72', '失了天长和地久',6240],
['189.96', '一杯烈酒一杯愁',6780],
['196.74', '一杯相思入了喉',6579],
['203.32', '想起昨日的温柔',6650],
['209.97', '不知不觉泪水流',6530],
['216.50', '一杯烈酒一杯愁',6610],
['223.11', '一杯忧伤灼心口',6389],
['229.50', '明天你在谁左右',6550],
['236.05', '是否还会有归舟',6750],
['242.80', '是否还会有归舟',8519],
['251.32', '',3000]
]

;

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-10-20 19:49

欣赏、点赞！

东篱闲人 发表于 2022-10-20 19:57

起个网名好难 发表于 2022-10-20 19:49
欣赏、点赞！

谢谢，问好。起个名这么难吗？{:5_117:}

醉美水芙蓉 发表于 2022-10-20 20:00

东篱闲人 发表于 2022-10-20 20:02

醉美水芙蓉 发表于 2022-10-20 20:00
欣赏东篱老师好帖！

芙蓉好！{:5_108:}

起个网名好难 发表于 2022-10-20 20:09

东篱闲人 发表于 2022-10-20 19:57
谢谢，问好。起个名这么难吗？

是起个网名难，不是起个名难{:5_106:}

东篱闲人 发表于 2022-10-20 20:29

起个网名好难 发表于 2022-10-20 20:09
是起个网名难，不是起个名难

那是你网名太多了吧？{:5_117:}

起个网名好难 发表于 2022-10-20 20:33

东篱闲人 发表于 2022-10-20 20:29
那是你网名太多了吧？

是吗，我怎么不知道咧{:5_117:}

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

起个网名好难 发表于 2022-10-20 20:33
是吗，我怎么不知道咧

那么难，应该是起网名起麻了。。。。{:5_117:}

红影 发表于 2022-10-20 20:35

一杯烈酒一杯愁，一杯相思入了喉，喝一杯酒就是喝了一杯相思呗{:4_173:}

红影 发表于 2022-10-20 20:37

跑酒吧是为了喝相思的，酒吧可以改相思吧了{:4_173:}

东篱闲人 发表于 2022-10-20 20:37

红影 发表于 2022-10-20 20:35
一杯烈酒一杯愁，一杯相思入了喉，喝一杯酒就是喝了一杯相思呗

{:4_181:}你应该懂的。。。

红影 发表于 2022-10-20 20:37

东篱大哥的图意总是那么漂亮，很赞{:4_199:}

东篱闲人 发表于 2022-10-20 20:38

红影 发表于 2022-10-20 20:37
跑酒吧是为了喝相思的，酒吧可以改相思吧了

真有思想。。。。{:5_116:}

起个网名好难 发表于 2022-10-20 20:38

东篱闲人 发表于 2022-10-20 20:34
那么难，应该是起网名起麻了。。。。

经验之谈？{:5_117:}

东篱闲人 发表于 2022-10-20 20:52

起个网名好难 发表于 2022-10-20 20:38
经验之谈？

别闹，俺行不更名坐不改姓，几十年如一日，就叫这个名字。。。{:5_106:}

起个网名好难 发表于 2022-10-20 20:54

东篱闲人 发表于 2022-10-20 20:52
别闹，俺行不更名坐不改姓，几十年如一日，就叫这个名字。。。

东篱是复姓？

东篱闲人 发表于 2022-10-20 20:55

起个网名好难 发表于 2022-10-20 20:54
东篱是复姓？

啥复姓？东篱的东边的篱笆。。。。{:4_170:}

起个网名好难 发表于 2022-10-20 20:59

东篱闲人 发表于 2022-10-20 20:55
啥复姓？东篱的东边的篱笆。。。。

那还几十年如一日？

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

起个网名好难 发表于 2022-10-20 20:59
那还几十年如一日？

{:4_181:}
页: [1] 2
查看完整版本: 一杯烈酒一杯愁