牧羊曲【雷鬼版】
本帖最后由 亚伦影音工作室 于 2026-5-27 09:54 编辑 <br /><br /><div id="papa"><video id="vid" src="https://upfile.mp3.wf/view.php/ef2df861051854548fd82ab073d8b7d6.mp4" loop muted autoplay=""></video>
<div id="testImg" >
<div id="wrapper"></div>
</div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<audio id="aud" src="https://upfile.mp3.wf/view.php/f4e253a343da93e7e26b632f15d8777b.mp3"autoplay loop > </audio>
</div>
<style>
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa { margin: 10px -300px ; width: 1186px; height: 620px;background:#800000; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #800000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;border-radius: 0px 0px;--state: running;/* 示例混合模式 */}
#vid{width: 100%; height: 100%;z-index: 2;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
#wrapper {
position: absolute;
padding: 10px;
font-weight:800;font-size:3.5em;font-family:"Long Cang", "KaiTi","Liu Jian Mao Cao","ZCOOL QingKe HuangYou","STKaiti","SimHei", cursive, serif;
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);
width: 50%;height:90px;left: 50%;transform: translateX(-50%);z-index: 12;text-align: center;
top: 80%;white-space: nowrap;
}
.char {
display: inline-block;
padding: 6px 8px;
opacity: 0;
transform: translate(var(--x), var(--y))rotate(-720deg) ;
animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;
}
@keyframes fadeIn {
100% {
transform: translate(-50%, 0)rotate(0deg);
opacity: 1;
}
}
@keyframes flash {
100% {filter: hue-rotate(360deg)brightness(100%)contrast(120%);}
}
.stop .char{animation-play-state: paused;}
#player {position:absolute;top: 4%;z-index: 98;
left: 85%;
width: 120px;
height: 120px;
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:#880000;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#eee;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px; bottom:22px; cursor: pointer;right:94%;z-index: 140;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<script>
player.onclick = () => aud.paused ? (aud.play(),vid.play(),player.style.animationPlayState = 'running',image.classList.remove('stop')) : (aud.pause(),vid.pause(),player.style.animationPlayState = 'paused',image.classList.add('stop'));
image=document.getElementById('testImg');
let fs= true;
fullscreen.onclick = () => {
fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
fs = !fs;
}
</script>
<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, 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 ? 800 : -800);
const y = Math.random() * (Math.random() > 0.1 ? 0 : -500);
span.style.cssText += `
color: #${Math.random().toString(11).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>
https://www.oldkids.com.cn/upload/2023/07/07/vedio_260855907_20230707055343641.mp4 亚伦影音工作室 发表于 2026-5-26 21:44
https://www.oldkids.com.cn/upload/2023/07/07/vedio_260855907_20230707055343641.mp4
亚伦的每一幅作品都让人拍案叫绝。 欣赏老师的佳作，晚上好！
页:
[1]