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

桃园三结义


<style>
      #papa { left: -400px; width: 1400px; height: 800px; background: #ccc url('https://pic1.imgdb.cn/item/633ed0cc16f2c2beb13933f5.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: 660px; 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="/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=27591736.mp3" autoplay= "autoplay"></audio>

<script>
let mKey = 0, mFlag = true;
let lrcAr =[['0.00', ' 编辑，图意 : 东篱闲人',18348],
['9.00', '这一拜',4510],
['13.51', '春风得意遇知音',4209],
['17.72', '桃花也含笑映祭台',8590],
['26.31', '这一拜',4120],
['30.43', '报国安邦志慷慨',4320],
['34.75', '建功立业展雄才',4640],
['39.39', '展雄才',6420],
['45.81', '这一拜',4009],
['49.82', '忠肝义胆',4329],
['54.15', '患难相随誓不分开',8800],
['62.95', '这一拜',4170],
['67.12', '生死不改',4179],
['71.30', '天地日月壮我情怀',9040],
['80.34', '这一拜',3959],
['84.30', '生死不改',4460],
['88.76', '天地日月壮我情怀',11230],
['99.99', '长矛在手',2709],
['102.70', '刀剑生辉',2670],
['105.37', '看我弟兄',2609],
['107.98', '迎着烽烟大步来',2660],
['110.64', '长矛在手',2709],
['113.35', '刀剑生辉',2700],
['116.05', '看我弟兄',2660],
['118.71', '迎着烽烟大步来',2609],
['121.32', '长矛在手',2780],
['124.10', '刀剑生辉',2500],
['126.60', '看我弟兄',2800],
['129.40', '迎着烽烟大步来',34900],
['164.30', '长矛在手',2599],
['166.90', '刀剑生辉',2650],
['169.55', '看我弟兄',2639],
['172.19', '迎着烽烟大步来',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-6 21:19

刘关张三人是对着屏幕拜，进帖的人划算了，都可以接受他们三人的一拜呢{:4_173:}

红影 发表于 2022-10-6 21:20

这个歌曲挺豪气的，好听。东篱大哥的制作好棒{:4_187:}

马黑黑 发表于 2022-10-6 21:22

这歌第一回听。
帖子制作精美，欣赏。

醉美水芙蓉 发表于 2022-10-6 21:48

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

红影 发表于 2022-10-6 21:19
刘关张三人是对着屏幕拜，进帖的人划算了，都可以接受他们三人的一拜呢

嗯嗯，恭喜你。。。{:5_117:}

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

马黑黑 发表于 2022-10-6 21:22
这歌第一回听。
帖子制作精美，欣赏。

黑黑喝水。。。{:4_176:}

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

醉美水芙蓉 发表于 2022-10-6 21:48
欣赏东篱老师好贴！

{:4_180:}

闲言不语 发表于 2022-10-6 21:54

老三国的插曲都好听，前天刚看完高希希导演的95集新三国，少了豪放，多了软绵。

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

闲言不语 发表于 2022-10-6 21:54
老三国的插曲都好听，前天刚看完高希希导演的95集新三国，少了豪放，多了软绵。

啥剧都忌讳重拍，几乎没有成功的。。。

闲言不语 发表于 2022-10-6 22:00

东篱闲人 发表于 2022-10-6 21:55
啥剧都忌讳重拍，几乎没有成功的。。。

也许是先入为主吧

东篱闲人 发表于 2022-10-6 22:01

闲言不语 发表于 2022-10-6 22:00
也许是先入为主吧

嗯嗯，就是这个道理。。。。

红影 发表于 2022-10-6 22:15

东篱闲人 发表于 2022-10-6 21:49
嗯嗯，恭喜你。。。

他们还一人捧一杯酒，有三杯酒可喝{:4_189:}

马黑黑 发表于 2022-10-6 22:15

东篱闲人 发表于 2022-10-6 21:49
黑黑喝水。。。

红水不喝。谢谢。

东篱闲人 发表于 2022-10-7 19:42

红影 发表于 2022-10-6 22:15
他们还一人捧一杯酒，有三杯酒可喝

不够还有。。。。

东篱闲人 发表于 2022-10-7 19:43

马黑黑 发表于 2022-10-6 22:15
红水不喝。谢谢。

你对红影有意见？{:5_115:}

马黑黑 发表于 2022-10-7 19:52

东篱闲人 发表于 2022-10-7 19:43
你对红影有意见？

你真会扯{:4_172:}

东篱闲人 发表于 2022-10-7 19:53

马黑黑 发表于 2022-10-7 19:52
你真会扯

{:4_170:}

马黑黑 发表于 2022-10-7 19:54

东篱闲人 发表于 2022-10-7 19:53


扯扯更健康

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

马黑黑 发表于 2022-10-7 19:54
扯扯更健康

嗯嗯，闲着干啥。。。{:5_117:}
页: [1] 2
查看完整版本: 桃园三结义