醉美水芙蓉 发表于 2023-5-7 21:29

今天

<style>
#papa {
        margin: 10px -300px;
        width: 1164px;
        height: 620px;
        background: url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/aabc0c1548659fe679921392d86531f6_preview.jpg') center/cover no-repeat;
        box-shadow: 3px 3px 2px #000;
        position: relative;
        z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {position: absolute;
        display: block;
        left: 0%; mix-blend-mode:color-dodge;
        top: 0%;
        border-radius: 0%;
        opacity: 1;
        animation: opa 0s infinite alternate ;
}
#mplayer {
        position: absolute;
        left: calc(50% - 15px);
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        opacity: 0;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #ffffff;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #ffffff;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
</style>

<div id="papa">
<div class="blur"></div>
        <canvas id="canv"></canvas>
        <div id="mplayer"></div>
<div data-lrc="" id="lrc"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=261591787&.mp3" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/22/5b52e01dad564.mp4" loop autoplay muted></video>

<script>
(function(){
let ctx = canv.getContext('2d');

let ww = canv.width =1164, hh = canv.height =620;

let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}}
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<style type="text/css">#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 4;
        left: 50%;
        transform: translate(-50%);
        top: 85%;
        font:normal 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 -1px0);
}
#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 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
半吨兄弟 - 今天 (DJ沈念版)
词：陈乐融
曲：黄庆元
编曲：左壬鹏
吉他：潘春宇
制作人：郭朝阳
和声设计：王博玄
和声：鲁英
录音：周明
录音棚：半吨兄弟Music studio
混音/母带工程师：周明
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); /*获得歌词数组*/
})();
</script>

      <style type="text/css">
            .blur { width: 200px; height: 55px;
       filter: blur(8px);z-index: 1;
position: absolute;
top:2%; left:82%;
       background: #eeeeee url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d78822afcd8e69b7183994eb3368cb3b.jpg') center/cover no-repeat;
}
      </style>

竹溪 发表于 2023-5-7 21:40

很热烈的画面。好看，欣赏点赞。

醉美水芙蓉 发表于 2023-5-7 22:02

竹溪 发表于 2023-5-7 21:40
很热烈的画面。好看，欣赏点赞。

谢谢朋友支持！

红影 发表于 2023-5-7 22:37

图片和视频用得都很漂亮，歌曲好听。欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2023-5-8 06:49

红影 发表于 2023-5-7 22:37
图片和视频用得都很漂亮，歌曲好听。欣赏水芙蓉好帖

红影美女早上好！

樵歌 发表于 2023-5-8 06:56

大放光芒。{:4_199:}

大漠孤烟 发表于 2023-5-8 07:52

厉害

梦油 发表于 2023-5-8 10:06

我很喜欢你制作的这个背景。

红影 发表于 2023-5-8 10:59

醉美水芙蓉 发表于 2023-5-8 06:49
红影美女早上好！

抱抱，问好芙蓉美女{:4_179:}

小辣椒 发表于 2023-5-8 15:11

这个按钮在中间我可以点击到了{:4_199:}

小辣椒 发表于 2023-5-8 15:12

这个效果不错 欣赏水芙蓉精彩的制作{:4_199:}

醉美水芙蓉 发表于 2023-5-8 17:07

樵歌 发表于 2023-5-8 06:56
大放光芒。

谢谢樵歌支持！

醉美水芙蓉 发表于 2023-5-8 17:08

大漠孤烟 发表于 2023-5-8 07:52
厉害

谢谢朋友支持！

醉美水芙蓉 发表于 2023-5-8 17:09

小辣椒 发表于 2023-5-8 15:12
这个效果不错 欣赏水芙蓉精彩的制作

谢谢小辣椒支持！

醉美水芙蓉 发表于 2023-5-8 17:10

梦油 发表于 2023-5-8 10:06
我很喜欢你制作的这个背景。

谢谢梦游老师支持！

一斛珠 发表于 2023-5-8 17:13

太美了{:4_199:}

梦油 发表于 2023-5-8 17:46

醉美水芙蓉 发表于 2023-5-8 17:10
谢谢梦游老师支持！

芙蓉朋友别客气。

千羽 发表于 2023-5-8 19:31

动感又炫目，欣赏芙蓉美帖，问好了{:4_187:}

醉美水芙蓉 发表于 2023-5-8 20:40

千羽 发表于 2023-5-8 19:31
动感又炫目，欣赏芙蓉美帖，问好了

问好千羽，谢谢支持！

醉美水芙蓉 发表于 2023-5-8 20:40

一斛珠 发表于 2023-5-8 17:13
太美了

谢谢朋友支持！
页: [1] 2
查看完整版本: 今天