论坛 › 欢乐水吧 › 夜蝶 - 孙艺琪

亚伦影音工作室 发表于 2024-4-8 11:25

夜蝶 - 孙艺琪

本帖最后由 亚伦影音工作室 于 2024-4-8 11:32 编辑 <br /><br /><style>
#papa{margin: 120px -300px;
        width: 1164px;
        height: 620px;
        background:url(https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg)no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345; }
#picBlk {
    width: calc(4 * var(--picWidth));
    height: var(--picHeight);
    position: absolute;
    left: 0px;
    animation: mleft 30s linear infinite;
}

#picBlk img {
    width: var(--picWidth);
    height: var(--picHeight);
    float: left;
}

#oBlk {
    width: 100%;
    height: var(--picHeight);
    overflow: hidden;
    position: relative;
    margin: 0 0 ;

    --picWidth: 1164px;
    --picHeight:100%;
}

@keyframes mleft {
    to {
      left: calc(-2 * var(--picWidth));
    }
}

#picBlk img:nth-child(even) {
    transform: scaleX(-1);
}
li-zi { z-index: 4;top:1900px;left: 20px;position:absolute;background: url('https://pic.imgdb.cn/item/65e712979f345e8d039e5ada.gif')no-repeat 0 180px/200px 120px; offset-path: path('M0 50 Q600 0 1240 20'); offset-distance: 0;transform: rotateY(180deg); animation: move 10s linear infinite var(--state), rotating 5s infinite var(--state); }
@keyframes move { to { offset-distance: 100%; } }
#bfq {top:20%; left:40%;z-index: 21;
position: absolute;overflow: hidden;transform:scale(0.4);
width: 100%;
height: 100%;}
#pic {top:21%; left:2%;z-index: 20;
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
border:2px solid #000000;
background:url('https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png') center/cover no-repeat,url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b0bea37f1dff1ba2977e3d3cdf8cf8ea.jpg')no-repeat 30px 50px/100% 60%;
animation: spin 10s infinite linear ;}
@keyframes spin {100% { transform: rotate(360deg); }
}

#mplayer {position: absolute;
      top:2%; left:0%;z-index: 21;
      width: 500px;
      height: 500px;
background: url('https://pic.imgdb.cn/item/65ffbbe89f345e8d036024a8.png')no-repeat 280px 22px/200px 380px;
      cursor: pointer;
}
.pink { transform:rotate(-2deg);transform-origin: 100% 0%;margin: 0px 0px;}
.purple { transform-origin: 85% 0%;margin: 12px -15px;transform:rotate(-16deg);}
#tmsg {position: absolute;z-index: 20;
      font: normal 25px sans-serif;
      color: #ffffff;
         top:500px;
      left:14%;}
#prog {position: absolute;z-index: 91;
      width: 80%;
      height: 0.3%;
      cursor: pointer;
         top:95%;
         margin:0px 10%;
         border-radius: 2px;}

#lrc{left: 10%;top: 75%;}#lrcc {right:10%;top: 85%;}
#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 2.5em 华文新魏;color: #000078;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0);z-index: 20;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);-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 {}
#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa" >
<div id="oBlk">
<div id="picBlk">
    <img src="https://pic.imgdb.cn/item/6613550168eb93571355a5d8.jpg">
    <img src="https://pic.imgdb.cn/item/6613550168eb93571355a5d8.jpg">
    <img src="https://pic.imgdb.cn/item/6613550168eb93571355a5d8.jpg">
    <img src="https://pic.imgdb.cn/item/6613550168eb93571355a5d8.jpg">
</div>
</div>
<span id="fullscreen">全屏</span>
<divid="body" ><li-zi ></li-zi ></div>
<audio id="aud" src="https://bzgz.club/view.php/c2b83612f0b75c7e081dbb04c9347a07.mp3" autoplay loop ></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

<divid="prog"></div>
        <div id="bfq" >
<div id="pic" ></div>
<div id="mplayer" class="pink"></div>
<div id="tmsg">00:00 | 00:00</div>
</div>

</div>

<script >
picBlk.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => picBlk.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>picBlk.style.animationPlayState = 'paused');


mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');

mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

pic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>pic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>pic.style.animationPlayState = 'paused');

prog.onclick = (e) => {aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
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 fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
</script>
<span id="lrcStr" style="visibility: hidden;">
夜蝶 - 孙艺琪
我穿过人来人往的大街
我走过荒无人烟的旷野
多少人为了梦想洒一路热血
多少人走过崎岖又回到原点
看天上月亮阴晴又圆缺
看爱的花朵盛开又凋谢
在我的心里总有个梦在撒野
黑夜里冲破茧蛹幻化成蝴蝶
我就像一只蝴蝶
黑夜里一只蝴蝶
用翅膀总会飞出另一个世界
就算有再多泥泞
就算有再大风雪
梦想的光芒永远都不会陨灭
我就像一只蝴蝶
黑夜里一只蝴蝶
用坚强总会写出美丽的章节
音符是我的干将
歌声是我的莫邪
用无悔拼出生命里
最美的弧线
看天上月亮阴晴又圆缺
看爱的花朵盛开又凋谢
在我的心里总有个梦在撒野
黑夜里冲破茧蛹幻化成蝴蝶
我就像一只蝴蝶
黑夜里一只蝴蝶
用翅膀总会飞出另一个世界
就算有再多泥泞
就算有再大风雪
梦想的光芒永远都不会陨灭
我就像一只蝴蝶
黑夜里一只蝴蝶
用坚强总会写出美丽的章节
音符是我的干将
歌声是我的莫邪
用无悔拼出生命里
最美的弧线
音符是我的干将
歌声是我的莫邪
用无悔拼出生命里
最美的弧线
</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;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();

</script>
<script>

var pa= document.querySelector('body');
var mState = () => aud.paused ?
        (pa.style.setProperty('--state', 'paused')) :
        (pa.style.setProperty('--state', 'running'));

aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());

Array.from({length: all=4}).forEach(star => {
      var size = 520 + Math.floor(Math.random() * 30);
      star = document.createElement('li-zi');
      star.style.cssText += `
            left: 0;
            top: ${Math.random() * 240 + 60}px;
            width: ${size}px;
            height: ${size}px;
            opacity: ${Math.random() * 0.4 + 0.4 };
            animation-delay: -${Math.random() * 10}s, -${Math.random() * 5}s;
      `;
      papa.prepend(star);
    });

</script>

红影 发表于 2024-4-8 19:56

漂亮的无缝滚动图图和飞舞的蝶。欣赏亚伦老师好帖{:4_199:}

查看完整版本: 夜蝶 - 孙艺琪