与你走过的老路

亚伦影音工作室 发表于 2025-12-4 08:51

本帖最后由亚伦影音工作室于 2025-12-8 18:54 编辑 <br /><br /><style>
#pa {
margin: 20px -300px;
width: 1182px ;
height: 620px;
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;
}
zxx-slide {display: block;
z-index: 1;
width: 100%; height:105%;
position: absolute;
}
.zxx-slide-a {width: 100%; height: 100%;
position: absolute;
display: none;
}
.zxx-slide-a.in {
z-index: 1;
}
.zxx-slide-img { position: absolute;
height:100%;width: 100%;
display: block;}

.zxx-slide-index-x {
position: absolute;
left: 0px;bottom: 0px;
text-align: center;
font-size: 0;
z-index: 1;
}

@keyframes seed {
0%{--seed:0}1%{--seed:1}2%{--seed:2}3%{--seed:3}4%{--seed:4}5%{--seed:5}6%{--seed:6}7%{--seed:7}8%{--seed:8}9%{--seed:9}10%{--seed:10}11%{--seed:11}12%{--seed:12}13%{--seed:13}14%{--seed:14}15%{--seed:15}16%{--seed:16}17%{--seed:17}18%{--seed:18}19%{--seed:19}20%{--seed:20}21%{--seed:21}22%{--seed:22}23%{--seed:23}24%{--seed:24}25%{--seed:25}26%{--seed:26}27%{--seed:27}28%{--seed:28}29%{--seed:29}30%{--seed:30}31%{--seed:31}32%{--seed:32}33%{--seed:33}34%{--seed:34}35%{--seed:35}36%{--seed:36}37%{--seed:37}38%{--seed:38}39%{--seed:39}40%{--seed:40}41%{--seed:41}42%{--seed:42}43%{--seed:43}44%{--seed:44}45%{--seed:45}46%{--seed:46}47%{--seed:47}48%{--seed:48}49%{--seed:49}50%{--seed:50}51%{--seed:51}52%{--seed:52}53%{--seed:53}54%{--seed:54}55%{--seed:55}56%{--seed:56}57%{--seed:57}58%{--seed:58}59%{--seed:59}60%{--seed:60}61%{--seed:61}62%{--seed:62}63%{--seed:63}64%{--seed:64}65%{--seed:65}66%{--seed:66}67%{--seed:67}68%{--seed:68}69%{--seed:69}70%{--seed:70}71%{--seed:71}72%{--seed:72}73%{--seed:73}74%{--seed:74}75%{--seed:75}76%{--seed:76}77%{--seed:77}78%{--seed:78}79%{--seed:79}80%{--seed:80}81%{--seed:81}82%{--seed:82}83%{--seed:83}84%{--seed:84}85%{--seed:85}86%{--seed:86}87%{--seed:87}88%{--seed:88}89%{--seed:89}90%{--seed:90}91%{--seed:91}92%{--seed:92}93%{--seed:93}94%{--seed:94}95%{--seed:95}96%{--seed:96}97%{--seed:97}98%{--seed:98}99%{--seed:99}100%{--seed:100}
}
zxx-slide .in {
-webkit-mask: linear-gradient(to right, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
-webkit-mask-size: 50px;
mask: linear-gradient(to right, #000 calc(1% * var(--seed)), transparent calc(1% * var(--seed)));
mask-size: 50px;
animation: seed 1s;
}

#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 4em 华文隶书;
filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);

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); }
}
</style>

<div id="pa">
<audio id="aud" src="https://s2.cldisk.com/sv-w8/audio/64/06/55/1173813b72075fc166c110ce893bdfe3/audio.mp3" loop autoplay></audio>
<zxx-slide>
<div class="zxx-slide-x">
   <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic1.imgdb.cn/item/692e211611af9ce9c3e936f1.png"></p>
   <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic1.imgdb.cn/item/6930d4a8d5fdcd03ca9d195b.png"></p>
   <p class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic1.imgdb.cn/item/692e224511af9ce9c3e936fa.png"></p>


</div>
</zxx-slide>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<div id="wrapper">与你走过的老路</div>
</div>

<script>

const gc = `《与你走过的老路》咚可可
词曲：Yie
编曲：包晓牧
演唱：咚可可
歌词编辑：亦是金
出品亚伦影音工作室
风吹过了屋前的那片田野
白云悄悄跟着我走很远
青石小路弯弯绕过童年
每个笑声都藏在夏日的麦田
外面的世界
灯火太璀璨
越热闹越容易觉得孤单
想起你牵着我的那只手
带我看最简单的天空多暖
我想回到那条老路上慢慢走
再听一听树叶轻轻低声诉说
当我不再迷惘
心会知道哪儿
才是我真正的停靠
我想回到你在门前
等我的时侯
那微笑像春天把寒冷都带走
。。。。。。
哪怕世界再变
你依然是我永远回得去的温柔

-- 谢谢欣赏 --
`;

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>var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function (container) {
var timerSlide = null;
var indexSlide = 0;
container.addEventListener('mouseover', function () {
clearTimeout(timerSlide);
});
container.addEventListener('mouseout', function () {
clearTimeout(timerSlide);
funSlide();
});

var eleSlides = [].slice.call(container.querySelectorAll('p'));
var eleButtons = [].slice.call(container.querySelectorAll('button'));

eleButtons.forEach(function (button, index) {
['mouseover', 'click'].forEach(function (eventType) {
button.addEventListener(eventType, function () {
clearTimeout(timerSlide);
indexSlide = index;
funSlide();
});
});
});

eleSlides.forEach(function (slide, index) {
slide.addEventListener('animationend', function () {
eleSlides.forEach(function (slide2) {
if (slide2.classList.contains('in') == false) {
slide2.style.display = '';
}
});
});
});

var funSlide = function() {
eleSlides.forEach(function (slide, index) {if(!aud.paused){
if (indexSlide == index) {
slide.classList.add('in');
slide.style.display = 'block';
} else if (slide.classList.contains('in')) {
slide.classList.remove('in');
}
}});
eleButtons.forEach(function (button, index) {
button.classList.remove('active');
if (indexSlide == index) {
button.classList.add('active');
}
});

timerSlide = setTimeout(function () {
indexSlide++;
if (indexSlide == eleSlides.length) {
indexSlide = 0;
}
funSlide();
}, 6000);
}

indexSlide++;

setTimeout(funSlide, 2000);
});
player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running') :( aud.pause(),player.style.animationPlayState = 'paused');
</script>

偶然~ 发表于 2025-12-4 09:12

来欣赏亚伦影音工作室精品佳作！

偶然~ 发表于 2025-12-4 09:13

音画唯美

偶然~ 发表于 2025-12-4 09:13

背景歌曲动听

偶然~ 发表于 2025-12-4 09:13

制作大气

偶然~ 发表于 2025-12-4 09:13

太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然献花给你啦】

偶然~ 发表于 2025-12-4 09:13

期待亚伦影音工作室佳作频出！

偶然~ 发表于 2025-12-4 09:14

愿亚伦影音工作室事事如意吉祥，幸福快乐绵长。

偶然~ 发表于 2025-12-4 09:14

感谢亚伦影音工作室支持花潮论坛，辛苦了，祝您和家人岁岁安康，幸福吉祥！

杨帆发表于 2025-12-4 13:17

漂亮~谢谢亚伦老师精彩分享，祝开心{:4_191:}

页: [1]

花潮论坛's Archiver

与你走过的老路