杨帆 发表于 2025-12-1 08:01

芦 花（学习亚伦老师帖代码）


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>芦花 - 雷佳
</title>
</head>
<body>
<style>
#papa{margin:30px auto;left:calc(50% - 81px);transform:translateX(-50%);width:clamp(600px,90vw,1400px);height:auto;aspect-ratio:16/9;background:#000 url('https://pic1.imgdb.cn/item/692c80391486afd2e4d1e4b1.jpg') no-repeat center/cover;box-shadow:3px 3px 6px gray;overflow:hidden;position:relative;display:grid;place-items:center;user-drag:none;user-select:none;--state:running;z-index:1;}
#fullscreen{position:absolute;bottom:30px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:10;}
#fullscreen:hover{font-style:italic;}
#vid1{left:0%;width:100%;height:100%;z-index:1;position:absolute;top:0%;left:0%;object-fit:cover;pointer-events:none;opacity:1;}
.vid{width:100%;height:100%;z-index:2;position:absolute;mask:linear-gradient(to right top,red 0%,transparent 90%,transparent);-webkit-mask:linear-gradient(to right top,red 0%,transparent 90%,transparent);top:0%;left:0%;opacity:0;object-fit:cover;pointer-events:none;animation:round 50s linear infinite;}
@keyframes round{0%{opacity:0;}4%{opacity:1;}10%{opacity:1;}23%{opacity:0;}}
.vid:nth-child(1){animation-delay:40s;}
.vid:nth-child(2){animation-delay:30s;}
.vid:nth-child(3){animation-delay:20s;}
.vid:nth-child(4){animation-delay:10s;}
.vid:nth-child(5){animation-delay:0s;}
.stop .vid:nth-child(1),.stop .vid:nth-child(2),.stop .vid:nth-child(3),.stop .vid:nth-child(4),.stop .vid:nth-child(5){animation-play-state:paused;}
.rotating-text{position:absolute;top:10%;left:50%;transform:translate(-50%,-50%);font-weight:600;font:2.8em 华文新魏,"Microsoft Yahei",sans-serif;z-index:5;white-space: pre;background-clip: text;-webkit-background-clip: text;text-align:center;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
.rotating-text p{margin:0;padding:0;}
.rotating-text p .word{position:relative;display:block;opacity:1 !important;width:100%;}
.rotating-text p .word .letter{transform-origin:center center 25px;margin:0 2px;display:inline-block;transition:all 0.35s cubic-bezier(0.6,0,0.7,0.2);}
.rotating-text p .word .letter.out{transform:rotateX(90deg);opacity:0;}
.rotating-text p .word .letter.in{transform:rotateX(0deg);opacity:1;}
.rotating-text p .word .letter.behind{transform:rotateX(-90deg);opacity:0;}
.alizarin{color:#ff0000;}
.wisteria{color:#8e44ad;}
.peter-river{color:#3498db;}
.emerald{color:#2ecc71;}
.sun-flower{color:#f1c40f;}
.carrot{color:#e67e22;}
.amethyst{color:#9b59b6;}
.turquoise{color:#1abc9c;}
#mdiv{bottom:20px;left:20px;cursor:pointer;width:98px;height:98px;position:absolute;z-index:10;animation:sway .8s linear infinite alternate;}
#mdiv:hover{transform:scale(1.1);filter:brightness(2) hue-rotate(60deg);animation-play-state:paused;opacity:0.8;transition:1s;}
@keyframes sway{0%{transform:rotate(-3deg);}100%{transform:rotate(3deg);}}
</style>
<div id="papa">
<div class="rotating-text"><p><span class="word" id="current-lyric"></span></p></div>
<img id="mdiv" src="https://pic1.imgdb.cn/item/692c83051486afd2e4d1e4cd.png" title="播放/暂停" alt="" />
<video id="vid1" src="https://cccimg.com/view.php/6c14a0594359fe1cf2518e7b0ce468d2.mp4" loop muted autoplay=""></video>
<div id="testImg">
<video class="vid" src="https://cccimg.com/view.php/bc2c5725bf0c449419ebed615ff80602.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://cccimg.com/view.php/8184323f3b1650d44ad5dd53673a2809.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2405811/00/75/84/60a621418f584.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/01/27/57/627876d88eb75.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/30/5d1caa1a38235.mp4" loop muted autoplay=""></video>
<span id="fullscreen">全屏观赏</span>
<audio id="aud" src="https://cccimg.com/view.php/9fc983d9eb9a11af6f279789dc4187dc.mp3" autoplay loop></audio>
</div>
</div>
<script>
const lyricText=`芦花 - 雷佳
词：贺东久
曲：印青
芦花白 芦花美
花絮满天飞
千丝万缕意绵绵
路上彩云追
追过山 追过水
花飞为了谁
大雁成行人双对
相思花为媒
情和爱 花为媒
千里万里梦相随
莫忘故乡秋光好
早戴红花报春晖
情和爱 花为媒
千里万里梦相随
莫忘故乡秋光好
早戴红花报春晖
芦花白 芦花美
花絮满天飞
千丝万缕意绵绵
路上彩云追
追过山 追过水
花飞为了谁
大雁成行人双对
相思花为媒
情和爱 花为媒
千里万里梦相随
莫忘故乡秋光好
早戴红花报春晖
情和爱 花为媒
千里万里梦相随
莫忘故乡秋光好
早戴红花报春晖
莫忘故乡秋光好
早戴红花报春晖`;
const colorClasses=['alizarin','wisteria','peter-river','emerald','sun-flower','carrot','amethyst','turquoise'];
let colorIndex=0;
const aud=document.getElementById('aud'),vid1=document.getElementById('vid1'),mdiv=document.getElementById('mdiv'),fullscreen=document.getElementById('fullscreen'),currentLyricEl=document.getElementById('current-lyric'),testImg=document.getElementById('testImg'),vids=document.querySelectorAll('.vid');
function parseLyrics(lyricText){
const lyricArr=[];
const lines=lyricText.trim().split('\n');
lines.forEach(line=>{
const match=line.match(/\[(\d{2}):(\d{2}\.\d{2,3})\](.*)/);
if(match){
const minute=parseInt(match);
const second=parseFloat(match);
const time=minute*60+second;
const text=match.trim();
if(text)lyricArr.push({time,text});
}
});
return lyricArr;
}
const lyrics=parseLyrics(lyricText);
let currentLyricIndex=-1,isPlaying=true,animationTimer=null;
function getNextColorClass(){
const colorClass=colorClasses;
colorIndex=(colorIndex+1)%colorClasses.length;
return colorClass;
}
function initLetterAnimation(el,text){
el.innerHTML='';
colorClasses.forEach(cls=>el.classList.remove(cls));
el.classList.add(getNextColorClass());
const letters=text.split('');
letters.forEach(letter=>{
const span=document.createElement('span');
span.textContent=letter;
span.className='letter in';
el.appendChild(span);
});
}
function playRotateAnimation(el){
const letters=el.querySelectorAll('.letter');
if(!letters.length)return;
if(animationTimer)clearTimeout(animationTimer);
letters.forEach((letter,i)=>{
setTimeout(()=>letter.className='letter out',i*80);
});
letters.forEach((letter,i)=>{
setTimeout(()=>{
letter.className='letter behind';
setTimeout(()=>letter.className='letter in',300);
},i*80);
});
animationTimer=setTimeout(()=>{
if(isPlaying)playRotateAnimation(el);
},4000);
}
function matchLyric(currentTime){
for(let i=0;i<lyrics.length;i++){
const lyric=lyrics;
const nextLyricTime=lyrics?lyrics.time:Infinity;
if(currentTime>=lyric.time&&currentTime<nextLyricTime){
if(i!==currentLyricIndex){
currentLyricIndex=i;
initLetterAnimation(currentLyricEl,lyric.text);
setTimeout(()=>{
if(isPlaying)playRotateAnimation(currentLyricEl);
},500);
}
break;
}
}
}
aud.addEventListener('timeupdate',()=>matchLyric(aud.currentTime));
aud.addEventListener('play',()=>{
isPlaying=true;
matchLyric(aud.currentTime);
if(currentLyricEl.children.length){
playRotateAnimation(currentLyricEl);
}
vid1.play().catch(e=>console.log('主视频播放失败:',e));
vids.forEach(vid=>vid.play().catch(e=>console.log('背景视频播放失败:',e)));
testImg.classList.remove('stop');
mdiv.style.animationPlayState='running';
});
aud.addEventListener('pause',()=>{
isPlaying=false;
if(animationTimer)clearTimeout(animationTimer);
vid1.pause();
vids.forEach(vid=>vid.pause());
testImg.classList.add('stop');
mdiv.style.animationPlayState='paused';
});
let fs=true,fsTimer,mdivTimer;
fullscreen.onclick=()=>{
fs?(fullscreen.innerText='退出全屏',papa.requestFullscreen()):(fullscreen.innerText='全屏欣赏',document.exitFullscreen());
fs=!fs;
};
papa.addEventListener('mousemove',()=>{
clearTimeout(fsTimer);
fullscreen.style.opacity='1';
fsTimer=setTimeout(()=>{fullscreen.style.opacity='0';},3000);
});
papa.addEventListener('mousemove',()=>{
clearTimeout(mdivTimer);
mdiv.style.opacity='1';
mdivTimer=setTimeout(()=>{mdiv.style.opacity='0';},3000);
});
papa.addEventListener('mousemove',()=>{
clearTimeout(fsTimer);
fullscreen.style.opacity='1';
fsTimer=setTimeout(()=>{fullscreen.style.opacity='0';},3000);
});
mdiv.addEventListener('click',()=>{
if(aud.paused){
aud.play().catch(e=>{
console.log('音频播放失败（可能需要用户交互）:',e);
alert('请先点击页面任意位置激活媒体播放权限，再点击播放按钮！');
});
}else{
aud.pause();
}
});
window.addEventListener('load',()=>{
if(lyrics.length>0){
initLetterAnimation(currentLyricEl,lyrics.text);
aud.dispatchEvent(new Event('timeupdate'));
if(isPlaying&&!aud.paused){
setTimeout(()=>playRotateAnimation(currentLyricEl),1000);
}
}else{
currentLyricEl.textContent='歌词加载失败';
}
});
</script>
</body>
</html>

偶然~ 发表于 2025-12-1 11:33

杨帆制作的音画太棒了！

偶然~ 发表于 2025-12-1 11:33

视频唯美

偶然~ 发表于 2025-12-1 11:33

背景歌声动听

偶然~ 发表于 2025-12-1 11:33

制作大气

偶然~ 发表于 2025-12-1 11:33

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

偶然~ 发表于 2025-12-1 11:33

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

偶然~ 发表于 2025-12-1 11:33

感杨帆你带来的精彩，辛苦了！祝杨帆开心幸福、阖家安康！

红影 发表于 2025-12-1 11:58

这个特色歌词同步真漂亮，歌词的同步是变色的而且还会跳跃呢。
视频的选用也漂亮，如此美丽的芦苇丛{:4_204:}

红影 发表于 2025-12-1 11:59

欣赏杨帆精美音画{:4_199:}

杨帆 发表于 2025-12-1 15:29

偶然~ 发表于 2025-12-1 11:33
杨帆制作的音画太棒了！

问好偶然~，谢谢鼓励，祝兄弟开心{:4_191:}

杨帆 发表于 2025-12-1 15:32

红影 发表于 2025-12-1 11:58
这个特色歌词同步真漂亮，歌词的同步是变色的而且还会跳跃呢。
视频的选用也漂亮，如此美丽的芦苇丛{:4_20 ...

是，看到亚伦老师的特效歌词很新颖，作了一点尝试，谢谢影子鼓励，祝开心天天{:4_204:}

偶然~ 发表于 2025-12-1 15:40

杨帆 发表于 2025-12-1 15:29
问好偶然~，谢谢鼓励，祝兄弟开心

{:4_180:}

杨帆吉祥如意

红影 发表于 2025-12-1 19:11

杨帆 发表于 2025-12-1 15:32
是，看到亚伦老师的特效歌词很新颖，作了一点尝试，谢谢影子鼓励，祝开心天天

是啊，那个歌词特效特别漂亮呢。杨帆 这个也很漂亮{:4_187:}

小文 发表于 2025-12-1 19:13

欣赏！

清茶煮雪 发表于 2025-12-3 11:12

欣赏老师精美音画，设计制作真棒，超赞！{:4_199:}

清茶煮雪 发表于 2025-12-3 11:13

图美歌靓，动效好看，赏心悦目，{:4_187:}
页: [1]
查看完整版本: 芦 花（学习亚伦老师帖代码）