醉美水芙蓉 发表于 2023-7-16 21:46

谁不是人间客(DJ 九零版)-小玟子

<style>
#papa {
        margin: 100px -300px;
        width: 1164px;
        height: 640px;
          background: linear-gradient(to right, #000000,#000080,#222278);
        box-shadow: 0 0 0px #000;
        position: relative;
        z-index: 1;overflow:hidden;
        --state: paused;
}
css-doodle { position: absolute; }

.photo {width: 100%;
height: 100%;
position: absolute;z-index: 3;

top:0px; left:0px;
-webkit-mask-image: radial-gradient(black 20% ,transparent 70%);
opacity: 0;

animation: round 180s linear infinite;}

@keyframes round{0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:0}
5% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
6% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
7% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
8% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1}
9% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:1}
10% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:0}
}

img:nth-child(1) {animation-delay: 168s;}
img:nth-child(2) {animation-delay: 156s;}
img:nth-child(3) {animation-delay: 144s;}
img:nth-child(4) {animation-delay: 132s;}
img:nth-child(5) {animation-delay: 120s;}
img:nth-child(6) {animation-delay: 108s;}
img:nth-child(7) {animation-delay: 96s;}
img:nth-child(8) {animation-delay: 84s;}
img:nth-child(9) {animation-delay: 72s;}
img:nth-child(10){animation-delay: 60s;}
img:nth-child(11){animation-delay: 48s;}
img:nth-child(12){animation-delay: 36s;}
img:nth-child(13){animation-delay: 24s;}
img:nth-child(14) {animation-delay: 12s;}
img:nth-child(15) {animation-delay: 0s;}
.stop img:nth-child(1),
.stop img:nth-child(2),
.stop img:nth-child(3),
.stop img:nth-child(4),
.stop img:nth-child(5),
.stop img:nth-child(6),
.stop img:nth-child(7),
.stop img:nth-child(8),
.stop img:nth-child(9),
.stop img:nth-child(10),
.stop img:nth-child(11),
.stop img:nth-child(12),
.stop img:nth-child(13),
.stop img:nth-child(14),
.stop img:nth-child(15){animation-play-state: paused;}


#canv {mix-blend-mode: lighten;
        position: absolute;
        display: block;
        height: 100%;
        position: relative;
        cursor: pointer;
        z-index: 5;opacity: 0.8;
}
#vid { display: none; }

#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 3em FangSong; font-weight:1000;color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%) drop-shadow( 2px 2px 0px #000000); z-index: 10; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1{   0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}
@keyframes cover2 {   0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}

.wenzi { position: absolute; left: 18%; top: 18%; z-index: 10; color:#ffffff; font: bold 20px/20px 'FangSong',serif;opacity: 1; }
#papa:hover #fullscreen { display:block ;}


#fullscreen { position: absolute; top:2%; left:5%;color:#FFffff; font:normal2.2em华文行楷; opacity: 1; cursor: pointer; z-index: 6}



</style>

<div id="papa">
      <div id="lrc" data-lrc="谁不是人间客">谁不是人间客</div>

<div id="testImg" >
<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/6cfaf2b01054de5bf32e46c67dcb22de_preview.jpg" />

<img alt="" class="photo"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/107a15bc6eb3b6df4a7912ee1a434bd3.mp4.jpg" />

<img alt=""class="photo"src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/a6acf6f88f57afe6781931168188f27d_preview.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/5d3a8c2200df8c7ba6b4f1a6fd784fc6_preview_raw.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/2350e3362935657bd8f079d581a7a6d8_preview_raw.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/ebef7d8cfd1a26f53bda4b294ac84e5d_preview_raw.jpg " />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/2ddcbb74b59575c273406ed870b1138d_preview_raw.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/cfdf6077dda664b58beafce28cc09240_preview_raw.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/1ff65ba4d1b5dd0045b8058231980571_preview_raw.jpg" />

<img alt="" class="photo"src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/2ddcbb74b59575c273406ed870b1138d_preview_raw.jpg" />

<img alt=""class="photo"src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/cfdf6077dda664b58beafce28cc09240_preview_raw.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/c0acc9cd2c66f854dda804b75a5da149_preview_raw.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/adb02e58a841703a0ca70be49834323d_preview_raw.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/29b8df30c93480f4335226338e568adc_preview_raw.jpg" />

<img alt="" class="photo" src="https://img-baofun.zhhainiao.com/fs/scene/preview_img_raw/3945d019d9cb69e933b9b5128056154b_preview_raw.jpg" />

</div>

        <divstyle="width: 400px;height: 320px;overflow:hidden;margin: 3% 70%;position: absolute;" id="but">
<css-doodleid="mplayer">
          :doodle {
                @grid: 2 / 300px 60px;
            position: absolute;z-index: 40;
                color: var(--color);
            transform: scale(1);
                --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color:#ffffff; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 25% 80%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */

      @nth(2) {
                @size: var(--size);
                @shape:windmill;
                @place: 50% 35%;

             background:var(--color);
                animation: rot 6s infinite linear var(--state);
      }


      /* 时间信息 : 右 */
      @nth(3) {
                @place: 75% 80%;
                :after { content: var(--ttmsg2); }
      }
   /* 进度条 */
      @nth(4) {
                @place: 50% 80%;
                @size: 100% 2px;
                background: #aaaaaa;
               display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>
<div class="wenzi">谁不是人间客</div>

</div>

<canvas id="canv"></canvas>
        <span id="fullscreen">全屏观赏</span>
<video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/12/23/V-122382-2B421D95.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://www.qqmc.com/mp3/music283335151.mp3" autoplay loop></audio>

</div>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
        ctx.drawImage(vid, 0, 0, ww, hh);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}
let mState = () => aud.paused ? ( mplayer.style.setProperty('--state', 'paused'), vid.pause()) : ( mplayer.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

</script>

<script>

(function() {
      let script = document.createElement('script');
      script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
      document.head.appendChild(script);
      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;};
      let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });
      mplayer.onclick = (e) => {
                if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) aud.paused ? aud.play() : aud.pause();
                if(e.offsetY > 46) aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
      }
})();


</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
谁不是人间客(DJ 九零版)-小玟子
作词Lyricist: 孙英男
作曲Composer: 灰色幽默
编曲Arranger: KITO
和声Backing Vocalist: 曾雪祁
混音Mixing Engineer: 侯春阳
制作人Music Producer: 李智英
统筹Coordinator: 罗罗
出品人Publisher: 莫堂庆
LRC编辑:醉美水芙蓉
天上下雨地上滑 跌倒了就自己爬
匆匆忙忙人间客 何必多牵挂
推杯换盏几回合 多为指鹿为马
真心难换到真心 眼泪是代价
天下的风拼命刮 心里的雨还在下
人生短短几十载 不过一撇一捺
寻爱问情琉璃塔 辜负了好年华
最后不过还是酒换酒茶换茶
不是每片雪花都能随风落下
不是每段鲜花都能来到盛夏
不是每只鸟都能在树上安家
不是每段爱情都能等到回答
若等不到他我宁愿为爱装傻
听不到他回答我宁愿做哑巴
这人间苦不止一个情字作罢
真真假假虚虚实实我无法自拔
天上下雨地上滑 跌倒了就自己爬
匆匆忙忙人间客 何必多牵挂
推杯换盏几回合 多为指鹿为马
真心难换到真心 眼泪是代价
天下的风拼命刮 心里的雨还在下
人生短短几十载 不过一撇一捺
寻爱问情琉璃塔 辜负了好年华
最后不过还是酒换酒茶换茶
若等不到他我宁愿为爱装傻
听不到他回答我宁愿做哑巴
这人间苦不止一个情字作罢
真真假假虚虚实实我无法自拔
天上下雨地上滑 跌倒了就自己爬
匆匆忙忙人间客 何必多牵挂
推杯换盏几回合 多为指鹿为马
真心难换到真心 眼泪是代价
天下的风拼命刮 心里的雨还在下
人生短短几十载 不过一撇一捺
寻爱问情琉璃塔 辜负了好年华
最后不过还是酒换酒茶换茶
天上下雨地上滑 跌倒了就自己爬
匆匆忙忙人间客 何必多牵挂
推杯换盏几回合 多为指鹿为马
真心难换到真心 眼泪是代价
天下的风拼命刮 心里的雨还在下
人生短短几十载 不过一撇一捺
寻爱问情琉璃塔 辜负了好年华
最后不过还是酒换酒茶换茶
谢谢欣赏！
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, 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 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;
};

/*函数 ：处理当前歌词索引 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 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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.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;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>
<script>


var image = document.getElementById("testImg"),
    button = document.getElementById("but");
   
if (image.classList && button) {
    button.onclick = function() {
      if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
      } else {
            image.classList.add('stop');
            this.value = '.';
      }
    };
}
</script>

红影 发表于 2023-7-16 22:02

这漂亮的制作。这个是亚伦老师代码吧，前几天这里看过这样奇特的歌词同步。{:4_173:}
欣赏水芙蓉美女好帖{:4_187:}

南无月 发表于 2023-7-16 22:09

节奏感极强，听起来很过瘾。。
美女多多，看起来赏心悦目。
欣赏水芙蓉好贴。。。{:4_199:}{:4_187:}

东篱闲人 发表于 2023-7-16 22:10

漂亮！{:5_116:}

樵歌 发表于 2023-7-17 07:02

精彩！

醉美水芙蓉 发表于 2023-7-17 07:20

红影 发表于 2023-7-16 22:02
这漂亮的制作。这个是亚伦老师代码吧，前几天镇海看过这样奇特的歌词同步。
欣赏水芙蓉美女好帖{ ...

谢谢红影美女光临！

醉美水芙蓉 发表于 2023-7-17 07:20

南无月 发表于 2023-7-16 22:09
节奏感极强，听起来很过瘾。。
美女多多，看起来赏心悦目。
欣赏水芙蓉好贴。。。

谢谢月儿光临！

醉美水芙蓉 发表于 2023-7-17 07:21

东篱闲人 发表于 2023-7-16 22:10
漂亮！

谢谢东篱老师光临！

醉美水芙蓉 发表于 2023-7-17 07:21

樵歌 发表于 2023-7-17 07:02
精彩！

谢谢樵歌光临！

红影 发表于 2023-7-17 10:54

醉美水芙蓉 发表于 2023-7-17 07:20
谢谢红影美女光临！

帖子里好多的美女，真养眼啊。问好水芙蓉，新周快乐{:4_187:}

小辣椒 发表于 2023-7-17 13:07

欣赏水芙蓉精彩的制作{:4_199:}

小辣椒 发表于 2023-7-17 13:08

欣赏水芙蓉精彩的制作{:4_199:}

醉美水芙蓉 发表于 2023-7-17 18:09

小辣椒 发表于 2023-7-17 13:07
欣赏水芙蓉精彩的制作

谢谢小辣椒美女支持！

樵歌 发表于 2023-7-18 06:35

醉美水芙蓉 发表于 2023-7-17 07:21
谢谢樵歌光临！

芙蓉早日好{:4_190:}

东篱闲人 发表于 2023-7-26 21:49

套一个这个送你。。。。{:4_190:}

醉美水芙蓉 发表于 2023-7-26 22:28

东篱闲人 发表于 2023-7-26 21:49
套一个这个送你。。。。

谢谢东篱老师！做得漂亮！

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

醉美水芙蓉 发表于 2023-7-26 22:28
谢谢东篱老师！做得漂亮！

没套好，乱套了。。。。{:5_117:}

醉美水芙蓉 发表于 2023-7-26 22:45

东篱闲人 发表于 2023-7-26 22:37
没套好，乱套了。。。。

明天让红影美女给你看看还多什么代码？

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

醉美水芙蓉 发表于 2023-7-26 22:45
明天让红影美女给你看看还多什么代码？

{:4_181:}
页: [1]
查看完整版本: 谁不是人间客(DJ 九零版)-小玟子