孙艺琪_让你知道我爱你(Dj沈念_ProgHouse_Mix国语女)

亚伦影音工作室 发表于 2023-11-1 21:10

本帖最后由亚伦影音工作室于 2023-11-2 04:43 编辑 <br /><br /><style>
#papa { margin: 10px -300px ; width: 1164px; height: 640px; background:#333 url('https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg') 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://pic.imgdb.cn/item/64ce4f0e1ddac507ccfe1eae.jpg') 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 40s linear infinite;
cursor: pointer;
opacity: 0;
}
#mpicc { position: absolute;
top: 0px;
left: 0px;
width: 100%;z-index: 1;
height: 100%;
animation: tot 30s linear infinite;
cursor: pointer;
opacity: 1;
}

@keyframes fly {0%{
   background-position: 0% 0;
}
100%{
   background-position: -500% 200%;filter:hue-rotate(360deg)
}
}
@keyframes tot { 0%{
   background-position: 600% 0%;
}
100%{
   background-position: 0% -800%;filter:hue-rotate(0deg)
}
}
#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://gd-hbimg.huaban.com/63b6d668ad47cf32094c4544c88286091688751740167-jBbl5I')0 0/519px 520px" >
<imgid="mpicc"style="background: url('https://pic.imgdb.cn/item/65424da4c458853aefbd7dfb.png')0 0/610px 339px" >
<div id="mplayer">❊</div>
<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>
<audio src="https://p4.t57.cn:8399/2020/zw/12/DEB.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 = `让你知道我爱你 (DJ沈念版) - 孙艺琪
词：王洪波
曲：崔伟立
（未经许可,不得翻唱或使用）
亲爱的心爱的愿不愿意
让我把余生都交给你
陪我去看雨滴落风起
地老天荒不离不弃
有一种幸福叫回忆
有一种思念叫想你
日夜萦绕挥之不去
所有的场景都被你占据
有一种缘分要珍惜
有一种遇见是天意
前世修来今生不易
再大的风雨我们共同抵御
亲爱的心爱的可不可以
再一次回到我的怀里
让你听见我寂寞呼吸
每一次心跳都是为你
亲爱的心爱的愿不愿意
让我把余生都交给你
陪我去看雨滴落风起
地老天荒不离不弃
有一种幸福叫回忆
有一种思念叫想你
日夜萦绕挥之不去
所有的场景都被你占据
有一种缘分要珍惜
有一种遇见是天意
前世修来今生不易
再大的风雨我们共同抵御
亲爱的心爱的可不可以
再一次回到我的怀里
让你听见我寂寞呼吸
每一次心跳都是为你
亲爱的心爱的愿不愿意
让我把余生都交给你
陪我去看雨滴落风起
地老天荒不离不弃
亲爱的心爱的可不可以
再一次回到我的怀里
让你听见我寂寞呼吸
每一次心跳都是为你
亲爱的心爱的愿不愿意
让我把余生都交给你
陪我去看雨滴落风起
地老天荒不离不弃
地老天荒不离不弃
`;

/*变量：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-11-1 21:52

红影发表于 2023-11-1 23:28

这个制作鸟儿的飞行方向和美女的转头方向一致呢，有趣。
欣赏亚伦老师好帖{:4_187:}

小辣椒 发表于 2023-11-2 20:12

亚伦对一键控制动图已经轻车熟路了{:4_199:}

页: [1]

花潮论坛's Archiver

孙艺琪_让你知道我爱你(Dj沈念_ProgHouse_Mix国语女)