亚伦影音工作室 发表于 2023-10-31 16:29

看这雨行不？

<style>
#papa { margin: 10px -300px ; width: 1164px; height: 640px; background:#333 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/08fd787e33824673ebe85ced8222546e.png') no-repeat center/cover;   position: relative;place-items: center; z-index: 10000; overflow:hidden;}
#bs{ position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/08fd787e33824673ebe85ced8222546e.png') no-repeat center/cover;
        animation: sb 1s linear infinite;
        opacity: 1;
}
@keyframes sb {
    0%{
      filter:hue-rotate(360deg)
    }
100%{
      filter:hue-rotate(0deg)
    }
}
#mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: fly 150s linear infinite;
        cursor: pointer;mix-blend-mode:lighten;
        opacity: 0;
}
#mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;
        animation: tot 10s linear infinite;
        cursor: pointer;mix-blend-mode:lighten;
        opacity: 1;
}

@keyframes fly {0%{
      background-position: 0% 0;
    }
    100%{
      background-position: 0% -200%;filter:hue-rotate(360deg)
    }
}
@keyframes tot { 0%{
      background-position: 0% 0%;
    }
    100%{
      background-position: 0% -600%;filter:hue-rotate(360deg)
    }
}
#mplayer{top:85%; left:85%;z-index: 36;
position: absolute;
font: normal 7em/0em serif;
color:#ff0000;
cursor: pointer;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}

</style>
<div id="papa">
<div id="bs"></div>
<imgid="mpic"style="background: url('https://pic.imgdb.cn/item/653fbaf4c458853aefb716e6.png')0 0/650px 1620px" >
<imgid="mpicc"style="background: url('https://pic.imgdb.cn/item/6540a468c458853aef1c334b.jpg')0 0/600px 1200px" >
<div id="mplayer">❊</div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
<audio src="https://p4.t57.cn:8399/2020/jy/y/JKV.m4a" loop autoplay id="aud"></audio>
</div>
<script>
mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });
mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
bs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bs.style.animationPlayState = 'running');
aud.addEventListener('pause', () => bs.style.animationPlayState = 'paused');

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


mpicc.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpicc.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpicc.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: 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 = `
忘情泪 - 崔伟立
词：林沛涌
曲：林沛涌
编曲：张艺
混音：吴喜浩
出品人：亚伦
制作人：杨学涛
出品：亚伦影音工作室
发行：亚伦传媒
最可怜的后悔
是明明自己对
还软弱的说不该揭穿他还想要挽回
爱情一旦破碎
最怕不敢面对
说还是爱他还是离不开骗也无所谓
可是他连骗都懒得骗了他不想挽回
你看夜色其实很美寂寞是人心作祟
终于你流下了忘情泪
说再最后哭一回
然后就慢慢的忘掉和他的快乐伤悲
终于你流下了忘情泪
说不再爱的卑微
这一次把酒精换成可以清醒的咖啡
最可怜的后悔
是明明自己对
还软弱的说不该揭穿他还想要挽回
爱情一旦破碎
最怕不敢面对
说还是爱他还是离不开骗也无所谓
可是他连骗都懒得骗了他不想挽回
你看夜色其实很美寂寞是人心作祟
终于你流下了忘情泪
说再最后哭一回
然后就慢慢的忘掉和他的快乐伤悲
终于你流下了忘情泪
说不再爱的卑微
这一次把酒精换成可以清醒的咖啡
终于你流下了忘情泪
说再最后哭一回
然后就慢慢的忘掉和他的快乐伤悲
终于你流下了忘情泪
说不再爱的卑微
这一次把酒精换成可以清醒的咖啡
这一次把酒精换成可以清醒的咖啡
`;

/*变量 ：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>

红影 发表于 2023-10-31 16:32

这是雪吧，不是雨呢，还落在了女孩的头发上{:4_173:}

红影 发表于 2023-10-31 16:32

好漂亮的制作，欣赏亚伦老师好帖{:4_187:}

幸运草 发表于 2023-10-31 16:39

还会变色，美{:6_221:}

亚伦影音工作室 发表于 2023-10-31 16:41

红影 发表于 2023-10-31 16:32
这是雪吧，不是雨呢，还落在了女孩的头发上

我看像雨，女孩头是淋湿了！{:4_195:}

马黑黑 发表于 2023-10-31 17:53

雨夹雪，我看行

亚伦影音工作室 发表于 2023-10-31 18:41

马黑黑 发表于 2023-10-31 17:53
雨夹雪，我看行

谢谢老师认可！

红影 发表于 2023-10-31 19:33

亚伦影音工作室 发表于 2023-10-31 16:41
我看像雨，女孩头是淋湿了！

不管是什么，还是挺好看的{:4_173:}

小辣椒 发表于 2023-10-31 21:11

雨不是很像啊，应该是雨夹雪{:4_170:}

小辣椒 发表于 2023-10-31 21:12

亚伦很会奇思妙想的创作{:4_178:}

亚伦影音工作室 发表于 2023-10-31 21:23

小辣椒 发表于 2023-10-31 21:12
亚伦很会奇思妙想的创作

谢谢鼓励！

东篱闲人 发表于 2023-10-31 21:27

不错，漂亮！{:5_116:}

马黑黑 发表于 2023-10-31 22:18

亚伦影音工作室 发表于 2023-10-31 18:41
谢谢老师认可！

{:4_190:}
页: [1]
查看完整版本: 看这雨行不？