心里住着你【控】
本帖最后由 亚伦影音工作室 于 2023-9-2 21:49 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 593px); width: 1164px; height: 620px; background: url('https://pic.imgdb.cn/item/64ec3199661c6c8e54c39ffd.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#img_border{width:40%;height:100%;position: absolute;animation: rotating 10s linear infinite;z-index: -1;background: url('https://pic.imgdb.cn/item/6440b79d0d2dde57772447d6.jpg') no-repeat center/cover;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);}
@keyframes rotating{
0% {opacity: 1;transform: scale(1);}
50% {opacity: 1;transform: scale(1);filter:hue-rotate(60deg)contrast(120%)brightness(120%);}
51% {opacity: 1;transform: scale(1);}
100% {opacity: 0;transform:scale(4)rotateY(0deg);}}
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
li-zi { position: absolute; top: 0; background: linear-gradient(to bottom, transparent, snow); animation: drop var(--dur) var(--delay) infinite linear var(--state); }
@keyframes drop { to { top: 100%; } }
</style>
<div id="papa">
<video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/15/77/V-157721-AECD40E0.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<div id="img_border"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music291647695.mp3" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/oscpp_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [];
script.onload = () => {
HCPlayer({papa: '#papa',
lrcAr: geci,
lrc_css: 'filter:drop-shadow(#ffffff 0.5px 0 0)drop-shadow(#ffffff 0 0.5px 0)drop-shadow(#ffffff -0.5px 0 0) drop-shadow(#ffffff 0 -0.5px0); font:normal 3em 华文新魏; --bg: #800000;top:65%; color: #000080;',
fs_css: 'top: 6%; right: 6.5%;font:normal 2em 华文新魏; ',
player_css: `
bottom: 6.2%;left: 30%;
--discBg:url('https://pic.imgdb.cn/item/6430f89c0d2dde57770c848e.png') no-repeat center/cover;
--discSize: 40px;
--hh: 120px;
`,
pinpu: {num: 300, size: 1, gap: 0.5, color1: '#ff0000', color2: '#ffcccc'},
});
};
})();
Array.from({length: 70}).forEach((item) => {
item = document.createElement('li-zi');
item.style.cssText += `
--dur: ${0.4 + Math.random() * 0.4}s;
--delay: ${Math.random() * -0.8}s;
width: ${1 + Math.round(Math.random())}px;
height: ${8 + Math.random() * 30}px;
left: ${Math.random() * 100}%;
`;
papa.appendChild(item);
});
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
<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>
又换了一个光盘图图呢，真漂亮的制作，所有动态皆可控。欣赏亚伦老师好帖{:4_199:} 这个制作简单而效果不错，亚伦好棒！{:4_199:}
页:
[1]