论坛首页 › 单图音画 › 那晚的风 DJ九天版

醉美水芙蓉 发表于 2024-6-30 20:26:07

那晚的风 DJ九天版

<style>
#tz {
      --width: 1164px;
      margin: 30px 0 30px calc(50% - (var(--width) / 2 + 81px));
      width: var(--width);
      height: 640px;
      background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/518776546974c69011f9bc769f8b3a1c.mp4.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 8px rgba(0, 0, 0, .6);
      overflow: hidden;
      position: relative;
}
#player {
      position: absolute;
      display: grid;
      place-items: center;
      left: 85%;
      top: 80%;
      width: var(--ww);
      height: var(--ww);
      background:url('https://pic.imgdb.cn/item/654c82b7c458853aefcb569f.png') no-repeat center/cover,url('https://pic.imgdb.cn/item/667f56fed9c307b7e9b4be19.jpg') no-repeat 60% 0/cover;
      border-radius: 50%;
      cursor: pointer;
      transition: .7s;
      animation: rot 6s linear infinite var(--state);
      --ww: 120px;
      --size: 5px;
}
#player:hover { filter: hue-rotate(30deg); }
c-c {
      position: absolute;
      width: var(--size);
      height: var(--size);
      border-radius: 80% 10%;
      background: #fff;
      box-shadow: 0 0 6px #000;
      animation: flyout 2s forwards;
}
#vid {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: calc(100% + 60px);
      object-fit: cover;
      mix-blend-mode: overlay;
      pointer-events: none;
}
#tz:fullscreen #vid { height: calc(100% + 100px); }
@keyframes flyout {
      to { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
}
@keyframes flyin {
      from { transform: rotate(var(--deg)) translateY(calc(var(--ww) / 2)); }
      to { transform: rotate(calc(var(--deg) * 2)) translateY(0); }
}
@keyframes rot {
      to { transform: rotate(360deg); }
}

#lrc{left: 15%;top: 80%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 3em 华文隶书;color: #000078;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background:repeating-linear-gradient(to right, #ff0000, lightgreen, snow, lightgreen, orange) 50%/200px 60px,var(--bg); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>

<div id="tz">
      <audio id="aud" src="https://file.uhsea.com/2406/7b202af358f6be9b064ac16f7d7ab594C8.mp3" autoplay loop></audio>
      <video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/c152980f035ddfbb0781642fe9b7bbb3_preview.mp4
" muted autoplay loop></video>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
      <div id="player" title="暂停"></div>
</div>

<script>
var ccs = [];
new Array(total = 80).fill(0).map((c,k) => {
      c = document.createElement('c-c');
      c.style.cssText += `--deg: ${360 / total * k}deg`;
      player.appendChild(c);
      ccs.push(c);
});
var mState = () => {
      player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      player.title = ['暂停','播放'][+aud.paused];
      ccs.forEach(cc => cc.style.animationName = aud.paused ? 'flyin' : 'flyout');
      aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
      papa: '#tz',
      css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: rgba(0,128,0,.5);',
});
</script>

<span id="lrcStr" style="visibility: hidden;">
作词：肖汉博
作曲：肖汉博
编曲：Season
混音：苏拾一
制作人：刘秉琦
和声：小艺术
统筹：刘秉琦
企划：周宇聪
营销策划：水海波/富裕（桃子）
监制：Yang Yang
出品人：张人霁
LRC编辑：醉美水芙蓉
那晚的风
那晚的风 吹走了你
吹走了我的梦
情海沉沦我怎么过一生
街边路灯 照不亮心黯然伤神的浓
你看不见我眼已经朦胧
假如那天你肯回头看看我
或许就能换个结果
假如当时我们守住了承诺
或许不止一时的快乐
假如你能明白我非你不可
或许也能感到难得
假如你不让我飞蛾扑了火
或许我会永远紧握
那晚的风 吹走了你
吹走了我的梦
情海沉沦我怎么过一生
街边路灯 照不亮心黯然伤神的浓
你看不见我眼已经朦胧
那晚的风 吹走了你
吹来刺骨的痛
爱恨离愁我被困在其中
回忆种种 刻在我心里难忘难成空
我一腔深情你不愿懂
假如那天你肯回头看看我
或许就能换个结果
假如当时我们守住了承诺
或许不止一时的快乐
假如你能明白我非你不可
或许也能感到难得
假如你不让我飞蛾扑了火
或许我会永远紧握
那晚的风 吹走了你
吹走了我的梦
情海沉沦我怎么过一生
街边路灯 照不亮心黯然伤神的浓
你看不见我眼已经朦胧
那晚的风 吹走了你
吹来刺骨的痛
爱恨离愁我被困在其中
回忆种种 刻在我心里难忘难成空
我一腔深情你不愿懂
谢谢欣赏！
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let arr="";
        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) => {
        lrca=lrcAr;
        lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
        let Y=String(mKey/2).indexOf(".");
        if (Y == -1)
    {
        0==mKey&&(lrc.innerHTML=lrca);
        lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
        lrcc.dataset.lrc = "";
        lrc.style.setProperty('--motion', 'cover1');
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
        }
    else
    {
        lrc.innerHTML = lrcb;
        lrcc.dataset.lrc = lrca;
        lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
        lrcc.style.setProperty('--tt', time + 's');
        lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
        }
        mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
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 = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();

</script>

顶不顶个球 发表于 2024-7-25 06:09:22

这个作品漂亮！！！！

蓝叶 发表于 2024-8-4 10:11:27

这个作品漂亮！！！！

1643091610 发表于 2024-8-13 09:09:37

这个作品漂亮！！！！

翁奕童苑 发表于 2024-8-19 11:44:09

这个作品漂亮！！！！

顶不顶个球 发表于 2024-8-24 06:31:30

这个作品漂亮！！！！

活跃概况 发表于 2024-8-26 08:07:13

这个作品漂亮！！！！

1643091610 发表于 2024-8-31 01:26:51

这个作品漂亮！！！！

落寞 发表于 2024-9-10 23:46:26

这个作品漂亮！！！！

332 发表于 2024-9-22 03:56:34

这个作品漂亮！！！！

查看完整版本: 那晚的风 DJ九天版