我多想有人能把我牵挂【珍藏影音】
本帖最后由 亚伦影音工作室 于 2026-8-25 12:10 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#pa {
margin: 20px -320px;
width: 1282px ;
height: 740px;
border: 1px solid gray;
display: grid;overflow: hidden;
place-items: center;background: url(https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg)no-repeat;
position: relative;background-size: cover;font-family:"Ma Shan Zheng", "悟空大体库","SimHei", "Arial", "sans-serif";
}
#picc {z-index: 5;
top:0%; left:0%;
position: absolute;
width: 1182px; height: 620px;
background: url(https://pic.imgdb.cn/item/675cf3c3d0e0a243d4e3c992.jpg)no-repeat0px 0px/17730px 620px;
animation: mheart steps(15) 2s infinite ;
mix-blend-mode: lighten;
}
@keyframes mheart {
0% {background-position: 0px 0;}
100% {background-position: -17730px 0;}
}
#vid {width: 100%; height: 100%; z-index: 4;
position:absolute;
top:0%; left:0%;-webkit-mask-image: radial-gradient(black 15% ,transparent 85%);
object-fit: cover; pointer-events: none;
}
#intro {margin: 0px0px;z-index:3;
width: 100%;
height:100%;
position: absolute;
background:#220080;
background-size: cover;
opacity:1;
animation: hue-rotate 6s linear infinite ;
}
@keyframes hue-rotate {
0%{
filter: hue-rotate(-360deg);
}
100%{
filter: hue-rotate(360deg);
}
}
.mnBox {display: none;
top: 0px;
position:absolute;
z-index: 5;
height:100%;
width: 100%;
left:0px;overflow: hidden;
}
.rain {
width: 1px;
height: 8px;
top: -20px;
left: 400px;
background: #eee;
position: relative;
display: block;
animation: rain 0.5s linear infinite;
}
.rain::before, .rain::after{
content: "";
position: absolute;
left: 10px;
top: -120px;
width: 1px;
height: 18px;
background: #eee;
}
.circle {
position:absolute;
width: 3px;
height: 1px;
left: 85px;
top: 90%;
background:none;
border: 1px solid #FFF;
border-radius: 50%;
animation:circle 2s ease-out infinite;
}
@keyframes circle {
0% { width:0; height:0; }
50% { opacity:0.1; width:2%; height:2%; }
60% { opacity:0.2; width:2%; height:2%; }
100% { opacity:0; width:2%; height:2%; }
}
@keyframes rain {
0% { opacity:0.5; }
100% { opacity:0.5; top:40%;}
}
#player {position:absolute;bottom: 30%;z-index: 101;
left: 81%;
width: 120px;
height: 120px;
display: grid;
place-items: center;
cursor:pointer;
animation: rot 8s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
display: grid;
place-items: center;
width:12%;
height: 40%;
clip-path: polygon(0 0, 50% 5%, 100% 0, 50% 50%, 100% 100%, 50% 95%, 0 100%, 50% 50%, 0 0);
}
#rect:nth-of-type(1) { background:#5500ff;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#00aa00;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
#ptxt{width:100%;height:6px;font:100 20px/0px "华文行楷","SimHei", "Arial", "sans-serif";color: #fff;line-height:0px;bottom: 32%;left:84%;position: absolute;z-index: 6}
#prog {position: absolute; display: grid; place-items: center; width: 215px; height: 115px; left:77%; bottom: 30%;border-radius: 80%;-webkit-mask: radial-gradient( transparent 67%, #000 68%, #000 0);cursor:pointer; z-index: 100;}
.start{color: #fff;position: absolute; bottom: 38%; left: 79%;;z-index: 9;font:100 20px/0px "华文行楷","SimHei", "Arial", "sans-serif";}
.end{color: #fff;position: absolute;bottom: 38%; left: 89%;;z-index: 9;font:100 20px/0px "华文行楷","SimHei", "Arial", "sans-serif";}
#main {z-index: 6;
position: absolute;
overflow: hidden;display: none;
width: 100%;height:100%;
min-height: 98vh;margin: 0px 0px;
perspective: 340px;
}
#stars {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;
box-shadow: -238px 108px #f7f7f7, 193px -376px #f7f7f7, -1264px -60px #fafafa,
145px -443px #c9c9c9, -1440px 37px #f7f7f7, 262px -136px #cfcfcf,
212px 219px #e3e3e3, 319px 223px #c7c7c7, 1246px -51px #c9c9c9,
308px 26px #e0e0e0, 147px 229px #e6e6e6, -1041px 450px #d1d1d1,
671px 86px white, -921px 234px #f0f0f0, -957px 242px #e8e8e8,
1249px -285px #d1d1d1, 741px 434px #d9d9d9, -1030px 330px #ededed,
311px -475px #fcfcfc, -413px -105px #d4d4d4, 868px -435px #f7f7f7,
-790px 289px #dbdbdb, 202px 427px #fcfcfc, -22px -158px #c9c9c9,
-1294px -297px #cccccc, -63px 200px #f0f0f0, -592px -86px #f7f7f7,
-732px 366px white, -1426px -262px #e8e8e8, 475px -400px #c9c9c9,
-1442px -153px #f7f7f7, 1124px -219px #ededed, 701px 257px #f0f0f0,
36px -179px #ebebeb, -937px 480px #f7f7f7, -267px -418px #f2f2f2,
1467px 127px #cfcfcf, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,
624px 275px #fafafa, -473px 150px #e6e6e6, -537px -348px #d4d4d4,
410px 455px #ebebeb, 497px -29px #cccccc, 416px -370px whitesmoke,
977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,
-1049px 409px white, 959px 407px #c9c9c9, -1153px -168px #dedede,
-437px -216px #dbdbdb, -572px 420px #fcfcfc, -228px 78px #dbdbdb,
-925px 452px #cccccc, 244px 30px #c4c4c4, 453px -336px #dedede,
993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #fcfcfc,
-170px -153px #c4c4c4, 987px -208px #d1d1d1, 596px 166px #fcfcfc,
-1362px -28px #c4c4c4, 1291px -106px #e3e3e3, -1128px 169px #ededed,
1056px 367px #ebebeb, 261px -128px #cccccc, 1017px 401px #cccccc,
1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3,
1481px 268px #d1d1d1, 832px -345px #cccccc, -863px 138px #f0f0f0,
-997px -412px #e3e3e3, -330px -260px #d9d9d9, 691px -39px #fcfcfc,
-468px -135px #d6d6d6, -535px 405px #e8e8e8, -1289px -284px #e3e3e3,
823px -225px #cccccc, -1172px -348px white, 505px -319px #ededed,
94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #f2f2f2,
1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white,
1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #fafafa,
205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #f0f0f0,
649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9,
-1405px 397px #cfcfcf, 30px -81px #e6e6e6;
animation: fly 3s linear infinite ;
transform-style: preserve-3d;
}
#stars:before,
#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:before {
transform: translateZ(-300px);
animation: fade1 3s linear infinite ;
}
#stars:after {
transform: translateZ(-600px);
animation: fade2 3s linear infinite;
}
@keyframes fly {
from {
transform: translateZ(0px);
}
to {
transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
}
@keyframes fade2 {
from {
opacity: 0;
}
to {
opacity: 0.5;
}
}
#wrapper {z-index: 9;
position: absolute;
padding: 0px 0px; color: #00aa00;
font:normal 3em "Ma Shan Zheng", "悟空大体库","SimHei", "Arial", "sans-serif";
filter: drop-shadow(#000 1px 0 0) drop-shadow(#000 0 1px 0) drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px 0);
text-align: center; top: 80%;
}
.char {
display: inline-block;
padding: 4px 3px;
opacity: 0;color: #00aa00;
transform: translate(var(--x), var(--y));
animation: fadeIn 1.5s var(--delay) forwards, flash 1s infinite alternate;
}
@keyframes fadeIn {
to {
transform:scale(1);
opacity: 1;
}
}
@keyframes flash {
to { filter: hue-rotate(360deg)brightness(120%)contrast(650%); }
}
#g,#c,#b,#fullscreen{border-radius: 4px;position:relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;z-index: 120;width: 40%;
height: 20%;
font-size: 14px;
border: none;
cursor: pointer;
}
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3391656211.MP3" loop autoplay></audio>
<divclass="mnBox" id="mnBox" ><span class="rain"></span>
<span class="circle"></span></div>
<span class="start">00:00</span> <div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<span class="end">00:00</span>
<div id="ptxt">正在播放 0%</div>
<divid="prog"></div>
<div class="wra"id="wrapper"></div>
<div id="intro"><video id="vid" src="https://alimov2.a.kwimgs.com/upic/2026/02/13/13/BMjAyNjAyMTMxMzM1MzVfMTU1NzU0OTY1OF8xODc3MTM5NTc3MzhfMl8z_b_Bf48877c93f6afc3bf0e291346fe6aeca.mp4" autoplay loop muted></video></div>
<div id="picc" ></div>
<div id="main">
<div id="stars"></div>
</div>
<div style="position: absolute;top:4%;left: 72%;">
<span id="c" title="歌词模式">竖列歌词</span>
<span id="g" title="雨/雪模式">下雨效果</span>
<span id="b" title="粒子模式">粒子效果</span>
<span id="fullscreen">全屏观赏</span>
</div>
</div>
<script>
const gc = `《我多想有人能把我牵挂》
作词：诚子
作曲：舟木楼
演唱：麻山娘
编辑制作：亚伦
当我喝醉时谁能带我回家
当我难过时谁能打个电话
当我想哭时谁能把眼泪擦
当我落难时谁能说还有他
当我孤独时谁能陪我说话
当我生病时谁能守在床榻
当我迷茫时谁能为我解答
当我失败时谁能说别害怕
我多想有个人能把我牵挂
问一问我最近过的还好吗
可我的心酸只能自己消化
连一条朋友圈都不敢发
我也想有一个声音能回答
告诉我一切都会变好的
可我已经快被生活给压垮
牵挂我的人还会出现吗
当我孤独时谁能陪我说话
当我生病时谁能守在床榻
当我迷茫时谁能为我解答
当我失败时谁能说别害怕
我多想有个人能把我牵挂
问一问我最近过的还好吗
可我的心酸只能自己消化
连一条朋友圈都不敢发
我也想有一个声音能回答
告诉我一切都会变好的
可我已经快被生活给压垮
牵挂我的人还会出现吗
`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, gap);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? -350 : 350);
const y = Math.random() * (Math.random() > 0.5 ? -350 : 350);
span.style.cssText += `
color: #${Math.random().toString(16).substring(8,2)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>
<script>
var wrapper=document.getElementById("wrapper");
const wra= document.querySelector('.wra');
var writingmode=document.getElementById("writing-mode");
var writingspace=document.getElementById("white-space");
var texalign=document.getElementById("center");
let fsa = true;
c.onclick = () => {
if (fsa) {c.innerText = '横列歌词';
wra.style.width= '60px'; wra.style.height= '90%'; wra.style.top= '0%'; wra.style.left= '8%';
wra.style.writingmode= 'vertical-lr'; wra.style.writingspace= 'pre';wra.style.transform= 'scale(0.8)';
wra.style.display = 'block';
wrapper.display = 'none';
}else {c.innerText = '竖列歌词';
wrapper.style.transform= 'scale(1.2)';wrapper.style.top= '80%';wrapper.style.width= '100%'; wrapper.style.left= '0%';
wra.style.display = 'none';
wrapper.style.display = 'block';
}
fsa = !fsa;
};
var pc=document.getElementById("picc");
const yu = document.querySelector('.mnBox');
let fs = true;
g.onclick = () => {
if (fs) {g.innerText = '下雪效果';
pc.style.display = 'none';
yu.style.display = 'block';
main.style.display = 'none';
}else {g.innerText = '下雨效果';
pc.style.display = 'block';
yu.style.display = 'none';
main.style.display = 'none';
}
fs = !fs;
};
let fsb = true;
b.onclick = () => {
if (fsb) {b.innerText = '粒子效果';
pc.style.display = 'none';
yu.style.display = 'none';
main.style.display = 'block';
}
fsb = !fsb;
};
let fss = true;
fullscreen.onclick = () => {
fss ? (fullscreen.innerText = '退出全屏', pa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fss = !fss;
};
player.onclick = () => aud.paused ? (aud.play(),vid.play(),player.style.animationPlayState = 'running',picc.style.animationPlayState = 'running',intro.style.animationPlayState = 'running',stars.style.animationPlayState = 'running',raindrops.forEach( drop => {drop.style.animationPlayState='running'}) , rainpops.forEach( pop => {pop.style.animationPlayState='running'})) :( aud.pause(),vid.pause(),player.style.animationPlayState = 'paused',picc.style.animationPlayState = 'paused',intro.style.animationPlayState = 'paused',stars.style.animationPlayState = 'paused',raindrops.forEach( drop => {drop.style.animationPlayState='paused'}) , rainpops.forEach( pop => {pop.style.animationPlayState='paused'}));
prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
deg += (e.offsetX < 10 && e.offsetY < 50) ?450 : 90;
aud.currentTime = aud.duration * deg / 360;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from 0deg,#ff0000,#ff0000,#ff0000 ' + aud.currentTime / aud.duration * 100 + '%, #fff 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' 00:00|00:00 ' + toMin(aud.duration);
});
aud.addEventListener("timeupdate",function(){
var percent= aud.currentTime / aud.duration
var sp = 600 / 100 ;
var swidth =(percent * 100 * sp) + "px";
console.log(percent*100,swidth)
//保留2位小数
document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
})
const start = document.querySelector('.start')
const end= document.querySelector('.end')
function conversion (value) {
let minute = Math.floor(value / 60)
minute = minute.toString().length === 1 ? ('0' + minute) : minute
let second = Math.round(value % 60)
second = second.toString().length === 1 ? ('0' + second) : second
return `${minute}:${second}`
}
aud.onloadedmetadata = function () {
end.innerHTML = conversion(aud.duration)
start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
start.innerHTML = conversion(aud.currentTime)
}, 1000)
function rain() {
var str = "";
for(i=0; i<80; i++) {
var l = Math.ceil(Math.random()*1286);
str += "<span class='rain' style='left:" + l +"px;'></span>";
}
for(j=0;j<100; j++){
var k1 = Math.ceil(Math.random()*100);
var k2 = Math.round(Math.random()*30+70);
str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
}
document.getElementById('mnBox').innerHTML += str;
}
rain();
let raindrops = mnBox.querySelectorAll('.rain');
let rainpops = mnBox.querySelectorAll('.circle');
</script>
欣赏这五彩缤纷的精美制作，问好亚伦朋友。 漂亮的歌词同步和进度效果，还有那么多展示效果可切换，真的太美了。
欣赏亚伦老师好帖{:4_199:} 精彩的音画制作，还能变换不同的画面效果，真棒！{:4_178:} 好听好看，谢谢亚伦老师精彩分享{:4_190:}
页:
[1]