热血颂[庆祝8.1建军节99周年]
本帖最后由 亚伦影音工作室 于 2026-7-29 19:18 编辑 <br /><br /><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{ position: relative;width: 1286px; height: 720px; margin-left: -320px; margin-top: 20px; overflow: hidden; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #800000; z-index: 1000; background: linear-gradient(143deg, #FB0000 15%,rgba(248, 0, 0, 0) 65%); --state: paused;}
#vid {z-index: 1;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: overlay;
}
#wx{ position: absolute;width: 400px; height: 400px;overflow:hidden;left: 2%; top: 10%;}
#photo { position: absolute;width: 60px; height: 60px;animation: rot 0.15s linear infinite var(--state);transform-origin: 50% center;z-index: 2; cursor: pointer; }
#photo:nth-of-type(1) { left: 5%; top: 20%; width: 180px; height: 180px; }
#photo:nth-of-type(2) { left: 45%; top: 10%; }
#photo:nth-of-type(3) { left: 62%; top: 25%; }
#photo:nth-of-type(4) { left: 62%; top: 45%; }
#photo:nth-of-type(5) { left: 45%; top: 60%; }
@keyframes rot {0% { filter:hue-rotate(100deg) ;}}
#dhgc{position:absolute;width: 540px;
height: 450px;z-index: 2;
border: 0px solid white;cursor: pointer;
overflow: hidden;margin: 12% 50%;z-index: 3;
}
.lrc { position: absolute; width:100%; height:100%;margin: 0px 0px; color: #000078;}
.lrc #ul { width: 100%; padding: 0 10px; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);list-style: none;
transition: 0.1s all ease;
margin: 0;
display: flex;color:#000;
flex-direction: column;
align-items: center; }
.lrc #ul li {font:lighter 30px 华文新魏; transition: 0.1s all ease;list-style-type: none;
text-align: center; padding: 0 10px; height: 50px; line-height: 60px; cursor: pointer;white-space: nowrap; /* 防止歌词换行 */ }
.lrc #ul li span { padding: 0 5px;transform-origin: center 50%; /* x轴和y轴均以中心为原点 */
transition: all 0.1s cubic-bezier(0.4, 1, 0.4, 1); /* 缓动函数让动画更自然 */
display: inline-block; /* 确保transform-origin生效 */ }
.lrc #ul li span.active { font:normal 35px 华文新魏; text-align: center;transform: scale(1.4)rotate(-360deg);/* 缩放效果 */}
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 80%;font:200 3.2em ZCOOL KuaiLe;color:#000;white-space:pre;-webkit-background-clip:text;z-index: 3;cursor: pointer;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0); letter-spacing: 10px;display: none;}
#geci::before{position: absolute;content: attr(data-geci);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#btnplay { position: absolute;margin: 52% 50%;width: 50px; height: 50px; cursor: pointer; animation: rotating 6s infinite linear var(--state);z-index: 60;}
@keyframes rotating { to { transform: rotate(360deg); } }
.playbtn, .pausebtn,#fullscreen{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 12px;
border: none;z-index: 8;
cursor: pointer;margin: 8px 5px;left: 70%;
}
</style>
<div id="papa">
<video id="vid" src="https://tymov2.a.kwimgs.com/upic/2026/06/07/05/BMjAyNjA2MDcwNTU1MjBfNDYzNDgzODgwOF8xOTgxMzUxNDA0MDZfMl8z_b_Ba7784c38e2d5578861fae13100faed49.mp4" autoplay loop muted></video>
<div id="wx"><img alt="" id="photo" src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" /> <img alt="" id="photo" src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" /> <img alt="" id="photo" src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" /> <img alt="" id="photo" src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" /> <img alt="" id="photo" src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" /></div>
<div ><img id="btnplay" src="https://pic.imgdb.cn/item/663a14e20ea9cb1403a8cb44.png" title="播放/暂停" alt="" /></div>
<div id="dhgc"><div class="lrc">
<ul id="ul"></ul>
</div>
</div>
<div id="geci"></div>
<button class="playbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
<button class="pausebtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<button id="fullscreen">全屏观赏</button>
</div>
<audio id="audio" src="http://music.163.com/song/media/outer/url?id=1298436389.mp3" loop autoplay ></audio>
<script>
let lrc = `
热血颂-郑莉
词：陈哲
曲：苏越
出品：亚伦影音工作室
当你离开生长的地方
梦中回望
可曾梦见河边那棵
亭亭的白杨
每一棵寸草都忘不了
你日夜守望
思念你的何止是那亲爹亲娘
当你握别温暖的手泪落几行
可曾感到背影凝聚着
滚烫的目光
每一颗赤诚的心灵都
深深理解你
每一个热切的希望都
充满你的力量
你奔向远方
带着亲人的希望
你奔向远方
带着火热的衷肠
你奔向远方
带着亲人的希望
你奔向远方
带着火热的衷肠
最艰苦的地方总有着
战士的刚强
勇士的肩头肩负着
多少人心头的崇仰
谁不知生命的可贵
谁没有幸福渴望
你默默无闻地足迹
写下不朽篇章
你和我们同在
把美好未来开创
你是国魂是军魂
你是中华铁骨脊梁
你和我们同在
把美好未来开创
你是国魂是军魂
你是中华铁骨脊梁
`;
let lrcArr = lrc.split('\n');
let result = [];
var audio = document.querySelector("#audio"),
ul = document.querySelector("#ul"),
container = document.querySelector(".lrc");
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
if (lrcData.length < 2) continue;
var lrcTime = lrcData.substring(1);
var words = lrcData.trim().split('');
let lineWords = [];
let startTime = parseTime(lrcTime);
let wordDuration = (i < lrcArr.length - 1 && lrcArr.includes('[')) ?
(parseTime(lrcArr.split(']').substring(1)) - startTime) / words.length : 0.5;
words.forEach((word, index) => {
lineWords.push({ time: startTime + index * wordDuration, text: word });
});
result.push(lineWords);
}
function randomColor(){
const colors = ['#880000','#ffbb33','#00C851','#000078','#aa66cc','#ff8800','#ff33cc'];
return colors;
}
function parseTime(lrcTime) {
let lrcTimeArr = lrcTime.split(":");
return +lrcTimeArr * 60 + parseFloat(lrcTimeArr);
}
function getIndex() {
let time = audio.currentTime;
for (let i = 0; i < result.length; i++) {
if (result.time > time) return i - 1;
}
return result.length - 1;
}
var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox1264a5=["\x63\x72\x65\x61\x74\x65\x44\x6F\x63\x75\x6D\x65\x6E\x74\x46\x72\x61\x67\x6D\x65\x6E\x74","\x6C\x65\x6E\x67\x74\x68","\x6C\x69","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x70\x61\x6E","\x74\x65\x78\x74\x43\x6F\x6E\x74\x65\x6E\x74","\x74\x65\x78\x74","\x74\x69\x6D\x65","\x64\x61\x74\x61\x73\x65\x74","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x66\x6F\x72\x45\x61\x63\x68","\x63\x6C\x69\x63\x6B","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];function createElements(){let _0x5404x2=document]();for(let _0x5404x3=0;_0x5404x3< result];_0x5404x3++){let _0x5404x4=document](__Ox1264a5);result]((_0x5404x5)=>{let _0x5404x6=document](__Ox1264a5);_0x5404x6]= _0x5404x5];_0x5404x6]]= _0x5404x5];_0x5404x4](_0x5404x6)});_0x5404x4](__Ox1264a5,()=>{return audio]= result]});_0x5404x2](_0x5404x4)};ul](_0x5404x2)}createElements();;;(function(_0x5404x7,_0x5404x8,_0x5404x9,_0x5404xa,_0x5404xb,_0x5404xc){_0x5404xc= __Ox1264a5;_0x5404xa= function(_0x5404xd){if( typeof alert!== _0x5404xc){alert(_0x5404xd)};if( typeof console!== _0x5404xc){console](_0x5404xd)}};_0x5404x9= function(_0x5404xe,_0x5404x7){return _0x5404xe+ _0x5404x7};_0x5404xb= _0x5404x9(__Ox1264a5,_0x5404x9(_0x5404x9(__Ox1264a5,__Ox1264a5),__Ox1264a5));try{_0x5404x7= __encode;if(!( typeof _0x5404x7!== _0x5404xc&& _0x5404x7=== _0x5404x9(__Ox1264a5,__Ox1264a5))){_0x5404xa(_0x5404xb)}}catch(e){_0x5404xa(_0x5404xb)}})({})
createElements();
let containerHeight = container.clientHeight;
let liHeight = 50;
let minOffset = 0;
let maxOffset = ul.clientHeight - containerHeight;
const visibleLines = 1;
let prevIndex = 1;
function setOffset() {
let index = getIndex();
if (index === -1) index = 0;
let offset = Math.max(0, Math.min((index - Math.floor(visibleLines / 2)) * liHeight, maxOffset));
ul.style.transform = `translateY(-${offset}px)`;
if (prevIndex !== -1) {
let prevLi = ul.children;
if (prevLi) {
prevLi.querySelectorAll('span.active').forEach(span => span.classList.remove('active'));
prevLi.classList.remove('active');
}
}
let currentLi = ul.children;
if (currentLi) currentLi.classList.add('active');
let currentTime = audio.currentTime;
let currentLine = result;
if (currentLine) {
currentLine.forEach((wordObj, wordIndex) => {
let span = currentLi.children;
span.style.color = ul.style.color = randomColor();
if (currentTime >= wordObj.time &&
(wordIndex === currentLine.length - 1 || currentTime < currentLine?.time)) {
span.classList.add('active');
} else {
span.classList.remove('active');
}
});
const currentLyric = currentLine.map(wordObj => wordObj.text).join('');
if (!currentLyric) return;
let charIndex = 0;
for (let j = 0; j < currentLine.length; j++) {
if (currentLine.time <= currentTime) {
charIndex = j + 1;
}
}
}
prevIndex = index;
}
audio.addEventListener("timeupdate", setOffset);
const mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');}
btnplay.onclick = () => audio.paused ? (audio.play(),vid.play() ): (audio.pause(),vid.pause());
audio.onplaying = audio.onpause = () => mState();
</script>
<script>
audio.addEventListener("seeked", myFunction)
audio.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;
function lrcTime (ar) {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1));
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
function getLrcAr(str) {
str = str.trim();
let lines = [], lrcAr = [];
let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
if(!str.match(reg)) return;
lines = str.replace(reg,'$1-{}-$2').split('\n');
for(k = 0; k < lines.length; k ++) {
lrcAr = [];
for(j = 0; j < 3; j ++) {
let tmpAr = lines.split('-{}-');
lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
}
}
return lrcTime(lrcAr);
};
function toSecs (lrcTime){
let reg = /\d{2,}/g;
let ar = lrcTime.match(reg);
return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};
function showLrc(time){
let name = mFlag ? 'cover1' : 'cover2';
geci.innerHTML = lrcAr;
geci.dataset.geci = lrcAr;
geci.style.setProperty('--motion', name);
geci.style.setProperty('--tt', time + 's');
geci.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
function myFunction(){
for (j = 0; j < lrcAr.length; j++) {
if (audio.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (audio.currentTime - lrcAr);
showLrc(time);
};
function mylrc() {
for (j = 0; j < lrcAr.length; j++) {
if (audio.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
}
function playing() {
geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>
<script>
function btn1() {
document.getElementById('geci').style.display = 'block';
document.getElementById('dhgc').style.display = 'none';
}
function btn2() {
document.getElementById('geci').style.display = 'none';
document.getElementById('dhgc').style.display = 'block';
}
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
欣赏、学习亚伦老师精美制作，同祝所有的军人们节日快乐
页:
[1]