别再说我们只是过客 演唱：梅朵
本帖最后由 亚伦影音工作室 于 2024-4-1 14:57 编辑 <br /><br /><style>#papa{position: relative;width:1164px;height:620px;background:#000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center/cover;display: grid;place-items: center;overflow:hidden;margin-top:150px;margin-left: -300px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;z-index: 123456;}
audio {position:absolute;top:580px;z-index: 50;
width: 98%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}
audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}
audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}
#lrc{left: 10%;top: 75%;}#lrcc {left: 90%;transform: translate(-102%);top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 3em 华文新魏;color: #222222;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 -1px 0);z-index: 15;}
#lrcc::before,#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);}}
li-zi { z-index: 6;top:1600px;left: 0px;position:absolute;background: url('https://pic.imgdb.cn/item/65bf44e6871b83018a0bba00.png')0 0/cover; offset-path: path('M0 400 Q570 -260 1140 400'); offset-distance: 0; animation: move 10s linear infinite var(--state), rotating 5s infinite var(--state); }
@keyframes move { to { offset-distance: 100%; filter:hue-rotate(360deg)contrast(100%)brightness(150%);} }
</style>
<div id="papa">
<div class="cemp" id="testImg" >
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<divid="body" ><li-zi ></li-zi ></div>
<audioid="aud" loop controls >
<source src="https://bzgz.club/view.php/c2f019a782c538d8406c42be83b22b64.mp3" type="audio/mp3" /></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<script>
let autoplayPromise = aud.play(); // 命令video播放并获取Promise对象
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
</script>
<span id="lrcStr" style="visibility: hidden;">
别再说我们只是过客
演唱：梅朵
作词：宋立国
作曲：徐青春
编曲：闫石
和声：凌菲
混音：王宇鹏
制作：亚伦影音工作室
发行：亚伦传媒
我曾用心为你付出过
小心翼翼不让你难过
在岁月的长河相遇你和我
我想陪你沐浴着爱河
只怪时间让人难琢磨
风风雨雨经不起坎坷
在人生的路上都有权选择
心碎的我却无可奈何
别再说我们只是过客
别再说这一切没结果
既然相爱过真心付出了
滚滚的红尘相遇多难得
别再说我们只是过客
别再说这都是谁的错
许下的承诺如花瓣凋落
我不想今生与你擦肩过
只怪时间让人难琢磨
风风雨雨经不起坎坷
在人生的路上都有权选择
心碎的我却无可奈何
别再说我们只是过客
别再说这一切没结果
既然相爱过真心付出了
滚滚的红尘相遇多难得
别再说我们只是过客
别再说这都是谁的错
许下的承诺如花瓣凋落
我不想今生与你擦肩过
许下的承诺如花瓣凋落
我不想今生与你擦肩过
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
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) => {
lrca=lrcAr;
lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
let Y=String(mKey/2).indexOf(".");
if (Y == -1)
{
0==mKey&&(lrc.innerHTML=lrca);
lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
lrcc.dataset.lrc = "";
lrc.style.setProperty('--motion', 'cover1');
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
}
else
{
lrc.innerHTML = lrcb;
lrcc.dataset.lrc = lrca;
lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
lrcc.style.setProperty('--tt', time + 's');
lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
}
mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","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.innerHTML); /*获得歌词数组*/
})();
</script>
<script>
var pa= document.querySelector('body');
var mState = () => aud.paused ?
(pa.style.setProperty('--state', 'paused')) :
(pa.style.setProperty('--state', 'running'));
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
Array.from({length: all=40}).forEach(star => {
var size = 20 + Math.floor(Math.random() * 30);
star = document.createElement('li-zi');
star.style.cssText += `
left: 0;
top: ${Math.random() * 140 + 60}px;
width: ${size}px;
height: ${size}px;
opacity: ${Math.random() * 0.4 + 0.4 };
animation-delay: -${Math.random() * 10}s, -${Math.random() * 5}s;
`;
papa.prepend(star);
});
</script>
<style type="text/css">
.cemp{z-index: 5;
width: 1164px;
position: absolute;
left: 140px;
top: 23%;
margin: 0px auto;
}
.box {z-index: 5;
position: relative;
width: 300px;
height: 220px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 5px #D2691E;
}
.box:nth-child(1) {
background: url(https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg)no-repeat center/cover;
left:0px;top:0px;position: absolute;
animation: moveo 3s 2.25s infinite;}
.box:nth-child(2) {
left:0px;top:0px;position: absolute;
background: url(https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg)no-repeat center/cover;
animation: moveo 3s 1.5s infinite;}
.box:nth-child(3) {
left:0px;top:0px;position: absolute;
background: url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover;
animation: moveo 3s 0.75s infinite;}
.box:nth-child(4) {
left:0px;top:0px;position: absolute;
background: url(https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg)no-repeat center/cover;
animation: moveo 3sinfinite;
}
.stop .box:nth-child(1),
.stop .box:nth-child(2),
.stop .box:nth-child(3),
.stop .box:nth-child(4){animation-play-state: paused;}
@keyframes moveo {
0% {transform: perspective(400px) translate(0) scale(1) rotateY(0deg);
z-index: 0;}
25% {transform: perspective(400px) translate(300px) scale(1.5, 1.5) rotateY(50deg);
z-index: 10;}
50% {transform: perspective(400px) translate(600px) scale(1) rotateY(0deg);
z-index: 0;}
75% {transform: perspective(1200px) translate(300px) scale(.5, .5) rotateY(-50deg);
z-index: -10;}
100% {transform: perspective(400px) translate(0) scale(1) rotateY(0deg);
z-index: 0}
}
</style>
很美的。 亚伦这个页面打开有提示，而且加分也是一样，不点击还不让看{:4_170:} 精美的效果，这个好像是黑黑分享的过的千灯展卷效果吧，特别的漂亮 亚伦可以把这个提示去了吗？回帖和看帖好麻烦，不点击不让回帖
https://pic.imgdb.cn/item/65e0788b9f345e8d035403fd.png 这个泡泡的粒子好漂亮呢，欣赏亚伦老师好帖{:4_187:} 特效精彩{:4_199:} 欣赏好制作，感谢分享{:4_187:} 欣赏老师的精美音画，请老师能够教教我们，为什么你的代码到离退休论坛发表同步歌词就不显示，谢谢！
粒子加载在了body元素，应加载在帖子 id="papa" 的元素里。
JS代码中有一个变量 pa，这个变量定义给了body元素，papa 才是帖子父元素的id 以下代码基于本帖修改前的某一时段的代码，主要是梳理和格式化一下代码样式，修改极少量关键性错误（有注释）：
<style>
#papa {
position: relative;
width: 1164px;
height: 620px;
background: #000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center/cover;
display: grid;
place-items: center;
overflow: hidden;
margin-top: 150px;
margin-left: -300px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;
z-index: 123456;
}
audio {
position: absolute;
top: 580px;
z-index: 50;
width: 98%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background: transparent;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
/* 滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637（CSS注释不能用 //） */
border-radius: 4px;
}
audio::-webkit-media-controls-current-time-display {
order: 1; /* 设置弹性盒对象元素的顺序 */
color: #ffffff;
text-shadow: unset;
}
audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}
#lrc {
left: 10%;
top: 75%;
}
#lrcc {
left: 90%;
transform: translate(-102%);
top: 85%;
}
#lrc,
#lrcc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(89deg, #EE0000 12%, #078504 35%, #060344 65%, #DE0000 90%);
border: 0px solid black;
position: absolute;
z-index: 6;
font: normal 3em '华文新魏'; /* 中文字体要用引号 */
color: #222222;
white-space: pre;
-webkit-background-clip: text;
/* 多重 drop-shadow 正确写法如下 */
filter: drop-shadow(1px 0 0 #ffffff) drop-shadow(0 1px 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 -1px 0 #ffffff);
z-index: 15;
}
#lrcc::before,
#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);
}
}
.cemp {
z-index: 5;
width: 1164px;
position: absolute;
left: 140px;
top: 23%;
margin: 0px auto;
}
.box {
z-index: 5;
position: relative;
width: 300px;
height: 220px;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 5px #D2691E;
}
.box:nth-child(1) {
background: url(https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg)no-repeat center/cover;
left: 0px;
top: 0px;
position: absolute;
animation: moveo 3s 2.25s infinite;
}
.box:nth-child(2) {
left: 0px;
top: 0px;
position: absolute;
background: url(https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg)no-repeat center/cover;
animation: moveo 3s 1.5s infinite;
}
.box:nth-child(3) {
left: 0px;
top: 0px;
position: absolute;
background: url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover;
animation: moveo 3s 0.75s infinite;
}
.box:nth-child(4) {
left: 0px;
top: 0px;
position: absolute;
background: url(https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg)no-repeat center/cover;
animation: moveo 3s infinite;
}
.stop .box:nth-child(1),
.stop .box:nth-child(2),
.stop .box:nth-child(3),
.stop .box:nth-child(4) {
animation-play-state: paused;
}
@keyframes moveo {
0% {
transform: perspective(400px) translate(0) scale(1) rotateY(0deg);
z-index: 0;
}
25% {
transform: perspective(400px) translate(300px) scale(1.5, 1.5) rotateY(50deg);
z-index: 10;
}
50% {
transform: perspective(400px) translate(600px) scale(1) rotateY(0deg);
z-index: 0;
}
75% {
transform: perspective(1200px) translate(300px) scale(.5, .5) rotateY(-50deg);
z-index: -10;
}
100% {
transform: perspective(400px) translate(0) scale(1) rotateY(0deg);
z-index: 0
}
}
li-zi {
z-index: 6;
margin: 400px auto;
position: absolute;
background: url('https://pic.imgdb.cn/item/65bf44e6871b83018a0bba00.png')0 0/cover;
offset-path: path('M0 400 Q570 -260 1140 400');
offset-distance: 0;
animation: move 10s linear infinite var(--state), rotating 5s infinite var(--state);
}
@keyframes move {
to {
offset-distance: 100%;
filter: hue-rotate(360deg)contrast(100%)brightness(150%);
}
}
</style>
<!-- 留意HTML代码的格式化，歌词标签可以不纳入帖子标签 -->
<div id="papa">
<div class="cemp" id="testImg">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<!-- 这行应删掉 div id="body"><li-zi></li-zi></div -->
<audio id="aud" loop controls>
<source src="https://mp3.t57.cn:7087/kwlink_d.php?id=273761272" type="audio/mp3" />
</audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<span id="lrcStr" style="visibility: hidden;">
别再说我们只是过客
演唱：梅朵
作词：宋立国
作曲：徐青春
编曲：闫石
和声：凌菲
混音：王宇鹏
制作：亚伦影音工作室
发行：亚伦传媒
我曾用心为你付出过
小心翼翼不让你难过
在岁月的长河相遇你和我
我想陪你沐浴着爱河
只怪时间让人难琢磨
风风雨雨经不起坎坷
在人生的路上都有权选择
心碎的我却无可奈何
别再说我们只是过客
别再说这一切没结果
既然相爱过真心付出了
滚滚的红尘相遇多难得
别再说我们只是过客
别再说这都是谁的错
许下的承诺如花瓣凋落
我不想今生与你擦肩过
只怪时间让人难琢磨
风风雨雨经不起坎坷
在人生的路上都有权选择
心碎的我却无可奈何
别再说我们只是过客
别再说这一切没结果
既然相爱过真心付出了
滚滚的红尘相遇多难得
别再说我们只是过客
别再说这都是谁的错
许下的承诺如花瓣凋落
我不想今生与你擦肩过
许下的承诺如花瓣凋落
我不想今生与你擦肩过
</span>
<!-- 下面的JS代码统一放在一组 script标签里，具体代码仍有整合空间 -->
<script>
let autoplayPromise = aud.play(); // 命令video播放并获取Promise对象
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
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) => {
lrca=lrcAr;
lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
let Y=String(mKey/2).indexOf(".");
if (Y == -1)
{
0==mKey&&(lrc.innerHTML=lrca);
lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
lrcc.dataset.lrc = "";
lrc.style.setProperty('--motion', 'cover1');
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
}
else
{
lrc.innerHTML = lrcb;
lrcc.dataset.lrc = lrca;
lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
lrcc.style.setProperty('--tt', time + 's');
lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
}
mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","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.innerHTML); /*获得歌词数组*/
})();
var pa= document.querySelector('body');
var mState = () => aud.paused ?
(papa.style.setProperty('--state', 'paused')) :
(papa.style.setProperty('--state', 'running'));
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
Array.from({length: all=40}).forEach(star => {
var size = 20 + Math.floor(Math.random() * 30);
star = document.createElement('li-zi');
star.style.cssText += `
left: 0;
top: ${Math.random() * 140 + 60}px;
width: ${size}px;
height: ${size}px;
opacity: ${Math.random() * 0.4 + 0.4 };
animation-delay: -${Math.random() * 10}s, -${Math.random() * 5}s;
`;
papa.prepend(star);
});
</script>
马黑黑 发表于 2024-3-2 20:07
以下代码基于本帖修改前的某一时段的代码，主要是梳理和格式化一下代码样式，修改极少量关键性错误（有注释 ...
一目了然的代码，{:4_187:} 亚伦影音工作室 发表于 2024-3-2 20:45
一目了然的代码，
梳理一下而已。很多编辑器都自带这个工具
页:
[1]