驼铃
<style>#papa { margin: 10px -180px ; width: 1186px; height: 620px;background:#800000; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #800000; position: relative; z-index: 10000; overflow:hidden;border-radius: 0px 0px;--state: running;/* 示例混合模式 */}
#vid{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
#vid1{width: 100%; height: 100%;z-index: 2;
position:absolute;-webkit-mask-image: radial-gradient(farthest-corner at 5% -35%, black 55%, transparent 70%);
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
#wrapper {
position: absolute;
padding: 10px;
font-weight:100;font-size:2.6em;font-family: "华文隶书";
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);
writing-mode: vertical-lr;white-space: pre;transform: translateX(-50%);text-align: center;
width: 60px;height:90%;left: 8%;z-index: 120;
top: 2%;white-space: nowrap;
}
.char {
display: inline;
padding: 4px 0px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;
}
@keyframes fadeIn {
100% {
transform: translate(0, 50%);
opacity: 1;
}
}
@keyframes flash {
100% {filter: hue-rotate(360deg);}
}
.stop .char{animation-play-state: paused;}
#player {position:absolute;top: 82%;z-index: 98;
left: 90%;
width: 100px;
height: 100px;
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>
<div id="papa">
<video id="vid" src="https://imgimg.qqdsw8.cn/view.php/b668403c46bb30bdb68d24b79394971c.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"autoplay loop >
<source src="https://imgimg.qqdsw8.cn/view.php/2cc419d416fd6f881a858a48ca932963.mp3" type="audio/mpeg">
</audio>
</div>
<script>
player.onclick = () => aud.paused ? (aud.play(),vid.play(),vid1.play(),player.style.animationPlayState = 'running',image.classList.remove('stop')) : (aud.pause(),vid.pause(),vid1.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 ? 300 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
span.style.cssText += `
color: #${Math.random().toString(10).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>
老爷子唱得很棒，字正腔圆的。
页:
[1]