纪念毛泽东主席逝世50周年
本帖最后由 亚伦影音工作室 于 2026-9-9 15:12 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");#papa {position: relative;display: grid;place-items: center;margin: 30px 0;width: 1286px;height: 720px;left: calc(50% - 81px);transform: translateX(-50%);box-shadow: 3px 3px 6px gray;overflow: hidden;z-index: 10000;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";--state: running; }
#vid {width: 100%; height: 100%; z-index: 4;
position:absolute;
top:0%; left:0%;-webkit-mask-image: radial-gradient(black 20% ,transparent 80%);
object-fit: cover; pointer-events: none;
}
#vid1 {width: 100%; height: 100%; z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
/* 定义多种颜色转换的动画 */
#wrapper {
position: absolute;
padding: 0px;
font-weight:100;font-size:3.4em;font-family:"Ma Shan Zheng","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)hue-rotate(20deg)contrast(250%)brightness(120%);
white-space: pre;transform: translateX(0%);text-align: center;
width:100%;height:10%;left: 0%;z-index: 20;
top:80%;white-space: nowrap;
}
.char {
display: inline-block;
padding: 0px 4px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 1.5s var(--delay) forwards var(--state),flash 0.5s linear infinite var(--state);
}
@keyframes fadeIn {0% {
opacity: 1; transform: scale(0);
}
50% {
opacity: 1;
transform: scale(1.1,1);
}
100% {
opacity: 1; transform: scale(1.1,1);
}
}
@keyframes flash {
100% {filter: hue-rotate(360deg);}
}
</style>
<div id="papa">
<video id="vid1" src="https://www.panurl.cn/view.php/4b3738a06f389e3c6836edfa1c1402a1.mp4" autoplay loop muted></video>
<video id="vid" src="https://www.panurl.cn/view.php/9f75c230d92d8688a51567b07acea317.mp4" autoplay loop muted></video>
<div id="wrapper"></div>
</div>
<audio id="aud" src="https://www.panurl.cn/view.php/e3f2ac3c91b28d5d648a64639f3dadfb.m4a" loop autoplay></audio>
<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 ? 0 : 0);
const y = Math.random() * (Math.random() > 0.5 ? 0 : 0);
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> 太阳最红，毛主席最亲。共同悼念伟人逝世50周年{:4_187:} 缅怀伟人，向伟人致敬，毛泽东思想万岁
页:
[1]