游牧时光
本帖最后由 杨帆 于 2026-4-8 21:26 编辑 <br /><br /><!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>游牧时光</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#pa{position:relative;margin:30px 0 0 calc(50% - 81px);transform:translateX(-50%);width:clamp(600px,90vw,1400px);min-height:80vh;aspect-ratio:16/9;border-radius:20px;box-shadow:3px 3px 6px gray;overflow:hidden;z-index:1;background: #000 url('https://s41.ax1x.com/2026/04/04/petYkEd.jpg') no-repeat center/cover;display:grid;place-items:center; user-drag: none; user-select: none;--state:running;}
#content { position:absolute; text-align:center; z-index:5;width:60%;height:auto; top:2%;left:25%; }
ruby { font-size:clamp(2rem,6vw,4rem); letter-spacing:clamp(20px,15vw,25px); color:DeepPink; white-space:pre-wrap; font-family:"Ma Shan Zheng","SimHei",cursive; user-select:none; user-drag: none; text-shadow:1px 1px 2px rgba(0,0,0,0.1);animation: colorRotate 2s linear infinite var(--state); }
rt { font-size:.8em; padding:8px 0; letter-spacing:2px; color:#6495ED; font-family:"STSong","SimSun",serif;animation:flash 1s infinite alternate var(--state); }
.pinyin-line { display:block; margin:15px 0; }
#wrapper{position:absolute; white-space: nowrap;padding:2%;font:bold 2.8em/1.2 "Ma Shan Zheng",华文楷体;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);top:10%;right:5%;z-index:5;white-space:pre;writing-mode:vertical-lr;letter-spacing:5px;}
.char{display:inline-block;padding:0 4px;opacity:0;transform:translate(var(--x),var(--y));animation: fadeIn 1.5s var(--delay) forwards var(--state), flash 1s infinite alternate var(--state);}
@keyframes fadeIn{to{transform:translate(0,0);opacity:1;}}
@keyframes flash {to { filter: hue-rotate(360deg); }}
#mplayer{position:absolute;text-align:center;top:95%;transform:translate(-50%);left:50%;z-index:60;color:#ffffff;}
#mplayer::before{position:absolute;content:attr(data-tt);left:0;bottom:25px;width:100%;text-align-last:justify;}
#mprog{width:600px;height:2px;accent-color:#FF1493;outline:none;cursor:pointer;}
#btnplay{position:absolute;width:60px;height:60px;left:42%;top: 95%;cursor:pointer;animation:rotating 6s infinite linear var(--state);margin:-70px 0px;border-radius:50px;}
@keyframes rotating{0%{transform:rotate(-90deg);}25%{transform:rotate(0deg);}50%{transform:rotate(90deg);}75%{transform:rotate(0deg);}100%{transform:rotate(-90deg);}}
#btnplay:hover { filter: unset !important;}
#fullscreen{position:absolute;top:30px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:10;}
#fullscreen:hover{font-style:italic;}
.vid{position: absolute; right: 0px; bottom: 1%;width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0.9; mix-blend-mode: screen;clip-path:inset(75% 0px 12% 0px); z-index: 5; }
#vid1,#vid2 {position: absolute;width: 437px;height: 270px;left: 1%;top: 2%;object-fit: cover;border: 3px solid #ddd;box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) inset;border-radius: 50%;cursor:pointer;opacity: .9;cursor:pointer;z-index:1;object-position: center;display:var(--display);}
#vid1{mix-blend-mode: screen;mask: linear-gradient(to bottom, red 60% ,transparent 61%,transparent);-webkit-mask: linear-gradient(to bottom, red 60% ,transparent 61%,transparent); mask-clip: content-box;-webkit-mask-clip: content-box; }
#vid2{transition:opacity .5s ease;animation:opa 10s infinite alternate linear var(--state);}
@keyframes opa{to{opacity:0;}}
.filtered-background {position: absolute;filter: url("#turbulence");height: 100%;width:100%;background: inherit;clip-path:inset(72% 0px 12% 0px);z-index: 3;}
.Reflection{ -webkit-box-reflect: below 5% linear-gradient(to right, transparent, rgba(3,3,3,.7) 70%);}
@keyframes colorRotate{to {filter: hue-rotate(270deg);}}
</style>
</head>
<body>
<div id="pa">
<div class="filtered-background"></div>
<svg>
<<filter id="turbulence" x="0%" y="70%" width="100%" height="10%">>
<feTurbulence id="ripples" numOctaves="5" seed="5" baseFrequency="0.04 0.07"></feTurbulence>
<feDisplacementMap scale="10" in="SourceGraphic"></feDisplacementMap>
<animate xlink:href="#ripples" attributeName="baseFrequency" dur="200s" keyTimes="0;0.5;1"
values="0.02 0.05;
0.04 0.07;
0.02 0.05;" repeatCount="indefinite"/>
</filter>
</svg>
<div class = "Reflection" id="content">游牧时光</div>
<div id="mplayer" data-tt="00:00 00:00">
<img id="btnplay" style="-webkit-mask-image:radial-gradient(circle,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 75%);mask-image:radial-gradient(circle,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 65%);" src="https://638183.freep.cn/638183/web/svg/6p.svg" alt=""/>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" /></div>
<span id="fullscreen">全屏欣赏</span>
<audio id="audio" src="https://www.kkkkmmmm.com/wj/237522/2026/04/04/fb32fd1c3d98789a0d755ae6d93c379b.mp3" loop autoplay></audio>
<div id="wrapper"></div>
<video class ="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8f4ab37a1.mp4" autoplay loop preload="auto" playsinline muted></video>
<video id="vid1" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1367115422.mp4" autoplay loop preload="auto" playsinline muted></video>
<video id="vid2" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/15b720059208924c8993570358afab98_preview.mp4" autoplay loop preload="auto" playsinline muted title="暂停"></video>
</div>
<script type="module">
import {html, selfPy} from 'https://638183.freep.cn/638183/web/py/pypro.js';
const addPinyin=()=>{
const contentElem=document.getElementById('content');
const originalText=contentElem.textContent.trim();
selfPy({般: 'bō',});
contentElem.innerHTML=html(originalText);
};
if(document.readyState==='loading'){
document.addEventListener('DOMContentLoaded',addPinyin);
}else{
addPinyin();
}
</script><script>
const pa = document.getElementById('pa');
const audio = document.getElementById('audio');
const wrapper = document.getElementById('wrapper');
const mplayer = document.getElementById('mplayer');
const mprog = document.getElementById('mprog');
const btnplay = document.getElementById('btnplay');
const fullscreen = document.getElementById('fullscreen');
const gc = `
游牧时光-天籁版
词：余启祥
曲：郑清林
演唱：齐旦布（斋啡）
我用我自己的流浪
换一个在你心里放马的地方
像那游牧的人们一样
把寂寞忧伤都赶到天上
我愿我所有的愿望
追随你走在每个迁徙的牧场
像我放过的马儿一样
让爱的旅途都沾满阳光
是你在我身上刻下游牧时光
我愿把心儿放在你的歌声飞翔
今夜对酒月亮
思恋风吹草浪
有你相守在身旁
我醉了又何妨
我愿我所有的愿望
追随你走在每个迁徙的牧场
像我放过的马儿一样
让爱的旅途都沾满阳光
是你在我身上刻下游牧时光
我愿把心儿放在你的歌声飞翔
今夜对酒月亮
思恋风吹草浪
有你相守在身旁
我醉了又何妨
有你相守在身旁
我醉了又何妨
`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
audio.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(audio.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
audio.onended = () => {
curkey = 0;
audio.play();
}
audio.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 (audio.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: hsl(${Math.floor(Math.random() * 360)}, 100%, 50%);
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
const vids = document.querySelectorAll(',.vid');
const svg = document.querySelector("svg");
var mState = () => {
pa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
vids.forEach( vid => audio.paused ? vid.pause() : vid.play());
vid1.style.setProperty('--display',audio.paused ? 'none':'block');
vid2.style.setProperty('--display',audio.paused ? 'none':'block');
audio.paused ? svg.pauseAnimations():svg.unpauseAnimations();
btnplay.title = audio.paused ? '播放' : '暂停';
};
audio.onplaying = audio.onpause = () => mState();
btnplay.onclick = () => {
audio.paused ? audio.play() : audio.pause();
};
vid1.onclick =vid2.onclick = () => btnplay.click();
var mseek = false;
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;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () =>audio.currentTime = mprog.value / mprog.max * audio.duration;
let fs = true;let fsTimer;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',pa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());fs = !fs;};
pa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => {
fullscreen.style.opacity = '0';
}, 3000);
});
document.addEventListener('fullscreenchange', () => {
fs = !document.fullscreenElement;fullscreen.innerText = fs ? '全屏欣赏' : '退出全屏';});
['contextmenu', 'dragstart','selectstart'].forEach(type =>
document.getElementById('pa').addEventListener(type, e => e.preventDefault()));
btnplay.onanimationiteration = () => btnplay.style.setProperty('filter',`hue-rotate(${30 + Math.random()*270}deg)`);
</script>
</body>
</html>
https://p3.itc.cn/q_70/images03/20210107/0089b9cbc10147aa8e81faefca5df582.gif 欣赏精彩制作，问好杨帆朋友。 特别喜欢的歌曲，欣赏扬帆的好制作！{:4_204:}{:4_190:}
漂亮，标色标题字，还带着拼音，倒影也漂亮。
非常赞的制作，欣赏杨帆好帖{:4_199:} 也曾年轻 发表于 2026-4-7 16:28
谢谢老师鼓励，祝开心{:4_190:} 梦油 发表于 2026-4-7 17:13
欣赏精彩制作，问好杨帆朋友。
谢谢梦兄鼓励，祝开心{:4_190:} 霜染枫丹 发表于 2026-4-7 19:19
特别喜欢的歌曲，欣赏扬帆的好制作！
谢谢枫丹老师鼓励，祝开心{:4_204:} 红影 发表于 2026-4-7 21:10
漂亮，标色标题字，还带着拼音，倒影也漂亮。
非常赞的制作，欣赏杨帆好帖
谢谢影子鼓励，祝开心{:4_204:} 杨帆 发表于 2026-4-7 23:12
谢谢梦兄鼓励，祝开心
杨帆朋友别客气。 来欣赏杨帆老师的精品佳作！
音画太棒了！
音画唯美
背景歌声动听
制作大气磅礴
音画合一，音乐与画面结合完美
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
期待杨帆老师佳作频出！
感谢杨帆老师带来的精彩，辛苦了！祝你开心幸福、阖家安康！ 偶然~ 发表于 2026-4-8 18:08
来欣赏杨帆老师的精品佳作！
谢谢偶然~鼓励，祝兄弟开心{:4_191:}
页:
[1]
2