三月的阳光 发表于 2023-6-26 21:18

《华胥梦》

<style>
#papa {
        margin: 20px -10px;
        width: 1164px;
        height: 640px;
        background:#000000 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/a56dec0f4e87b6e35bc089df83ec15af.jpg') center/cover no-repeat;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {position: absolute;
        display: block;
        right: 0px;
        top: 0px;
        border-radius: 0%;
        opacity: 1;
        animation: opa 0s infinite alternate ;
}
#mplayer {
        position: absolute;z-index: 4;
        left: calc(50% - 15px);
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 2px solid #cccccc;
        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: #cccccc;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 10px;
        border-width: 10px 12px;
        border-color: transparent transparent transparent #cccccc;
        opacity: var(--disp1);
}
#mplayer::after {
        width: 2px;
        height: 20px;
        border-width: 0 4px 0 4px;
        opacity: var(--disp2);
}
@keyframes opa { to {opacity: 1;} }


#fg{width: 100%;height: 100%;top:0px; left:0px;position: absolute; z-index: 1;animation: slider 10s linear infinite ;opacity: 1;}

@keyframes slider {0% {background: linear-gradient(0deg, #000000 7%,#Ffffff 8%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 91%);} 100%{background: linear-gradient(0deg, #000000 7%,#Ffffff 8%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 91%);} }

</style>

<div id="papa">
        <canvas id="canv"></canvas>
<div id="fg">
<div id="rotate-words">
<div> <br />
<span></span></div>

<div><br />
<span></span></div>

<div><br />
<span></span></div>

<div><br />
<span></span></div>



</div></div>
        <div id="mplayer"></div>
<div data-lrc="三月的阳光" id="lrc">三月的阳光</div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=29593208.mp3" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/13/5b5175e398be3.mp4" loop autoplay muted></video>

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

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

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());

fg.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>fg.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>fg.style.animationPlayState = 'paused');
})();
</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: 80%;
        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 = `
《华胥梦》（晃儿VS 慕寒）
晃：谁走过你的身边
留住
往事一一浮现
寒：梦的尽头谁逗留
谁挥手抹去你眉间哀愁
晃：牵手放手停留回眸擦肩而过
千年时空里谁为谁蹉跎
寒：如果你我注定悲剧的走一路
谁为我们拉开序幕
晃：转动时间的轨迹
绽放着荼蘼
仿佛空气中也弥漫着你的气息
寒：思念纠结成长发
梳平你的牵挂
爱你是用生命浇灌出的花
寒：梦中是谁的身影
谁唤醒
尘封中的心灵
晃：梦中看到你微笑
咸咸的思恋还挂在眼角
寒：双手交错合十紧握不想错过
没有你谁能读懂我寂寞
晃：只要此刻能够留住你的拥抱
谁还在乎天荒地老
寒：是谁还站在窗外
谁仍在等待
等待着永远不会散去的阴霾
晃：是什么渐渐冰凉
迷失时间海洋
寻觅的路为何永远那么长
晃：转动时间的轨迹
绽放着荼蘼
仿佛空气中也弥漫着你的气息
寒：思念纠结成长发
梳平你的牵挂
爱你是用生命浇灌出的花
合：是谁还站在窗外
谁仍在等待
等待着永远不会散去的阴霾
晃：是什么渐渐冰凉
寒：迷失时间海洋
合：寻觅的路为何永远那么长
`;

/*变量 ：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">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
max-width:800px;
left:0%;
margin:auto;
padding:20% 0;
font-size:3.8em;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
text-transform:uppercase;
color:#ff0000;
font-family: '华文隶书', sans-serif;
}

#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#000000;
text-transform:lowercase;
opacity:0.8;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
font-family: '华文隶书', sans-serif;
}

#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 48s linear 2 0s;
}

@keyframes rotate-word {
    0% { opacity: 0;transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    3% { opacity: 1;transform: translateX(0);filter:blur(0px);transform:scale(.7)}
    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
    80% { opacity: 0}
    100% { opacity: 0}
}

</style>

三月的阳光 发表于 2023-6-26 21:21

@一抹微蓝

我又来了~~{:9019:}

三月的阳光 发表于 2023-6-26 21:21

本帖最后由 三月的阳光 于 2023-6-26 21:39 编辑

@蜻蜓

师妹，听歌了~~{:9019:}

三年前是师妹帮我开通了代码原创组，才可以代码发帖，谢谢师妹~~{:10_402:}


三月的阳光 发表于 2023-6-26 21:22

主帖发满第80帖~~{:9005:}

浅笑 发表于 2023-6-26 22:26

先来先听{:10_403:}

蜻蜓 发表于 2023-6-27 07:16

三月的阳光 发表于 2023-6-26 21:21
@蜻蜓

师妹，听歌了~~


师兄制作的真棒！{:10_402:}

楚心兰 发表于 2023-6-27 09:30

周二好阳光

三月的阳光 发表于 2023-6-27 14:14

浅笑 发表于 2023-6-26 22:26
先来先听

欢迎浅笑，你的歌才是最好听的，很想听你的歌~~{:10_402:}

三月的阳光 发表于 2023-6-27 14:15

蜻蜓 发表于 2023-6-27 07:16
师兄制作的真棒！

师妹，下午好，谢谢师妹的赞誉~~{:10_402:}

三月的阳光 发表于 2023-6-27 14:16

楚心兰 发表于 2023-6-27 09:30
周二好阳光

兰兰，下午好，好久不见~~{:10_402:}
页: [1] 2 3
查看完整版本: 《华胥梦》