论坛 › 欢乐水吧 › 小阿枫 - 风中的承诺

亚伦影音工作室 发表于 2024-4-6 20:50

小阿枫 - 风中的承诺

本帖最后由 亚伦影音工作室 于 2024-11-2 14:31 编辑 <br /><br /><style>
#papa{margin: 140px -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; }
      #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}
.photo {width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top:0px; left:0%;
opacity: 1;
animation: round 12s linear infinite;}
@keyframes round   {0% {opacity: 1;transform:translate(-100%,0%)scale(1) ;}
100% {opacity: 1;transform:translate(100%,0%)scale(1) ;}
}
.photo:nth-child(2) {animation-delay: 6s;}
.stop .photo:nth-child(2),
.stop .photo:nth-child(1){animation-play-state: paused;}
li-zi { position: absolute; top: -10px;z-index: 5; background: linear-gradient(to bottom, transparent, snow); animation: drop var(--dur) var(--delay) infinite linear var(--state); }
        @keyframes drop { to { top: 100%; } }
</style>
<style>
#bfq {top:20%; left:40%;z-index: 21;
position: absolute;overflow: hidden;transform:scale(0.4);
width: 100%;
height: 100%;}
#pic {top:20%; left:3%;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: repeating-linear-gradient(to right, gold, 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="papa" >
<span id="fullscreen">全屏</span>
<audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2023/12/11/ceeec639cde917b6c2d4361b78dc9519.mp3" autoplay loop ></audio>
<div id="testImg" >
<div class="photo"> <div style="background:url(https://img-baofun.zhhainiao.com/fs/live/preview_img_raw/1e5fc06ba93a00b3206b6fa756031b4a_preview_raw.jpg)no-repeat center/cover;transform: rotateY(180deg);width:100%;height:100%" ></div></div>
<divclass="photo"> <div style="background:url(https://img-baofun.zhhainiao.com/fs/live/preview_img_raw/1e5fc06ba93a00b3206b6fa756031b4a_preview_raw.jpg)no-repeat center/cover;width:100%;height:100%" ></div></div>
</div>
<divid="body" ><li-zi ></li-zi ></div>
<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 >
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;
      };
</script>

<script>
/*控制动画*//*控制动字*/
(function(){
var image = document.getElementById("testImg");
var image1 = document.getElementById("Img");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*//*结束*/
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;
                }
        }
});
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>

<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: 200}).forEach((item) => {
                item = document.createElement('li-zi');
                item.style.cssText += `
                        --dur: ${0.5 + Math.random() * 0.5}s;
                        --delay: ${Math.random() * -0.8}s;
                        width: ${1 + Math.round(Math.random())}px;
                        height: ${8 + Math.random() * 30}px;
                        left: ${Math.random() * 100}%;
                `;
                papa.appendChild(item);
        });
</script>

红影 发表于 2024-4-6 21:54

漂亮的无缝连接滚动图片，漂亮的雨滴和唱片按钮，还能一键全控。
欣赏亚伦老师漂亮的制作{:4_199:}

红影 发表于 2024-4-6 21:55

全屏下更漂亮，这个制作太美了{:4_199:}

小辣椒 发表于 2024-4-6 21:58

亚伦特棒，新的代码效果又出来了，图片无缝链接背景{:4_199:}

小辣椒 发表于 2024-4-6 21:59

感谢亚伦的精彩分享，赞的~{:4_199:}

老谟深虑 发表于 2024-4-7 10:24

       谢谢老师的新代码，很漂亮。

流水光阴 发表于 2024-4-9 14:01

欣赏佳作，感谢非常

查看完整版本: 小阿枫 - 风中的承诺