与你走过的老路【同名曲】
本帖最后由 亚伦影音工作室 于 2025-12-9 13:04 编辑 <br /><br /><style>#pa {
margin: 20px -320px;
width: 1286px ;
height: 700px;
border: 1px solid gray;
display: grid;overflow: hidden;
place-items: center;background: url(https://pic1.imgdb.cn/item/692e211611af9ce9c3e936f1.png) no-repeat center/cover;
position: relative;
}
#background{
width: 100%; height: 100%;
background: url("https://img-baofun.zhhainiao.com/fs/4a5f116d770d75d2ec29f81b602fab60.jpg")no-repeat;
position: absolute;
top: 0px;
left: 0px;
animation: c 12s linear infinite;
background-size: cover;
}
@keyframes c {
from{transform: scale(1);
}
50%{transform: scale(1.3);
}
to{transform: scale(1.3);
}
}
#canv { position: absolute; width: 100%; height: 100%;opacity: 0.5; }
#player {position:absolute;top: 60%;z-index: 99;
left: 70%;
width: 300px;
height: 300px;
display: grid;
place-items: center;
animation: rot 8s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
width: 30%;
height: 30%;
display: grid;
place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);
}
#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);
}
#wrapper {z-index: 9;
position: absolute;
padding: 10px;
;font:normal 3.5em 华文隶书;
filter: drop-shadow(#000 1px 1px 1px) ;
bottom: 320px;
}
.char {
display: inline-block;
padding: 0 2px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 1.5s var(--delay) forwards, flash 0.5s infinite alternate;
}
audio { position: absolute; left: 160px; top: 20px; }
@keyframes fadeIn {
to {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes flash {
to { filter: hue-rotate(360deg); }
}
#fullscreen {border-radius: 4px;position: absolute;background:#0000 ;
color:#fff;box-shadow:0px 0px 0px 1px #fff;z-index: 20;
padding: 4px 10px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 90%;top: 3%;
}
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=3317659215.mp3" loop autoplay></audio>
<div class="wall" id="background"></div>
<canvas id="canv"></canvas>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<div id="wrapper">与你走过的老路</div>
<span id="fullscreen" title="屏展模式">全屏欣赏</span>
</div>
<script>
const gc = ` 《与你走过的老路》
作词：许玲玲
作曲：许玲玲
演唱：许玲玲
LRC歌词编制：亚伦影音工作室
晚风漫过巷口吹过你的脸
影子跟着脚步 叠了又几圈
你曾把我手 攥在你掌心间
说这条路 要走满岁岁年年
许多年后街景 换了新容颜
可是你不在我的身边
想念总让我在 深夜辗转难眠
是否我们今生注定无缘
想回到那条老路上和你慢慢走
再听你说那句“等我好久”
当风吹过落叶飘满肩头 我才懂
原来最珍贵是你给的细水长流
许多年后街景 换了新容颜
可是你不在我的身边
想念总让我在 深夜辗转难眠
是否我们今生注定无缘
想回到那条老路上和你慢慢走
再听你说那句“等我好久”
当风吹过落叶飘满肩头 我才懂
原来最珍贵是你给的细水长流
就算世界在变 你仍是我的温柔`;
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, time);
}
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 ? 300 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
span.style.cssText += `
color: #${Math.random().toString(16).substring(2,8)};
--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>
(function main() {
let canv = document.getElementById('canv');
let ctx = canv.getContext('2d');
canv.width = canv.clientWidth;
canv.height = canv.clientHeight;
let dropList = [], linelist = [], mousePos = ;
let gravity = 0.5, mouseDis = 35, lineNum = 20, speedx = 0, maxspeedx = 0;
window.onmousemove = function (e) {
mousePos = e.clientX - offset(papa).x;
mousePos = e.clientY - offset(papa).y;
maxspeedx = (e.clientX - canv.clientWidth / 2) / (canv.clientWidth / 2);
}
function createLine(e) {
let temp = 0.25 * (50 + Math.random() * 100);
let line = {
speed: 5.5 * (Math.random() * 6 + 3),
die: false,
posx: e,
posy: -50,
h: temp,
corlor: '#eee'
};
linelist.push(line);
}
function createDrop(x, y) {
let drop = {
die: false,
posx: x,
posy: y,
vx: (Math.random() - 0.5) * 8,
vy: Math.random() * (-6) - 3,
radius: Math.random() * 1.5 + 1
};
return drop;
}
function madedrops(x, y) {
let maxi = Math.floor(Math.random() * 5 + 5);
for (let i = 0; i < maxi; i++) {
dropList.push(createDrop(x, y));
}
}
window.requestAnimationFrame(update);
function update() {
if (dropList.length > 0) {
dropList.forEach(function (e) {
e.vx = e.vx + (speedx / 2);
e.posx = e.posx + e.vx;
e.vy = e.vy + gravity;
e.posy = e.posy + e.vy;
if (e.posy > canv.clientHeight) {
e.die = true;
}
});
}
for (let j = dropList.length - 1; j >= 0; j--) {
if (dropList.die) {
dropList.splice(j, 1);
}
}
speedx = speedx + (maxspeedx - speedx) / 50;
for (let i = 0; i < lineNum; i++) {
createLine(Math.random() * 2 * canv.width - (0.5 * canv.width));
}
let endLine = canv.clientHeight - Math.random() * canv.clientHeight / 5;
linelist.forEach(function (e) {
let dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos) * ((e.posx + speedx * e.h) - mousePos) + (e.posy + e.h - mousePos) * (e.posy + e.h - mousePos));
if (dis < mouseDis) {
e.die = true;
madedrops(e.posx + speedx * e.h, e.posy + e.h);
}
if ((e.posy + e.h) > endLine) {
e.die = true;
madedrops(e.posx + speedx * e.h, e.posy + e.h);
}
if (e.posy >= canv.clientHeight) {
e.die = true;
} else {
e.posy = e.posy + e.speed;
e.posx = e.posx + e.speed * speedx;
}
});
for (let j = linelist.length - 1; j >= 0; j--) {
if (linelist.die) {
linelist.splice(j, 1);
}
}
render();
window.requestAnimationFrame(update);
}
function render() {if(!aud.paused){
ctx.fillRect(0, 0, canv.width, canv.height);
ctx.lineWidth = 1;
linelist.forEach(function (line) {
ctx.strokeStyle = line.color;
ctx.beginPath();
ctx.moveTo(line.posx, line.posy);
ctx.lineTo(line.posx + line.h * speedx, line.posy + line.h);
ctx.stroke();
});
ctx.lineWidth = 0.5;
ctx.strokeStyle = "#fff";
dropList.forEach(function (e) {
ctx.beginPath();
ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI);
ctx.stroke();
});
}
}
function offset(e) {
let x = e.offsetLeft, y = e.offsetTop, pa = e.offsetParent;
while(pa != null) {
x += pa.offsetLeft;
y += pa.offsetTop;
pa = pa.offsetParent;
}
return {x, y};
}
})();</script>
<script>
let fs = true;
fullscreen.onclick = () => {
if (fs) {
fullscreen.innerText = '退出全屏';
pa.requestFullscreen();
} else {
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',background.style.animationPlayState = 'running') :( aud.pause(),player.style.animationPlayState = 'paused',background.style.animationPlayState = 'paused');
</script> 亚纶这个效果制作的漂亮，特别这个雨效果{:4_199:} 漂亮~谢谢亚伦老师精彩分享{:4_191:} 这次亚纶也是把全屏去了，昨天我测试玩一个，这个全屏就是弄不好{:4_170:} 欣赏亚纶精彩的制作{:4_187:} 漂亮。欣赏亚伦老师精彩制作{:4_199:} 小辣椒 发表于 2025-12-8 21:12
这次亚纶也是把全屏去了，昨天我测试玩一个，这个全屏就是弄不好
已经设置全屏了！
页:
[1]