东篱闲人 发表于 2023-7-26 19:01

【东篱音画】情丝绕指柔 TO樵歌


<style>
      #papa { left: -400px; width: 1400px; height: 800px; background: #ccc url('https://pic.imgdb.cn/item/64bb3df91ddac507cc50696a.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: 618px; font: bold 1.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=1885426920.mp3" autoplay= "autoplay"></audio>

<script>
let mKey = 0, mFlag = true;
let lrcAr =[['0.00', ' 作词 : 周兵',1000],
['1.00', ' 作曲 : 路勇',1000],
['2.00', ' 编曲 : 关剑',1000],
['3.00', ' 配图 : 东篱闲人',24840],
['27.84', '昨夜西风起小楼',5000],
['32.84', '杯中剩下断肠酒',5089],
['37.93', '回忆喂的马消瘦',5100],
['43.03', '往事如那水在流',5229],
['48.26', '今日白云空悠悠',5000],
['53.26', '看见相思挂枝头',5000],
['58.26', '摘下一朵你的温柔',5109],
['63.37', '那段岁月还念旧',7860],
['71.23', '悠悠情丝绕指柔',5000],
['76.23', '芊芊红线念思愁',5049],
['81.28', '我想你爱你可知否',5090],
['86.37', '一夜白了头',5140],
['91.51', '悠悠情丝绕指柔',5170],
['96.68', '深深眷恋藏胸口',5049],
['101.73', '等花开花落叹离愁',5120],
['106.85', '泪水沾衣袖',5170],
['112.02', '',20389],
['132.41', '今日白云空悠悠',5090],
['137.50', '看见相思挂枝头',5139],
['142.64', '摘下一朵你的温柔',5050],
['147.69', '那段岁月还念旧',7759],
['155.45', '悠悠情丝绕指柔',5080],
['160.53', '芊芊红线念思愁',4969],
['165.50', '我想你爱你可知否',5170],
['170.67', '一夜白了头',5189],
['175.86', '悠悠情丝绕指柔',5009],
['180.87', '深深眷恋藏胸口',5079],
['185.95', '等花开花落叹离愁',5210],
['191.16', '泪水沾衣袖',5099],
['196.26', '悠悠情丝绕指柔',5010],
['201.27', '芊芊红线念思愁',5099],
['206.37', '我想你爱你可知否',5209],
['211.58', '一夜白了头',4970],
['216.55', '悠悠情丝绕指柔',5199],
['221.75', '深深眷恋藏胸口',5129],
['226.88', '等花开花落叹离愁',5120],
['232.00', '泪水沾衣袖',5680],
['237.68', '',4501],
['242.18', ' 和声 : 凌菲',5113],
['247.29', ' 混音 : 阿KEN',5113],
['252.41', ' 发行 : 壹歌传媒',5112],
['257.52', ' 出品人 : 王峰',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>

马黑黑 发表于 2023-7-26 19:12

@樵歌 高兴的一个星期睡不着觉肿么办

马黑黑 发表于 2023-7-26 19:12

{:4_199:}

醉美水芙蓉 发表于 2023-7-26 19:56

东篱闲人 发表于 2023-7-26 19:58

马黑黑 发表于 2023-7-26 19:12


{:4_190:}

东篱闲人 发表于 2023-7-26 19:58

醉美水芙蓉 发表于 2023-7-26 19:56
樵歌快来收礼喔！@樵歌 欣赏东篱老师佳作！

{:4_190:}

马黑黑 发表于 2023-7-26 20:28

东篱闲人 发表于 2023-7-26 19:58


感谢热咖啡

红影 发表于 2023-7-26 20:28

送给师兄的，真漂亮的制作。@樵歌师兄快来收礼{:4_187:}

东篱闲人 发表于 2023-7-26 20:29

马黑黑 发表于 2023-7-26 20:28
感谢热咖啡

不客气，使劲喝，还有呢。。。。{:4_190:}

红影 发表于 2023-7-26 20:30

这个还带歌词同步的，还有个飘动的风筝。东篱大哥的音画越做越漂亮了{:4_187:}

东篱闲人 发表于 2023-7-26 20:32

红影 发表于 2023-7-26 20:30
这个还带歌词同步的，还有个飘动的风筝。东篱大哥的音画越做越漂亮了

喝水，，，，{:4_180:}

马黑黑 发表于 2023-7-26 20:51

东篱闲人 发表于 2023-7-26 20:29
不客气，使劲喝，还有呢。。。。

俺喝的不多，去星巴克，也就是喝个七八杯

东篱闲人 发表于 2023-7-26 20:53

马黑黑 发表于 2023-7-26 20:51
俺喝的不多，去星巴克，也就是喝个七八杯

你真是太节俭了。。。{:5_116:}

马黑黑 发表于 2023-7-26 22:24

东篱闲人 发表于 2023-7-26 20:53
你真是太节俭了。。。

嗯，钱钱不多

东篱闲人 发表于 2023-7-26 22:28

马黑黑 发表于 2023-7-26 22:24
嗯，钱钱不多

你别整太贵的啊。。。{:5_106:}

马黑黑 发表于 2023-7-26 23:25

东篱闲人 发表于 2023-7-26 22:28
你别整太贵的啊。。。

星巴克木有五六毛一份的

东篱闲人 发表于 2023-7-27 08:48

马黑黑 发表于 2023-7-26 23:25
星巴克木有五六毛一份的

你可以买袋的。。。。{:4_172:}

红影 发表于 2023-7-27 09:56

东篱闲人 发表于 2023-7-26 20:32
喝水，，，，

欣赏这么美的制作的时候还是少喝，万一不小心撒到画面上，多可惜{:4_173:}

东篱闲人 发表于 2023-7-27 10:31

红影 发表于 2023-7-27 09:56
欣赏这么美的制作的时候还是少喝，万一不小心撒到画面上，多可惜

没事，随便整。。。{:5_112:}

马黑黑 发表于 2023-7-27 12:23

东篱闲人 发表于 2023-7-27 08:48
你可以买袋的。。。。

我看了一下拼夕夕，倒是有，只是不敢下单
页: [1] 2
查看完整版本: 【东篱音画】情丝绕指柔 TO樵歌