我们都是追梦人

杨帆发表于 2026-6-28 20:36

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="never" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我们都是追梦人</title>
<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");
:root{--ocean-dark:#0a3d62;--ocean-medium:#3c6382;--ocean-light:#60a3bc;--sand-color:#f5e1b5;--shell-light:#f0e6d2;--shell-dark:#d9c9a3;--color-1:#fff887;--color-2:#fc89e5;--color-3:#fd27d2;--color-4:#9cf9fc;--color-5:#0dd7de;--color-6:#fbcb6d;--color-7:#fb8739;--color-8:#fa5f57;--starfish-body:#fb2f39;--starfish-accent:#fb2f39;--starfish-light:#fbb5b8;}
#papa{margin:30px 0;left:calc(50% - 81px);transform:translateX(-50%);width:clamp(600px,90vw,1400px);height:auto;aspect-ratio:16/9;background:url('https://pic1.imgdb.cn/item/687ba61258cb8da5c8c76f6c.jpg') no-repeat center/cover;box-shadow:2px 2px 8px #000;z-index:1;overflow:hidden;position:relative;font-family:"ZCOOL KuaiLe","Ma Shan Zheng","Long Cang","华文行楷","SimHei","Arial","sans-serif";}
#sparklesContainer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10;transition:opacity 0.8s ease;}
.sparkle{position:absolute;border-radius:50%;opacity:0;animation:sparkleAnim 2.5s ease-out forwards;}
@keyframes sparkleAnim{0%{opacity:0;transform:translate(0,0) scale(0);}50%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1);}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0);}}
.fade-out{opacity:0 !important;}
.hidden{display:none !important;}
#lyric{position:absolute;bottom:3%;left:calc(50% - 50px);transform:translateX(-50%);z-index:12;display:flex;flex-direction:column;justify-content:center;height:160px;width:80%;text-align:center;filter:drop-shadow(#000 0 0 2px);font-size:3.5rem;}
#lyricDisplay{height:100%;letter-spacing:4px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:0 1em;width:100%;animation:hue-rotate 0.5s linear infinite;}
.lyrichar{display:inline-block;opacity:0;animation:charAppear 0.5s forwards;margin:0 2px;}
@keyframes charAppear{to{opacity:1;transform:translate(0%);}}
@keyframes hue-rotate{to{filter:hue-rotate(360deg);}}
#statusDisplay{position:absolute;z-index:3;font-size:1.5em;font-weight:50;left:15%;top:15%;color:#fff;}
#fullscreen{border-radius:4px;position:absolute;color:DarkGray;padding:4px 8px;z-index:12;font-size:25px;border:none;cursor:pointer;top:25px;left:25px;background:transparent;}
#fullscreen:hover{font-style:italic;}
.vid1{position:absolute;z-index:3;left:-10%;top:-10%;width:120%;height:120%;object-fit:cover;pointer-events:none;object-position:center;mix-blend-mode:screen;mask:linear-gradient(to bottom,red 20%,transparent 58%);-webkit-mask:linear-gradient(to bottom,red 20%,transparent 58%);will-change:transform;}
#msvg{position:absolute;top:5%;left:80%;z-index:12;cursor:pointer;width:200px;height:200px;display:grid;place-items:center;margin:20px auto;}
#msvg:hover{filter:unset !important;}
#msvg path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 2s var(--delay) forwards,fill 1s calc(var(--delay) + 2s) forwards;}
.rotate{animation:rotate 8s 0.5s linear infinite;}
@keyframes rotate{to{transform:rotate(360deg);}}
@keyframes draw{to{stroke-dashoffset:0;}}
@keyframes fill{to{fill:url(#grd);}}
.tv{position:relative;width:clamp(600px, 30vw, 750px);height:clamp(370px, 20vh, 550px);top:20%;left:calc(50% + 45px);transform:translateX(-50%);}
.tv-container{position:absolute;left:0;top:0;width:100%;height:100%;transform:perspective(900px) rotateY(30deg) skewX(0deg);transform-style:preserve-3d;border:0px solid #555;box-shadow:0 0 30px rgba(0,0,0,0.5);overflow:hidden;border-radius:10%;background:rgba(0,0,0,0.12);}
#vid{position:absolute;width:105%;height:105%;left:-2.5%;top:-2.5%;object-fit:fill;pointer-events:none;transform:skewX(2.8deg);z-index:2;opacity:0.95;mix-blend-mode:unset;}
.tv-container::after{content:'';position:absolute;bottom:-15px;left:0;width:100%;height:15px;background:#222;transform:rotateX(90deg) translateY(7px);transform-origin:top;}
.additional-text{font-family:'微软雅黑',sans-serif;font-size:20px;font-weight:bold;text-align:center;padding:10px 20px;background:rgba(0,0,0,0.35);border-radius:10px;position:absolute;top:2px;left:calc(50% + 150px);transform:translateX(-50%);width:max-content;z-index:10;letter-spacing:2px;}
@keyframes textColorBright{0%{color:#ff5577;}20%{color:#ffdd44;}40%{color:#44eeff;}60%{color:#8877ff;}80%{color:#ff77dd;}100%{color:#ff5577;}}
.text-inner{color:#fff;text-shadow:0 0 8px #000,2px 2px 4px black;animation:textColorBright 2s linear infinite;display:inline-block;font-weight:bold;}
</style>
</head>
<body>
<div id="papa">
<div class="tv">
   <div class="tv-container">
         <video id="vid" src="https://img2.tukuppt.com/video_show/6181262/01/23/94/6227521ea9bf5.mp4" autoplay loop muted></video>
      <div class="additional-text">
            <span class="text-inner">正在播放：我们都是追梦人</span>
         </div>
</div>
</div>

<video class="vid1" src="https://img2.tukuppt.com/video_show/2629112/00/02/06/5b509bb0793dd.mp4" preload="auto" autoplay loop playsinline muted></video>

<div id="fullscreen">全屏欣赏</div>

<div id="statusDisplay">播放中: -2:20</div>
<div id="sparklesContainer"></div>

<div id="lyric"><div id="lyricDisplay"></div></div>

<audio id="aud" src="https://i.uik.cc/view.php/ecb065cc2ce5a11e476962d546e436d1.mp3" loop autoplay></audio>

<svg id="msvg" width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<title id="svgTip">暂停</title>
<defs>
<linearGradient id="grd" x1="0" x2="0" y1="0" y2="1">
   <stop offset="0%" stop-color="#E64C3C" />
   <stop offset="20%" stop-color="#F39C12" />
   <stop offset="50%" stop-color="#FDE3A7" />
   <stop offset="70%" stop-color="#D35400" />
   <stop offset="100%" stop-color="#C0392B" />
</linearGradient>
</defs>
<g id="g1"></g>
</svg>

</div>

<script>
const papa = document.getElementById('papa');
const audioPlayer = document.getElementById('aud');
const msvg = document.getElementById('msvg');
const lyricDisplay = document.getElementById('lyricDisplay');
const statusDisplay = document.getElementById('statusDisplay');

const vids = document.querySelectorAll('video');
const additionalText = document.querySelector('.text-inner');
const sparklesContainer = document.getElementById('sparklesContainer');
const fullscreen = document.getElementById('fullscreen');

let currentLyricIndex = -1;
let isUpdating = false;
window.isPlaying = false;
let sparkleInterval = null;

function createSingleSparkle() {
const sparkle = document.createElement('div');
sparkle.className = 'sparkle';
const x = Math.random()*100;
const y = Math.random()*100;
sparkle.style.left = `${x}%`;
sparkle.style.top = `${y}%`;
sparkle.style.animationDelay = `${Math.random()*2}s`;
sparkle.style.setProperty('--tx', `${(Math.random()-0.5)*80}px`);
sparkle.style.setProperty('--ty', `${(Math.random()-0.5)*80}px`);

const currentVolume = audioPlayer.volume;
const currentTime = audioPlayer.currentTime || 0;
const baseSize = 6;
const sizeMultiplier = 1+(currentVolume*1.5);
const finalSize = baseSize*sizeMultiplier;

sparkle.style.width = `${finalSize}px`;
sparkle.style.height = `${finalSize}px`;

const beat = Math.sin(currentTime*8)*0.5+0.5;
const colors = ['#fff887','#fc89e5','#fd27d2','#9cf9fc','#0dd7de','#fbcb6d','#fb8739','#fa5f57'];
const colorIndex = Math.floor((currentTime*10+beat*5)%colors.length);
const randomColor = colors;

sparkle.style.background = randomColor;
sparkle.style.boxShadow = `0 0 10px ${randomColor},0 0 20px ${randomColor}`;
sparklesContainer.appendChild(sparkle);

setTimeout(()=>{
if(sparkle && !sparkle.classList.contains('hidden')) sparkle.remove();
},3000);
}

function startSparkleLoop() {
stopSparkleLoop();
sparklesContainer.classList.remove('fade-out');
sparklesContainer.style.opacity = 1;
sparklesContainer.innerHTML = '';
for(let i=0;i<50;i++) createSingleSparkle();
sparkleInterval = setInterval(()=>{
if(window.isPlaying) createSingleSparkle();
},200);
}

function stopSparkleLoop() {
clearInterval(sparkleInterval);
sparkleInterval = null;
}

function fadeOutAllSparkles() {
stopSparkleLoop();
sparklesContainer.classList.add('fade-out');
document.querySelectorAll('.sparkle').forEach(el=>el.classList.add('hidden'));
setTimeout(()=>sparklesContainer.innerHTML='',800);
}

function resetLyrics() {
currentLyricIndex = -1;
lyricDisplay.innerHTML = '';
}

const mState = ()=>{
const state = audioPlayer.paused ? 'paused' : 'running';
vids.forEach(vid => audioPlayer.paused ? vid.pause() : vid.play());

const paths = document.querySelectorAll('#msvg path');
const rotateG = document.getElementById('g1');

if (audioPlayer.paused) {
paths.forEach(p => p.style.animationPlayState = 'paused');
if (rotateG) rotateG.style.animationPlayState = 'paused';
lyricDisplay.style.animationPlayState = 'paused';
additionalText.style.animationPlayState = 'paused';
} else {
paths.forEach(p => p.style.animationPlayState = 'running');
if (rotateG) rotateG.style.animationPlayState = 'running';
lyricDisplay.style.animationPlayState = 'running';
additionalText.style.animationPlayState = 'running';
}
};

function togglePlayPause() {
if(audioPlayer.paused){
if(audioPlayer.currentTime <= 0.5) resetLyrics();
audioPlayer.play().then(()=>{
   window.isPlaying = true;
   statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-(audioPlayer.duration-audioPlayer.currentTime))}</span>`;
   startSparkleLoop();
   mState();
}).catch(err=>{
});
}else{
audioPlayer.pause();
window.isPlaying = false;
statusDisplay.innerHTML = '<span style="color:#CC00FF">已暂停</span>';
fadeOutAllSparkles();
mState();
}
svgTip.textContent = audioPlayer.paused ? '播放' : '暂停';
}

msvg.addEventListener('click', e=>{
e.stopPropagation();
togglePlayPause();
});

audioPlayer.addEventListener('play',mState);
audioPlayer.addEventListener('pause',mState);
audioPlayer.play().catch(_ => mState());

function displayLyricCharByChar(text) {
lyricDisplay.innerHTML = '';
const chars = text.split('');
const colorList = ['var(--color-1)','var(--color-2)','var(--color-3)','var(--color-4)','var(--color-5)','var(--color-6)'];
chars.forEach((char,i)=>{
const span = document.createElement('span');
span.className = 'lyrichar';
span.style.color = colorList;
span.innerHTML = char === ' ' ? ' ' : char;
span.style.transform = `translateY(${i===0?0:i*30}px)`;
let delay = i*0.08;
if(/[，。！？,.!?]/.test(char)) delay += 0.08;
span.style.animationDelay = `${delay}s`;
lyricDisplay.appendChild(span);
});
}

audioPlayer.addEventListener('timeupdate',()=>{
if(!window.isPlaying || isUpdating) return;
isUpdating = true;
setTimeout(()=>isUpdating=false,100);
const current = audioPlayer.currentTime;
const remaining = audioPlayer.duration - current;
statusDisplay.innerHTML = `<span style="color:#CC00FF">播放中：</span><span style="color:#FF0088">${formatTime(-remaining)}</span>`;

for(let i=0;i<lyrics.length;i++){
const now = lyrics.time;
const next = i<lyrics.length-1 ? lyrics.time : Infinity;
if(current >= now-0.3 && current < next+0.3){
   if(currentLyricIndex !== i){
   currentLyricIndex = i;
   displayLyricCharByChar(lyrics.text);
   }
   break;
}
}
});

function formatTime(seconds) {
const abs = Math.abs(seconds);
const m = Math.floor(abs/60);
const s = Math.floor(abs%60);
return `${seconds<0?'-':''}${m}:${s<10?'0':''}${s}`;
}

const lrcText = `
我们都是追梦人 - 乌兰图雅
词：王平久
曲：常石磊
啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦
每个身影同阳光奔跑
我们挥洒汗水回眸微笑
一起努力争做春天的骄傲
懂得了梦想越追越有味道
我们都是追梦人
千山万水奔向天地跑道
你追我赶风起云涌春潮
海阔天空敞开温暖怀抱
我们都是追梦人
在今天勇敢向未来报到
当明天幸福向我们问好
最美的风景是拥抱
啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦
每次奋斗拼来了荣耀
我们乘风破浪举目高眺
心中力量不怕万万里路遥
再高远的梦呀也追的到
我们都是追梦人
千山万水奔向天地跑道
你追我赶风起云涌春潮
海阔天空敞开温暖怀抱
我们都是追梦人
在今天勇敢向未来报到
当明天幸福向我们问好
最美的风景是拥抱
啦啦啦啦啦
啦啦啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦
我们都是追梦人
千山万水奔向天地跑道
你追我赶风起云涌春潮
海阔天空敞开温暖怀抱
我们都是追梦人
在今天勇敢向未来报到
当明天幸福向我们问好
最美的风景是拥抱
啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦啦啦
啦啦啦啦啦啦啦啦啦
拥抱拥抱拥抱

`;

function parseLrc(lrc) {
const lyrics = [];
const lines = lrc.trim().split('\n');
const reg = /\[(\d{2}):(\d{2})(?:\.(\d{2}))?\](.*)/;
lines.forEach(line=>{
const m = line.match(reg);
if(m){
   const t = +m*60 + +m + +m/100;
   lyrics.push({time:t, text:m.trim()});
}
});
return lyrics;
}
const lyrics = parseLrc(lrcText);

audioPlayer.addEventListener('ended',()=>{
resetLyrics();
statusDisplay.textContent = '播放结束，可重新播放';
window.isPlaying = false;
fadeOutAllSparkles();
});

audioPlayer.addEventListener('loadedmetadata',()=>{
statusDisplay.textContent = '音频已加载，点击播放开始';
audioPlayer.play().then(()=>{
window.isPlaying = true;
statusDisplay.textContent = '音乐加载中...';
startSparkleLoop();
}).catch(()=>{
statusDisplay.textContent = '点击图标开始播放';
});
});

audioPlayer.addEventListener('error',()=>{
statusDisplay.textContent = '音频加载失败';
});

function loadScript(url, callback) {
var script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);
}

loadScript("https://638183.freep.cn/638183/svgdr/svgdr.min.js", function() {
(function tzRun() {
var dr = _dr(msvg);
dr.path('M0 0 C-100 -200,100 -200,0 0', 'transparent', 'gold', 3).addTo(g1).rotates(9);

function setProperties() {
   const paths = msvg.querySelectorAll('path');
   paths.forEach((path, idx) => {
         path.style.cssText += `
            --len: ${path.getTotalLength()};
            --delay: ${idx * 2}s;
         `;
   });
   paths.onanimationend = () => {
         g1.classList.add('rotate');
   };
}
setProperties();
})();
});

let fs = true,fsTimer;
fullscreen.onclick = ()=>{
if(fs){
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
}else{
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => fullscreen.style.opacity = '0', 2500);
});
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
if (!audioPlayer.paused) audioPlayer.pause();
} else {
if (audioPlayer.paused && !audioPlayer.ended) audioPlayer.play().catch(()=>{});
}
});

['contextmenu', 'dragstart', 'selectstart'].forEach(ev =>
papa.addEventListener(ev, (e) => { e.preventDefault(); })
);
msvg.onanimationiteration = () => {
msvg.style.setProperty('filter', `hue-rotate(${60 + Math.random() * 300}deg)`);
};
</script>
</body>
</html>

霜染枫丹 发表于 2026-6-28 20:39

制作精美，歌声昂扬，满满的正能量！喜欢听喜欢看，为你点赞！！{:4_204:}{:4_190:}

梦江南 发表于 2026-6-28 20:41

很漂亮的小播，特效创意惊艳，谢谢杨帆带来的精彩，晚上好！{:4_187:}

杨帆发表于 2026-6-28 21:21

霜染枫丹发表于 2026-6-28 20:39
制作精美，歌声昂扬，满满的正能量！喜欢听喜欢看，为你点赞！！

谢谢枫丹老师喜欢，谢谢鼓励，祝夏安{:4_204:}

杨帆发表于 2026-6-28 21:23

梦江南发表于 2026-6-28 20:41
很漂亮的小播，特效创意惊艳，谢谢杨帆带来的精彩，晚上好！

鼓捣着玩呢。谢谢江南老师鼓励，祝夏安{:4_204:}

红影发表于 2026-6-28 22:18

视频斜向设计很棒，绘制小播还是变色的，非常惊艳。
歌曲好听，制作漂亮。欣赏杨帆好帖{:4_187:}

杨帆发表于 2026-6-28 22:54

红影发表于 2026-6-28 22:18
视频斜向设计很棒，绘制小播还是变色的，非常惊艳。
歌曲好听，制作漂亮。欣赏杨帆好帖

鼓捣着玩呢，谢谢影子鼓励~{:4_204:}

小播设计来自马老师分享作品，视频设计来自了了子老师分享作品，歌词设计来自亚伦老师分享作品，在此一并表示感谢~{:4_190:}

魏淑芬 发表于 2026-6-28 23:11

欣赏精美音画作品，点赞{:4_204:}

杨帆发表于 2026-6-28 23:14

魏淑芬发表于 2026-6-28 23:11
欣赏精美音画作品，点赞

魏淑芬老师晚上好，谢谢鼓励{:4_187:}

红影发表于 2026-6-29 22:39

杨帆发表于 2026-6-28 22:54
鼓捣着玩呢，谢谢影子鼓励~

小播设计来自马老师分享作品，视频设计来自了了子老师分享作品， ...

杨帆能把这么多人的好东西集中起来，也很厉害呢{:4_187:}

杨帆发表于 2026-6-30 11:20

红影发表于 2026-6-29 22:39
杨帆能把这么多人的好东西集中起来，也很厉害呢

问好影子，纯属娱乐，谢谢鼓励{:4_187:}

红影发表于 2026-7-1 09:14

杨帆发表于 2026-6-30 11:20
问好影子，纯属娱乐，谢谢鼓励

这样的娱乐很高水平{:4_187:}

页: [1]

花潮论坛's Archiver

我们都是追梦人