论坛 › 音乐沙龙 › 《17年夏天》 - 刘 钧

亦是金 发表于 2023-3-29 23:33

《17年夏天》 - 刘 钧

本帖最后由 亦是金 于 2024-8-25 17:46 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1860773">

<div style="width: 1200px;height: 700px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:20px;margin-LEFT: -310px;">

<style>
#papa {
      margin: auto;
      top: -83px;
      left: 0px;
        width: 1200px;
        height: 700px;
        background: url('https://www.kumeiwp.com/sub/filestores/2023/03/29/f8050b496f24abcde0aa37f9eb686fd1.gif') center/cover no-repeat;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
}
#papa:hover
#mplayer { transition: .7s; opacity: .9; }
#vid {
      display: none;
      top: 200px;
      left: 0px;
        width: 1200px;
        height: 700px;
}
#canv {
        position: absolute;
        display: block;
        opacity: 1;
        animation: opa 30s infinite alternate linear;
}
#mplayer {
        position: absolute;
        left: calc(50% - 15px);
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 2px solid white;
        border-radius: 50%;
        opacity: 0;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before,
#mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: white;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent white;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }

#lrc {
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg,hsla(100, 90%, 50%, .45), hsla(80, 90%, 50%, .6), hsla(0, 100%, 50%, .75));
        position: absolute;
        top: 600px;
        left: 450px;
        font: bold 2.2em sans-serif;
        color: snow;
        white-space: pre;
        -webkit-background-clip: text;
        filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
        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 mov {to { transform: translate(var(--xx)); } }
@keyframes scale { to {transform: scale(1.5); } }

</style>


<style type="text/css">

@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }

body { overflow-x: hidden; }
#baiBox {
      margin: auto;
      width: 800px;
      text-align: center;
      font-family:微软简中圆;
      font-size: 2.5rem;
      font-weight: bold;
      color: #f46ff6;
      transform-origin: top;
      animation: yao 1.0s linear infinite alternate;
}

@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}

.tit { position: relative;width: 300px;height: 30px;top:20px;LEFT: -390px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }

</style>

<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:36px;">《17年夏天》</span>
<span style="color:#3d46f7;"><span style="font-size:20px;">- 刘 钧</span></div>

<div style="position: relative;width: 500px;height: 50px;top:610px;LEFT: 1000px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>

</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <div id="mplayer"></div>

<div id="lrc" data-lrc="★ 欢迎欣赏 ★">★ 欢迎欣赏 ★</div>

</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=541808459" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/14490244/00/13/59/5dfd0971701b4.mp4" loop muted autoplay></video>

<script>
(function(){

let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, -4, ww, hh, 0, 0, ww + 530, hh + 200);if(!vid.paused) {requestAnimationFrame(loop);return;}};
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();

let averAdd = 0, offset = 0, mKey = 0, mFlag = true;

let lrcTime = (ar) => {let tmpAr = [];for (j = 0; j < ar.length - 1; j++) {if (j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a, b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item, key) => {ar = item > aver ? aver : item;});return ar;};
let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for (x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re, '');if (geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g, '');let time = x.match(re);if (time != null) {for (y of time) {let tmp = y.match(/\d+/g);let sec = 0;for (z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar);}}}}lrcAr.sort((a, b) => a - b);return (lrcTime(lrcAr));}
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => { for (j = 0; j < lrcAr.length; j++) { if (aud.currentTime <= lrcAr) { mKey = j - 1; break; } } if (mKey < 0) mKey = 0; if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1; let time = lrcAr - (aud.currentTime - lrcAr); showLrc(time); };
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

let lrcAr = getLrcAr('《17年夏天》 - 刘 钧\n词曲: 刘 钧\n编曲: 马如龙\nLRC歌词编辑：亦是金\n● ● ● ● ● ●\n记得那个忧郁的夏天\n青春在我们脚下\n你走过的那些地方\n全部都盛开了花\n懵懵懂懂的羞涩岁月\n布满了色彩童话\n你说过的那些情话\n是否还记得它\n那年夏天你的长发\n轻抚过我的心啊\n还没等到说出再见\n眼泪就纷纷落下\n转眼这多年已过去了\n你填满过我的梦啊\n那一段岁月已经再见\n已回不去那年夏天\n● ● ● ● ● ●\n记得那个离别的夏天\n心情都纷乱复杂\n你转身的那一刹那\n淋湿了我的年华\n操场边上的那些篱笆\n风吹得树叶沙沙\n还有天边那朵彩霞\n汇成了一幅画\n那年夏天你的长发\n轻抚过我的心啊\n还没等到说出再见\n眼泪就纷纷落下\n转眼这多年已过去了\n你填满过我的梦啊\n那一段岁月已经再见\n已回不去那年夏天\n那年夏天你的长发\n轻抚过我的心啊\n还没等到说出再见\n眼泪就纷纷落下\n转眼这多年已过去了\n你填满过我的梦啊\n那一段岁月已经再见\n已回不去那年夏天\n那一段岁月已经再见\n已回不去那年夏天\n已回不去那年夏天\n -- 谢谢欣赏 --\n\n');
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
face.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

</script>
</td></tr></table>

马黑黑 发表于 2023-3-29 23:51

画靓歌美。欣赏。

亦是金 发表于 2023-3-30 09:35

马黑黑 发表于 2023-3-29 23:51
画靓歌美。欣赏。

问好黑黑老师！谢谢欣赏！谢谢老师的好代码！{:4_191:}

红影 发表于 2023-3-30 09:48

这个厉害了，又是背景图的轮转，又是跟视频的透明度的相互替换，弄得好热闹{:4_187:}

红影 发表于 2023-3-30 09:49

酷美原来可以上传那么大的图片的呢，真没想到{:4_173:}

红影 发表于 2023-3-30 09:51

这个制作很漂亮，欣赏亦是金老师好帖{:4_199:}

亦是金 发表于 2023-3-30 10:29

红影 发表于 2023-3-30 09:48
这个厉害了，又是背景图的轮转，又是跟视频的透明度的相互替换，弄得好热闹

问好红影！{:4_187:}

亦是金 发表于 2023-3-30 10:32

红影 发表于 2023-3-30 09:49
酷美原来可以上传那么大的图片的呢，真没想到

是的，这个gif动画有54M呢，酷美竟那个上传呢！！！{:4_189:}

亦是金 发表于 2023-3-30 10:33

红影 发表于 2023-3-30 09:51
这个制作很漂亮，欣赏亦是金老师好帖

谢谢红影欣赏！谢谢点赞加分！祝你欣赏愉快！{:4_187:}

红影 发表于 2023-3-30 12:24

亦是金 发表于 2023-3-30 10:29
问好红影！

问好亦是金老师，中午好{:4_187:}

红影 发表于 2023-3-30 12:25

亦是金 发表于 2023-3-30 10:32
是的，这个gif动画有54M呢，酷美竟那个上传呢！！！

比通常的歌曲都大，我也不知道酷美能上传这么大文件{:4_173:}

红影 发表于 2023-3-30 12:25

亦是金 发表于 2023-3-30 10:33
谢谢红影欣赏！谢谢点赞加分！祝你欣赏愉快！

应该感谢亦是金老师带来的精美帖子{:4_187:}

马黑黑 发表于 2023-3-30 12:48

亦是金 发表于 2023-3-30 09:35
问好黑黑老师！谢谢欣赏！谢谢老师的好代码！

{:4_191:}

绿叶清舟 发表于 2023-3-30 19:24

精彩的制作，欣赏学习了

小辣椒 发表于 2023-3-30 21:12

亦是金 发表于 2023-3-30 10:32
是的，这个gif动画有54M呢，酷美竟那个上传呢！！！

哇塞~~~~这个动图真的太大了，我想转一下低版本都内存不够用

小辣椒 发表于 2023-3-30 21:13

红影 发表于 2023-3-30 12:25
比通常的歌曲都大，我也不知道酷美能上传这么大文件

亲爱的，这个大图出来速度不慢吧。。。。{:4_173:}

小辣椒 发表于 2023-3-30 21:18

亦是金 发表于 2023-3-30 10:32
是的，这个gif动画有54M呢，酷美竟那个上传呢！！！

感谢技术管理员前段时间辛苦的，论坛升级过了，速度快了许多，以前你20多MB我也是看不见要等看的。

小辣椒 发表于 2023-3-30 21:18

好看，好听，谢谢分享{:4_187:}

红影 发表于 2023-3-30 22:26

小辣椒 发表于 2023-3-30 21:13
亲爱的，这个大图出来速度不慢吧。。。。

是啊，这么大的图，出来却很快呢。

梦缘 发表于 2023-4-1 19:19

很漂亮的播放器，精彩！{:4_204:}

查看完整版本: 《17年夏天》 - 刘 钧