杨帆 发表于 2025-10-21 15:15

美丽中国

<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa {--offsetX: 81px;--bg: url('https://638183.freep.cn/638183/t24/w4/mendre.webp') no-repeat center/cover;--state:running;}
#jzg{width: 100%; height:80%;position:absolute;z-index: 2;left: 0%;top:0%; -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 50%);mask-image: linear-gradient(to bottom, black 20%, transparent 50%); z-index: -1;}
#jzg img {width: 100%; height: 100%;}
#vid1 {position: absolute; width: 466px; height: 288px; right: 15%; top: 10%;object-fit: cover; border: 3px solid #ccc; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) inset;border-radius: 50%;mix-blend-mode: unset; overflow: hidden; pointer-events: none; display: var(--display); opacity: .9; transition: opacity .5s ease; animation: opa 10s infinite alternate linear var(--state);}
@keyframes opa {to {opacity: 0;}}
.vid {position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; object-fit: cover; mix-blend-mode: screen; mask: linear-gradient(to right top, red 0%, transparent 90%, transparent); -webkit-mask: linear-gradient(to right top, red 0%, transparent 90%, transparent); pointer-events: none;}
.wrap100 {position: absolute; width: 120px; height: 120px; display: grid; place-items: start center;}
.center-dot {position: absolute; width: 10px; height: 10px; background-color: MediumVioletRed; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; animation: none;}
.rot-ani {--state: running; animation: rot 8s linear infinite var(--state);}
.rect {position: absolute; width: 25%; height: 50%; background: var(--cc); clip-path: polygon(50% 0, 0 25%, 50% 100%, 100% 25%, 50% 0); transform-origin: center bottom;}
.cursor {cursor: pointer;}
@keyframes rot {to {transform: rotate(360deg); filter: hue-rotate(360deg);}}
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000); position: absolute; z-index: 6; right: 5%; top: 20%; transform: translate(0%); letter-spacing: 2px; font: normal 2.5em/1em 华文隶书; font-weight: 400; color: #000080; white-space: pre; writing-mode: vertical-lr; -webkit-background-clip: text; filter: drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0);}
#lrc::before {position: absolute; content: attr(data-lrc); width: 100%; height: 0%; color: transparent; overflow: hidden; white-space: pre; background: var(--bg); background-clip: text; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);}
@keyframes cover1 {from {height: 0;} to {height: 100%;}}
@keyframes cover2 {from {height: 0;} to {height: 100%;}}
#fullscreen {position: absolute; right: 20px; top: 20px; padding: 6px; background: green; color: white; border: 2px solid white; border-radius: 8px; cursor: pointer; pointer-events: auto; z-index: 10; opacity: 1; transition: opacity 0.3s ease;}
</style>
<div id="pa">
<audio id="aud" src="https://upfile.mp3.wf/view.php/b30dbae65e10dfb8b7efc9271f51563f.mp3" loop autoplay></audio>
<video id="vid1" src="https://img.tukuppt.com/video_show/2629112/00/02/25/5b5706705c66c.mp4" autoplay loop muted></video>
<video class ="vid" src="https://img.tukuppt.com/video_show/15653652/04/57/90/6490fb3b722ba.mp4" autoplay loop muted></video>
<video class ="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/22/5b52de8ec8111.mp4" autoplay loop muted></video>
<div data-lrc="" id="lrc"></div>
<div id="jzg"><img id="Img" src="https://pic1.imgdb.cn/item/68df520fc5157e1a885256ea.png" alt="" /></div>
<span id="fullscreen">全屏观赏</span>
</div>
<script>
(function(){
let lrcStr = `
美丽中国 - 陈思思
词：孟文豪
曲：孟文豪
壮美的北国
青山绿水如此辽阔
蓝天上白云朵朵
每寸土地都是爱的寄托
美丽中国美丽中国
绿意融融生机勃勃
处处都是绚丽的春色
美丽中国美丽中国
尊重自然坚守承诺
一起收获美好的生活
秀丽的南国
绿树红花如此婀娜
南湖上荡起碧波
每个孩子都唱起欢歌
美丽中国美丽中国
绿意融融生机勃勃
处处都是绚丽的春色
美丽中国美丽中国
尊重自然坚守承诺
一起收获美好的生活
美丽中国美丽中国
绿意融融生机勃勃
处处都是绚丽的春色
美丽中国美丽中国
尊重自然坚守承诺
一起收获美好的生活
我的话要对你诉说
我最美丽的祖国
        `;
let mKey = 0, mFlag = true, averAdd = 0.3;
let 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)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item, key) => {ar = item > aver ? aver : item;});
return ar;
};
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for (x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re, '');
if (geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g, '');
let time = x.match(re);
if (time != null) {
for (y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for (z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}}}}
lrcAr.sort((a, b) => a - b);
return (lrcTime(lrcAr));
};
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1; break;}}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};
let toMin = (val) => {
if (!val) return '000:000';
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;
}
let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), player.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state', 'running'), player.style.animationPlayState = 'running');
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}}
});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
let lrcAr = getLrcAr(lrcStr);
})();
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);
});
function color16() {return `#${Math.random().toString(16).substring(2, 8)}`;}
function getElement(el) {
if (el instanceof Element) return el;
if (typeof el === 'string') {
el = el.trim();
if (el.startsWith('#')) el = el.slice(1);
return document.getElementById(el) || document.body;
}
return document.body;
}
function lzSettingInit(num, pa) {
const rx = pa.clientWidth / 2;
const ry = pa.clientHeight / 2;
const a = 360;
const aa = a / num;
const w = 20;
const h = 20;
return {rx,ry,w,h,a: aa,tag: 'div'};
}
class PolygonMaker {
constructor(parentId) {this.parent = getElement(parentId); this.currentElm = null;}
createContainer() {
const container = document.createElement('div');
const aud = document.getElementById('aud');
container.title = aud.paused ? '播放' : '暂停';
container.id = 'player';
container.className = 'wrap100 rot-ani cursor';

const vids = document.querySelectorAll(', .vid');
var mState = () => {
pa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
vid1.style.setProperty('--display',aud.paused ? 'none':'block');
};

container.style.cssText = 'left: 20px; top: 20px;';
container.onclick = () => {
aud.paused ? aud.play() : aud.pause();
const currentState = container.style.getPropertyValue('--state');
const newState = currentState === 'paused' ? 'running' : 'paused';
container.style.setProperty('--state', newState);
container.title = aud.paused ? '播放' : '暂停';
};
aud.onplaying = aud.onpause = () => mState();
const centerDot = document.createElement('div');
centerDot.className = 'center-dot';
container.appendChild(centerDot);
this.parent.appendChild(container);
this.currentElm = container;
return this;
}
addColorPolygons(num = 8) {
if (!this.currentElm) return this;
const container = this.currentElm;
const config = lzSettingInit(num, container);
const fragment = document.createDocumentFragment();
for (let i = 0; i < num; i++) {
const polygon = document.createElement(config.tag);
polygon.className = 'rect';
const randomColor = color16();
polygon.style.cssText = `--cc: ${randomColor};transform: rotate(${config.a * i}deg);`;
fragment.appendChild(polygon);
}
container.appendChild(fragment);
return this;
}
}
window.onload = () => {const maker = new PolygonMaker('pa'); maker.createContainer().addColorPolygons(8);};
</script>

红影 发表于 2025-10-21 16:13

雄壮的阅兵式，每次看到都觉得心情澎湃。
歌曲也好听，很正能量。
欣赏杨帆好帖{:4_199:}

红影 发表于 2025-10-21 16:14

这个有意思，暂停时隐去动图了，倒是很好地解决了动图无法暂停的问题{:4_173:}

杨帆 发表于 2025-10-21 16:37

红影 发表于 2025-10-21 16:14
这个有意思，暂停时隐去动图了，倒是很好地解决了动图无法暂停的问题

这是一个视频呦~谢谢影子鼓励，祝开心{:4_204:}

梦油 发表于 2025-10-21 16:47

欣赏精彩制作，问候杨帆午安。

梦江南 发表于 2025-10-21 17:03

非常精彩的正能量音画帖，欣赏点赞！{:4_187:}

杨帆 发表于 2025-10-21 19:11

梦油 发表于 2025-10-21 16:47
欣赏精彩制作，问候杨帆午安。

问好梦油超版，谢谢鼓励，祝开心{:4_190:}

杨帆 发表于 2025-10-21 19:11

梦江南 发表于 2025-10-21 17:03
非常精彩的正能量音画帖，欣赏点赞！

问好江南，谢谢鼓励，祝开心{:4_204:}

梦油 发表于 2025-10-21 20:38

杨帆 发表于 2025-10-21 19:11
问好梦油超版，谢谢鼓励，祝开心

杨帆朋友别客气。

红影 发表于 2025-10-21 21:23

杨帆 发表于 2025-10-21 16:37
这是一个视频呦~谢谢影子鼓励，祝开心

哦，视频倒是不用隐去呢，视频暂停还是挺方便的啊。

杨帆 发表于 2025-10-21 23:49

本帖最后由 杨帆 于 2025-10-22 00:22 编辑

红影 发表于 2025-10-21 21:23
哦，视频倒是不用隐去呢，视频暂停还是挺方便的啊。
也是，这里尝试视频淡入淡出

红影 发表于 2025-10-22 22:48

杨帆 发表于 2025-10-21 23:49
也是，这里尝试视频淡入淡出

是的，淡入淡出的效果看到了，很明显呢{:4_187:}

偶然~ 发表于 2025-11-17 13:50

来欣赏杨帆的精品佳作，祝您创作如春泉涌流不息！

偶然~ 发表于 2025-11-17 14:49

音画唯美

偶然~ 发表于 2025-11-17 14:49

歌声动听

偶然~ 发表于 2025-11-17 14:49

制作大气

偶然~ 发表于 2025-11-17 14:50

音画合一，音乐与画面结合完美

偶然~ 发表于 2025-11-17 14:50

玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】

偶然~ 发表于 2025-11-17 14:50

感谢你带来的精彩，辛苦了！祝你开心幸福、阖家安康！
页: [1]
查看完整版本: 美丽中国