亚伦影音工作室 发表于 2024-3-8 18:05

满眼相思寄清风 - 赵洋

本帖最后由 亚伦影音工作室 于 2024-4-1 14:40 编辑 <br /><br /><style type="text/css">#papa {
    margin: 0px 0 0 calc(50% - 693px);
    width: 1164px;
    height: 620px;
    background: url('https://pic.imgdb.cn/item/65bf0434871b83018a3fcebd.jpg') no-repeat center/cover;
    box-shadow: 3px 3px 8px #000, 0 0 0 2px silver;
    overflow: hidden;
    z-index: 1;
    position: relative;
}
#mplayer {z-index: 50;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 160px;
    height: 160px;
    transition: 3s;
    filter: invert(1) drop-shadow(0 0 24px yellow);
    cursor: pointer;
    animation: rot 5s linear infinite var(--state);
}
#mplayer:hover { filter: invert(.8) drop-shadow(0 0 24px red); }
#vid {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: calc(100% + 100px);
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes rot { to { transform: rotate(60deg); } }

#lrc{left: 10%;top: 80%;}#lrcc {right:10%;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:bold 3em 微软雅黑;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 {}
</style>
<div id="papa">
<video id="vid" loop="" muted="" src="https://video-js.51miz.com/preview/video/00/00/14/60/V-146031-BA9DD866.mp4">&nbsp;</video>
<div class="cemp" id="testImg" >
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<audio autoplay="" id="aud" loop="" src="https://bzgz.club/view.php/199b9e4dc78412ba847e97580941ee3a.mp3">&nbsp;</audio>
<img alt="" id="mplayer" src="https://pic.imgdb.cn/item/65e712979f345e8d039e5ada.gif" />
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

</div>
<script>
let timer = null;
      papa.onmousemove = function(e) {
      clearTimeout(timer);
      timer = setTimeout(function() {
            if(e.target.id === 'mplayer') return;
            let x = e.offsetX, y = e.offsetY, sw = mplayer.offsetWidth;
            if(x < 0) x = 0;
            if(x > papa.offsetWidth - sw) x =papa.offsetWidth - sw;
            if(y < 0) y = 0;
            if(y > papa.offsetHeight - sw) y = papa.offsetHeight - sw;
            mplayer.style.cssText += `left: ${x}px; top: ${y}px`;
      }, 400);
    }


    let mState = () => aud.paused
      ? (papa.style.setProperty('--state','paused'), vid.pause())
      : (papa.style.setProperty('--state','running'), vid.play());
    aud.addEventListener('playing', mState);
    aud.addEventListener('pause', mState);
    mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();

</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); /*获得歌词数组*/
})();
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

</script>
<style type="text/css">
.cemp{
width: 1164px;
position: absolute;
left: 140px;
top: 23%;
margin: 0px auto;
}
.box {z-index: 5;
position: relative;
width: 300px;
height: 220px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 5px #D2691E;
}
.box:nth-child(1) {
background: url(https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg)no-repeat center/cover;
   left:0px;top:0px;position: absolute;
animation: moveo 3s 2.25s infinite;}
.box:nth-child(2) {
left:0px;top:0px;position: absolute;
background: url(https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg)no-repeat center/cover;
animation: moveo 3s 1.5s infinite;}
.box:nth-child(3) {
left:0px;top:0px;position: absolute;
background: url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover;
animation: moveo 3s 0.75s infinite;}
.box:nth-child(4) {
left:0px;top:0px;position: absolute;
background: url(https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg)no-repeat center/cover;
animation: moveo 3sinfinite;
}
.stop .box:nth-child(1),
.stop .box:nth-child(2),
.stop .box:nth-child(3),
.stop .box:nth-child(4){animation-play-state: paused;}

@keyframes moveo {
0% {transform: perspective(400px) translate(0) scale(1) rotateY(0deg);
    z-index: 0;}
25% {transform: perspective(400px) translate(300px) scale(1.5, 1.5) rotateY(50deg);
    z-index: 10;}
50% {transform: perspective(400px) translate(600px) scale(1) rotateY(0deg);
    z-index: 0;}
75% {transform: perspective(1200px) translate(300px) scale(.5, .5) rotateY(-50deg);
    z-index: -10;}
100% {transform: perspective(400px) translate(0) scale(1) rotateY(0deg);
    z-index: 0}
}
</style>

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

用漂亮的动态蝴蝶做播放器按钮，很漂亮。图片轮播也很漂亮。
欣赏亚伦老师好帖{:4_199:}

小文 发表于 2024-3-8 20:05

好漂亮
页: [1]
查看完整版本: 满眼相思寄清风 - 赵洋