远 情
本帖最后由 杨帆 于 2025-11-21 15:00 编辑 <br /><br /><style>.container{position:relative;margin:130px 0;left:calc(50% - 81px);transform:translateX(-50%);width:clamp(600px,90vw,1400px);height:auto;aspect-ratio:16/9;box-shadow:0px 0px 1px 2px #99ff99,0px 0px 1px 2px #082501,0px 0px 5px 5px #AEA971;overflow:hidden;border-radius:1%;text-align:center;background:#000 url('https://upfile.mp3.wf/view.php/fc0d1d99ae0f49d0eb8e7e55c74e6d37.png') no-repeat center/cover;user-drag:none;user-select:none;z-index:1;--state:running;}
.vid{position:absolute;width:100%;height:100%;left:0%;top:0%;object-fit:cover;pointer-events:none;mask:linear-gradient(to right top,red 0%,transparent 90%);-webkit-mask:linear-gradient(to right top,red 0%,transparent 90%);opacity:.5;z-index:-1;}
.animated-image{display:none;object-fit:cover;position:absolute;left:30%;top:20%;z-index:1;width:370px;height:200px;transform:rotate(52deg);-webkit-mask-image:radial-gradient(circle,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 75%);mask-image:radial-gradient(circle,rgba(0,0,0,1) 20%,rgba(0,0,0,0) 65%);}
.animated-image.active{display:block;}
.play-btn{position:absolute;left:2%;top:2%;width:120px;height:120px;cursor:pointer;z-index:2;}
.play-btn.playing{animation:rotate 8s linear infinite var(--state);}
#tmsg { position: absolute; z-index: 10; font: normal 14px sans-serif; color: #fff; top:7%; left:3%; }
@keyframes rotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
#fullscreen{position:absolute;top:30px;right:30px;font:normal 1.5em 楷体;color:#fff;text-shadow:0 0 3px #000;opacity:1;cursor:pointer;user-select:none;z-index:8;}
#fullscreen:hover{font-style:italic;}
#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.8em/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%;}}
#prog{ position: absolute; width: 45%;height:5px; left:27.5%;bottom:3%;z-index: 3;cursor: pointer;--display:block;display: var(--display);background: #666;accent-color: #ADFF2F; }
</style>
<div class="container" id="papa">
<img id="play-pause-btn" class="play-btn" style="-webkit-mask-image:radial-gradient(circle,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 75%);mask-image:radial-gradient(circle,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 65%);" src="https://bbs.cnzv.cc/up/upload/pic/62/20251114-1fab01d130c58aee5aeba5274d9e0907.png" title="播放/暂停" alt=""/>
<progress id="prog"></progress>
<div id="tmsg">00:00|00:00</div>
<div data-lrc="" id="lrc"></div>
<img id="animated-gif" class="animated-image" src="https://upfile.mp3.wf/view.php/3c6f74b2370ce61b0968b9786114606e.gif">
<img id="static-image" class="animated-image active" src="https://upfile.mp3.wf/view.php/a1a61ceb7667509cbe3a4cd27cee2f2a.gif">
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/29/5b54a304deb3e.mp4" autoplay loop muted=""></video>
<audio id="audio-player" src="https://upfile.mp3.wf/view.php/1342953926d014b6596b26f9cef90fba.mp3" autoplay loop></audio>
<span id="fullscreen">全屏欣赏</span>
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
const prog=document.querySelector('#prog');
const aud=document.querySelector('#audio-player');
const playPauseBtn=document.getElementById('play-pause-btn');
const animatedGif=document.getElementById('animated-gif');
const staticImage=document.getElementById('static-image');
const vid=document.querySelector('.vid');
const lrcEl=document.getElementById('lrc');
const tmsg=document.getElementById('tmsg');
if(!aud||!playPauseBtn||!animatedGif||!staticImage||!lrcEl){console.warn('核心元素缺失，功能无法正常运行');return;}
prog.title = document ? '播放进度' : '';
aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
let progTimer;
papa.addEventListener('mousemove',()=>{
clearTimeout(progTimer);
prog.style.opacity='1';
progTimer=setTimeout(()=>{prog.style.opacity='0';},3000);
});
aud.addEventListener('timeupdate',()=>{
tmsg.innerText=toMin(aud.currentTime)+' | '+toMin(aud.duration);
});
function toMin(val){
if(!val)return'00:00';
val=Math.floor(val);
let min=parseInt(val/60);
let sec = val % 60;
if(min<10)min='0'+min;
if(sec<10)sec='0'+sec;
return min+':'+sec;
}
aud.addEventListener('play',function(){
playPauseBtn.classList.add('playing');
animatedGif.classList.add('active');
staticImage.classList.remove('active');
lrcEl.style.setProperty('--state','running');
playPauseBtn.style.setProperty('--state', 'running');
});
aud.addEventListener('pause',function(){
playPauseBtn.classList.remove('playing');
staticImage.classList.add('active');
animatedGif.classList.remove('active');
lrcEl.style.setProperty('--state','paused');
playPauseBtn.style.setProperty('--state', 'paused');
});
playPauseBtn.addEventListener('click',function(){
if(aud.paused){
vid.play();
aud.play().then(()=>{this.classList.add('playing');}).catch(e=>{console.log('播放被阻止，请先点击页面再尝试:',e);});
}else{
aud.pause();
vid.pause();
this.classList.remove('playing');
}
});
const fullscreenEl=document.getElementById('fullscreen');
let fs=true;
let fsTimer;
if(fullscreenEl){
fullscreenEl.onclick=()=>{
if(fs){
fullscreenEl.innerText='退出全屏';
if(papa.requestFullscreen){papa.requestFullscreen();}
else if(papa.webkitRequestFullscreen){papa.webkitRequestFullscreen();}
else if(papa.msRequestFullscreen){papa.msRequestFullscreen();}
}else{
fullscreenEl.innerText='全屏欣赏';
if(document.exitFullscreen){document.exitFullscreen();}
else if(document.webkitExitFullscreen){document.webkitExitFullscreen();}
else if(document.msExitFullscreen){document.msExitFullscreen();}
}
fs=!fs;
};
papa.addEventListener('mousemove',()=>{
clearTimeout(fsTimer);
fullscreenEl.style.opacity='1';
fsTimer=setTimeout(()=>{fullscreenEl.style.opacity='0';},3000);
});
document.addEventListener('fullscreenchange',()=>{
fs=!document.fullscreenElement;
fullscreenEl.innerText=fs?'全屏欣赏':'退出全屏';
});
}
(function(){
const 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);
})();
function loadRippleJs(url, callback) {
let body = document.querySelector('body'),
jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
}
const rippleJsUrl = 'https://638183.freep.cn/638183/web/svg/ripple-min.js';
loadRippleJs(rippleJsUrl, () => {
rippleEffect(document.getElementById('play-pause-btn'));
});
});
</script> 音画太棒了！
音画唯美有个性
背景歌声动听
制作大气
音画合一，音乐与画面结合完美
玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】
感谢杨帆带来的精彩，辛苦了！祝你开心幸福、阖家安康！ 本帖最后由 霜染枫丹 于 2025-11-20 18:22 编辑
写字的场景太棒了！这个帖子，从创意到制作，音乐的选择都特别契合主题，完美！祝制作愉快~~{:4_190:}
杨帆也是很努力的，好学，了了老师的制作我也是很喜欢的 感谢杨帆的精彩分享{:4_187:} 偶然~ 发表于 2025-11-20 18:00
音画太棒了！
谢谢偶然~兄弟鼓励，祝开心天天{:4_191:} 霜染枫丹 发表于 2025-11-20 18:20
写字的场景太棒了！这个帖子，从创意到制作，音乐的选择都特别契合主题，完美！祝制作愉快~~
谢谢枫丹版主鼓励，祝开心天天{:4_204:} 小辣椒 发表于 2025-11-20 23:10
杨帆也是很努力的，好学，了了老师的制作我也是很喜欢的
是啊，小辣椒邀请了了老师来花潮玩吧，了了老师制作有许多精品呢{:4_204:} 这个制作真漂亮，标题字特别，写字的视频也好看。
欣赏杨帆好帖{:4_199:} 杨帆 发表于 2025-11-20 23:20
谢谢偶然~兄弟鼓励，祝开心天天
{:4_180:} 红影 发表于 2025-11-20 23:47
这个制作真漂亮，标题字特别，写字的视频也好看。
欣赏杨帆好帖
谢谢影子鼓励，祝开心天天{:4_187:} 问好杨帆，欣赏精彩美帖，写字做得真好，歌曲动听{:4_204:} 梦江南 发表于 2025-11-26 09:56
问好杨帆，欣赏精彩美帖，写字做得真好，歌曲动听
问好江南，谢谢鼓励，祝开心天天{:4_204:}
页:
[1]