等爱成空 (dj版)—蛐蛐大队
本帖最后由 小辣椒 于 2025-10-31 22:32 编辑 <br /><br /><style>#papa { margin: 150px 0 20px calc(50% - 720px); background:#accbaf url(' ')no-repeat center/cover;width: 1280px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#mdiv {z-index: 10;
--size: 0px;
--color: teal;
position: relative;
left: calc(-35% - var(--size) / 2);
top: 230px;
width: var(--size);
height: var(--size);
display: grid;
place-items: center;
animation: rot 8s linear infinite ;
cursor: pointer;
}
#mdiv::before, #mdiv::after {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: calc(var(--size) / 2) calc(var(--size) / 2 - 35px);
border-color: var(--color) transparent;
border-radius: 100% 100% 100% 100%;
filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
}
#mdiv::after { transform: rotate(90deg) }
@keyframes rot { 100% { transform: rotate(360deg);filter:hue-rotate(360deg); } }
#vid {z-index: 2;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: radial-gradient(black 10% ,transparent 90%);
}
#vido {z-index: 1;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
#fullscreen { position: absolute; top: 30px; right:-47%;font: normal 2em/0em 楷体;color:#000; opacity: 1; cursor: pointer; z-index: 111}
#dt2{ position: absolute; width:350px; height: 232px; top: 15%;left: 20%; z-index: 1000;}
</style>
<div id="papa">
<div id="mdiv" title=""></div>
<div data-lrc=" " id="lrc" title="歌词显示"> </div>
<span id="fullscreen">全屏欣赏</span>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/fc66-audiofreehighqps/8B/6F/GKwRIJEMjIa7ACAAAAQGi1jV.m4a" autoplay loop></audio>
<video id="vid" src=" " autoplay loop muted></video>
<video id="vido" src="https://wj.zp68.com/lxx/yunhua/2025/10/17/lip.mp4" autoplay loop muted></video>
<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2025/10/17/ew.png" alt="" />
</div>
<script>
mdiv.onclick = () => aud.paused ?( aud.play(),vid.play(),vido.play()):(aud.pause(),vid.pause(),vido.pause());
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
<style type="text/css">
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 85%;transform: translate(-50%);font:normal 2.6em 华文新魏; font-weight:400;color: #000080;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: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
等爱成空 (dj版)—蛐蛐大队
词Lyrics ：三里叁
曲Composed ：三里叁
编曲Arranger：DJ 阿尼
混音/母带：罗瑞麟
合声Backing Vocals：小艺术
制作人Producer：追光音乐
Q：梧桐树在晚风中晃动
承诺的话飘散在风中
数着时光走得太沉重
为何期盼最终一场空
H：心底燃着未熄的火种
梦里常常见到你笑容
我一直对你情有独钟
结局只剩滚烫烫的痛
HZQ：你给我的爱等等等到一场空
你说的永远却远在冷风中
留下的寂寞汹涌到快发疯
怎么轻易能够抹掉你影踪
你给我的爱痛痛痛在我心中
你给的承诺却散成一场梦
回忆在翻涌心都被你掏空
等花开花落将心事都尘封
LRC编辑：小辣椒
Q：心底燃着未熄的火种
梦里常常见到你笑容
我一直对你情有独钟
结局只剩滚烫烫的痛
HZQ：你给我的爱等等等到一场空
你说的永远却远在冷风中
留下的寂寞汹涌到快发疯
怎么轻易能够抹掉你影踪
你给我的爱痛痛痛在我心中
你给的承诺却散成一场梦
回忆在翻涌心都被你掏空
等花开花落将心事都尘封
你给我的爱痛痛痛在我心中
你给的承诺却散成一场梦
回忆在翻涌心都被你掏空
等花开花落将心事都尘封
谢谢欣赏
`;
/*变量 ：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'),mdiv.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mdiv.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>
简单的一个背景视频加一首歌曲 继续同一首{:5_128:}{:5_128:} 这个有点刮旋风的效果 没有播放器，就只能听歌{:5_128:}{:5_128:} 小辣椒就这样玩，轻松一点，注意保护眼睛
{:5_149:}{:5_149:} liumang 发表于 2025-11-1 23:15
小辣椒就这样玩，轻松一点，注意保护眼睛
{:5_128:}{:5_128:}{:5_128:} 小辣椒 发表于 2025-11-3 22:08
今天上来迟了，小辣椒晚上好{:5_121:}
页:
[1]