白狐
<style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2.5em 微软雅黑;
pointer-events:none;
filter: drop-shadow(1px 0px 0px white) drop-shadow(-1px 0px 0px white) drop-shadow(0px 1px 0px white) drop-shadow(0px -1px 0px white);
z-index:99;left:40%;bottom:-10px;color:hsla(240,60%, 90%, 0.7);
}
#oBlk {
width:1422px;height:780px; position: relative; margin:90px 0 40px calc(50% - 792px);
background: #ccc ;
padding:16px;
overflow:hidden;
border-radius:36px;
box-shadow:3px 3px 6px darkgray;
}
#showSVG {position:absolute; left:0px;top:0px;width:100%;height:110%;}
#processMeter {position: absolute; leftt:3%; bottom:5px; width: 160px; height:80px; cursor: pointer; z-index:999;}
#mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
@keyframes rot{to{transform: rotate(1turn)}}
</style>
<div id="oBlk">
<div id="showSVG"></div>
<div id="processMeter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
<defs>
<clipPath id="clip">
<circle cx="100" cy="50" r="35" />
</clilpPath>
</defs>
<image xlink:href="https://img.51miz.com/Element/00/44/73/58/022417aa_E447358_0230f2da.png" width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
<g fill='none' stroke-width='5'>
<path d="M 40 97 C -120 -25,330 -25, 150 97" stroke="lightgray" id="bgc"></path>
<path d="M 40 97 C -120 -25,330 -25, 150 97" stroke="pink" id="fgc"></path>
</g>
<g text-anchor="middle" dominant-baseline="middle" fill="red" style="font-size:16px;">
<text x="82%" y="55%" id="durTime">00:00</text>
<text x="18%" y="55%" id="curTime">00:00</text>
</g>
</svg>
</div>
<divclass="lrcShow" data-lrc='白狐'></div>
</div>
<script type="text/javascript">
var sf0 = document.createElement('script');
sf0.type = 'text/javascript';
sf0.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
sf0.charset = "utf-8";
document.body.appendChild(sf0);
sf0.onload = () => {
let pics = [
"https://s3.bmp.ovh/imgs/2024/12/30/05136a470bfc5fc0.jpg",
"https://s3.bmp.ovh/imgs/2024/12/30/08483002b13e5fd5.jpg",
"https://s3.bmp.ovh/imgs/2024/12/30/cae432732cb1201f.jpg",
"https://s3.bmp.ovh/imgs/2024/12/30/48b2604602e88a90.jpg"
];
function genTagObj(parentNode,jsonData){let sObj=document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);for(let key in jsonData){if(key==='tag'){continue}else if(jsonData.hasOwnProperty(key)){sObj.setAttribute(key,jsonData)}};if(parentNode)parentNode.appendChild(sObj);return sObj};
let mysvg = genTagObj(null ,{'tag':'svg', 'id':'sObj', 'xmlns:xlink':"http://www.w3.org/1999/xlink" ,'xmlns':"http://www.w3.org/2000/svg", 'viewBox':`0 0 1422 800`});
pics.forEach((pic, idx) => {
let beginStr = idx == 0 ? `0;ep${pics.length-1}.end-1.5` : `ep${idx-1}.end-1.5`;
let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':pic, 'width':1422, 'height':800, 'x':0, 'y':0, 'opacity':0, 'preserveAspectRatio':'none'});
let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':3, 'begin':beginStr, 'fill':'freeze'});
aniObj = genTagObj(imgObj,{'tag':'animate','id':`ep${idx}`, 'attributeName':'opacity', 'from':1, 'to':0, 'dur':3, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
});
showSVG.innerHTML = mysvg.outerHTML;
const lrc =`
白狐 - 纪念版 - 陈瑞
词：孙红莺
曲：李旭辉
我是一只修行千年的狐
千年修行千年孤独
夜深人静时
可有人听见我在哭
灯火阑珊处
可有人看见我跳舞
我是一只等待千年的狐
千年等待千年孤独
滚滚红尘里
谁又种下了爱的蛊
茫茫人海中
谁又种下了爱的毒
能不能再为你跳一支舞
我是你千百年前放生的白狐
你看那衣袂飘飘衣袂飘飘
海誓山盟都化做虚无
我爱你时
你正一贫如洗寒窗苦读
离开你时
你正金榜题名洞房花烛
我是一只等待千年的狐
千年等待千年孤独
滚滚红尘里
谁又种下了爱的蛊
茫茫人海中
谁又喝下了爱的毒
能不能再为你跳一支舞
我是你千百年前放生的白狐
你看那衣袂飘飘衣袂飘飘
海誓山盟都化做虚无
能不能再为你跳一支舞
只为你临别时的那一次回顾
你看那衣袂飘飘衣袂飘飘
天长地久都化做虚无
天长地久都化做虚无
天长地久都化做虚无
`;
var opts = {
lrcTxt:lrc,
audioCtrl:'mDisk',
// 歌曲MP3链接放这里
//aaaudioURL:'https://music.163.com/song/media/outer/url?id=179521.mp3'
audioURL:'https://cccimg.com/view.php/aa761e148027a311dfb213e0976bb941.aac'
};
let lrcPlayer = new lrcPlayerY(opts);
// 格式化时间数据
let formatTime = (time) => {
let min = ('' + parseInt(time / 60)).padStart(2,'0');
let sec = ('' + parseInt(time % 60)).padStart(2,'0');
return (`${min}:${sec}`);
};
// 计算/设置控制路径有关的数据
let circlePoints = [];
let bgcLen = bgc.getTotalLength();
fgc.style.strokeDasharray = bgc.style.strokeDasharray = bgcLen;
for(let i = 0; i < bgcLen; i++) {
circlePoints.push(bgc.getPointAtLength(i));
}
// 在 timeupdate 事件处理中添加与控制路径有关的处理
lrcPlayer.mObj.addEventListener('timeupdate', function() {
let processValue = lrcPlayer.mObj.currentTime / lrcPlayer.mObj.duration;
fgc.style.strokeDashoffset = bgcLen * (1 - processValue);
durTime.textContent = formatTime(lrcPlayer.mObj.duration);
curTime.textContent = formatTime(lrcPlayer.mObj.currentTime);
});
// 动态元素监测
let runState = () => {
lrcPlayer.mObj.paused
? (mCtrl.style.setProperty('--rState','paused'),sObj.pauseAnimations())
: (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations());
}
// SVG viewBox 与 实际尺寸的比值
let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
//console.log(factorX, factorY);
// 歌曲进度条鼠标移动处理
let seeking = false;
let moveEventProc = (event) => {
if(!seeking) return;
let thePoint = 0, minV = 100;
circlePoints.forEach((point, idx ) => {
let mx = (point.x - event.offsetX * factorX), my = (point.y - event.offsetY * factorY);
let mv = mx*mx + my*my;
if(mv < minV) {
minV = mv; thePoint = idx;
}
})
let chkVal = thePoint / bgcLen;
let chkTime = lrcPlayer.mObj.duration * chkVal;
fgc.style.strokeDashoffset = bgcLen * (1 - chkVal);
let fIdx = false;
lrcPlayer.lrcVec.forEach((lrc,idx) => {
if(!fIdx && lrc.seconds >= chkTime ) {
fIdx = !fIdx; lrcPlayer.idx = idx;
lrcPlayer.mObj.currentTime = chkTime;
return fIdx;
}
});
};
fgc.addEventListener("mousemove", (event) => moveEventProc(event));
bgc.addEventListener("mousemove", (event) => moveEventProc(event));
fgc.onclick = bgc.onclick = (event) => seeking = !seeking;
// 歌曲、歌词 及 动态元素 启/停控制
mCtrl.onclick = () => {
lrcPlayer.mObj.paused ? (lrcPlayer.mObj.play()) : (lrcPlayer.mObj.pause());
}
lrcPlayer.mObj.addEventListener('play', () => runState());
lrcPlayer.mObj.addEventListener('pause', () => runState());
lrcPlayer.mObj.play().catch(_ = () => runState());
}
</script>
很喜欢的一首曲子，谢谢老师精彩分享{:4_191:} 好漂亮的白狐，好听的歌。 在难难朋友的手下，这只白狐太美了。 难难 这个图片转换的特效太美了，渐隐渐现的效果，太喜欢了{:4_178:} 清晰的画面，好听的歌曲，流畅的特效，太赞了！ 杨帆 发表于 2024-12-30 13:13
很喜欢的一首曲子，谢谢老师精彩分享
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 梦江南 发表于 2024-12-30 13:30
好漂亮的白狐，好听的歌。
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 梦油 发表于 2024-12-30 13:55
在难难朋友的手下，这只白狐太美了。
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 小辣椒 发表于 2024-12-30 14:09
难难 这个图片转换的特效太美了，渐隐渐现的效果，太喜欢了
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
找到几张图片做个淡入淡出。 小辣椒 发表于 2024-12-30 14:12
清晰的画面，好听的歌曲，流畅的特效，太赞了！
https://cccimg.com/view.php/6a1acfd3b4d74a20d5526242c682e519.webp 动听的歌 儿，好看图图，美到极致的白狐。给她取个名叫“玲珑”吧 樵歌 发表于 2024-12-30 16:03
动听的歌 儿，好看图图，美到极致的白狐。给她取个名叫“玲珑”吧
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
你的建议不错 起个网名好难 发表于 2024-12-30 15:40
难难朋友别客气。 好看的淡进淡出图片转换，收藏了。准备学习套用制作一个！谢谢老师分享！{:4_190:} 亦是金 发表于 2024-12-30 19:15
好看的淡进淡出图片转换，收藏了。准备学习套用制作一个！谢谢老师分享！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 美丽的白狐，深情的白狐，时隐时现于红尘，只为一份真情守护。
这制作真漂亮，欣赏难难好帖{:4_199:} 千年雪山，孤独等待的深情白狐，看着让人心疼。
人的自大不承认狐的情感，很凄美的故事，很美的制作{:4_187:} 问候老师好！精美音画《白狐》佳作，精心制作分享。为您点赞！祝您新年快乐！{:4_204:} 红影 发表于 2024-12-30 21:22
美丽的白狐，深情的白狐，时隐时现于红尘，只为一份真情守护。
这制作真漂亮，欣赏难难好帖
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif