一枝梅
<meta name="referrer" content="never" ><meta charset="utf-8">
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;}
#oBlk {
--w:600px;--h:800px;
width:var(--w);height:var(--h);
margin-left:calc(50% - 0.5 * var(--w));
overflow:hidden;
position:relative;
border-radius:32px;
box-shadow:4px 4px 10px black;
background:hsla(60, 50% , 80%, .4);
}
#oBlk img {
width:var(--w);height:var(--h);opacity:0;
position:absolute;left:0px;top:0px;
-webkit-mask-image: radial-gradient(black 20%, transparent 80%);
-webkit-mask-size: cover;z-index:1;
}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2.5em 楷体;
pointer-events:none;width:1.5em;height:80%;
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);
writing-mode: vertical-rl;z-index:99;left:5px;top:50px;color:hsla(240,60%, 90%, 0.7);
}
.lrcShow::before {
writing-mode: vertical-rl;
}
@keyframes bgMove0 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
@keyframes bgMove1 { from { width: 100%; height: 0; } to { width: 100%; height: 100%; } }
#processMeter {position: absolute; right: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'>
<img src="https://mmbiz.qpic.cn/mmbiz_png/u34yATOxhhfZvtaxrbDe4TcpVcf9hicUXIB9YCoIbR5uG7W4SNgW70f8KyI1TLWsyjQVu94BEx5hDep4tics9HzA/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/u34yATOxhhfZvtaxrbDe4TcpVcf9hicUXAqDu43gwibiaHNoRpiakmh6twDicfrKH15jFYx4DXmnDTdiaw1oHUqEiaX8Q/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/u34yATOxhhfZvtaxrbDe4TcpVcf9hicUXvZ1jicPBAcicpsOfbUHv4dl3yHp8SY08NtWq20phpZibpAFkrL7Mo7Nibg/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/u34yATOxhhfZvtaxrbDe4TcpVcf9hicUXBmLqrM3mtSKXlXsfb3wWbib4ESHeAtDWHibRAm2h781QICSpY5iaUpKrg/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/u34yATOxhhfZvtaxrbDe4TcpVcf9hicUXWBB3Pgz5C88wFKaLYqRA6Bc0V6OFumF0MbWQWiaCR1Oq5fmyia7ABLuQ/640" alt="" />
<img src="https://mmbiz.qpic.cn/mmbiz_png/u34yATOxhhfZvtaxrbDe4TcpVcf9hicUX2B6Eo6B7X2SJHCRjQoDVDpUyCOuuGspw6eo3aqlONB3Ey2UOTOULicg/640" alt="" />
<div id="processMeter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" id="svgObj">
<radialGradient r="0.8" id="rg">
<stop offset="0.1" stop-color="hsl(0, 70%, 50%)"></stop>
<stop offset="0.5" stop-color="hsl(10, 70%, 75%)"></stop>
<stop offset="1" stop-color="hsl(30, 70%, 90%)"></stop>
</radialGradient>
<path d="M 100 50 A 20 13.333333333333334 0 0 0 140 50 A 20 13.333333333333334 0 0 0 100 50 A 20 13.333333333333334 72 0 0 112.36067977499789 88.04226065180615 A 20 13.333333333333334 72 0 0 100 50 A 20 13.333333333333334 144 0 0 67.63932022500211 73.51141009169893 A 20 13.333333333333334 144 0 0 100 50 A 20 13.333333333333334 216 0 0 67.63932022500211 26.48858990830108 A 20 13.333333333333334 216 0 0 100 50 A 20 13.333333333333334 288 0 0 112.36067977499789 11.957739348193854 A 20 13.333333333333334 288 0 0 100 50 " fill-rule="evenodd" fill="url(#rg)" id="mCtrl"></path>
<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>
<div class="lrcShow" data-lrc="一枝梅"></div>
</div>
<script>
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 = () => {
const keyFrames = [
[
[
{offset: 0.0, opacity:0,transform:'scale(0.3)'},
{offset: 0.5, opacity:1,transform:'scale(1.05)'},
{offset: 0.7, opacity:1,transform:'scale(0.9)'},
{offset: 1.0, opacity:1,transform:'scale(1)'}
],
[
{offset: 0.0, transform:'scale(1)'},
{offset: 0.25,transform:'scale(0.95)'},
{offset: 0.75,transform:'scale(1.1)'},
{offset: 1.0, opacity:0,transform:'scale(0.3)'}
]
],
[
[
{offset:0, opacity:0, transform:'translateY(-30%)'},
{offset:1, opacity:1, transform:'translateY(0)'}
],
[
{opacity:1, transform:'translateY(0)'},
{opacity:0, transform:'translateY(30%)'}
]
],
[
[
{offset:0, transformOrigin:'left bottom',transform:'rotate(-90deg)',opacity:0},
{offset:1, transformOrigin:'left bottom',transform:'rotate(0)', opacity:1}
],
[
{offset:0, transformOrigin:'right bottom',transform:'rotate(0)', opacity:1},
{offset:1, transformOrigin:'right bottom',transform:'rotate(-90deg)', opacity:0}
]
],
[
[
{offset:0, transform:'perspective(400px) rotateX(90deg)',opacity:0 },
{offset:.4, transform:'perspective(400px) rotateX(-10deg)' },
{offset:.7, transform:'perspective(400px) rotateX(10deg)' },
{offset:1, transform:'perspective(400px) rotateX(0)', opacity:1 }
],
[
{offset:0, transform:'perspective(400px) rotateX(0)', opacity:1},
{offset:1, transform:'perspective(400px) rotateX(90deg)', opacity:0}
]
],
[
[
{offset:0, transform:'translateY(1200px) scale(.7)',opacity:.7},
{offset:.8,transform:'translateY(0) scale(.7)', opacity:.7},
{offset:1, transform:'scale(1)', opacity:1}
],
[
{offset:0, transform:'scale(1)',opacity:1},
{offset:.2,transform:'translateY(0) scale(.7)',opacity:.7},
{offset:1, transform:'translateY(700px) scale(.7)',opacity:.7}
]
],
[ // Roll in/out
[
{offset:0, transform: 'translateX(-800px) rotate(-540deg)', opacity: 0 },
{offset:1, transform: 'translateX(0) rotate(0deg)', opacity: 1 }
],
[
{offset:0, transform: 'translateX(0) rotate(0deg)', opacity: 1 },
{offset:1, transform: 'translateX(-1000px) rotate(-540deg)', opacity: 0 }
]
],
[
[ // PuFF in/out
{offset:0, transform: 'scale(2)', filter: 'blur(4px)', opacity: 0 },
{offset:1, transform: 'scale(1)', filter: 'blur(0px)', opacity: 1 }
],
[
{offset:0, transform: 'scale(1)', filter: 'blur(0px)', opacity: 1 },
{offset:1, transform: 'scale(2)', filter: 'blur(4px)', opacity: 0 }
]
],
[ // scale-in/out-center
[
{offset:0, transform: 'scale(0)', opacity: 1 },
{offset:1, transform: 'scale(1)', opacity: 1 }
],
[
{offset:0, transform: 'scale(1)', opacity: 1 },
{offset:1, transform: 'scale(0)', opacity: 1 }
]
]
];
const EffectTiming =
[
{
duration: 2000,
iterations: 1,
delay: 0,
fill: 'forwards'
},
{
duration: 2000,
iterations: 1,
delay: 9000,
fill: 'forwards'
}
];
const lrctxt = `
一枝梅
路边一枝梅
含笑吐芳菲
不惧寒风起
任凭冰雪摧
路边一枝梅
花香惹人醉
傲骨铮铮浩然气
万花飞谢更妩媚
待到春风起
花瓣片片坠
寒苦岁月不低头
冰雪消融泪花飞
小小一枝梅
流泪的花蕊
让人心怜
爱你心醉
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=431080654.mp3",
}
let lrcPlayer = new lrcPlayerY(opts);
let imgSet = document.querySelectorAll('#oBlk > img');
let aniObjs = ;
function chg_cur_pic() {
let aniIdx = parseInt(Math.random() * keyFrames.length);
let Idx = parseInt(Math.random() * imgSet.length);
for(let i = 0; i < EffectTiming.length; i++) {
if(aniObjs) aniObjs.cancel();
//console.log(oBlk.offsetWidth,oBlk.offsetHeight);
aniObjs = imgSet.animate(keyFrames, EffectTiming);
}
aniObjs.onfinish = chg_cur_pic;
}
chg_cur_pic();
// 格式化时间数据
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'),aniObjs.forEach(aObj => {if(aObj) aObj.pause()}))
: (mCtrl.style.setProperty('--rState','running'),aniObjs.forEach(aObj => {if(aObj) aObj.play()}));
}
// 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_199:} 这些国画的一枝梅价值一定不菲。 梦江南 发表于 2024-12-24 11:54
老师厉害了，把播放器反过来了。
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
换个玩法{:5_106:} 梦江南 发表于 2024-12-24 11:56
这些国画的一枝梅价值一定不菲。
看着还行就拿来做帖子。 本帖最后由 起个网名好难 于 2024-12-24 14:51 编辑 <br /><br />把路径由
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
<g fill='none' stroke-width='5'>
<path d="M 3 97 Q 100 -90, 197 97" stroke="lightgray"></path>
<path d="M 3 97 Q 100 -90, 197 97" stroke="pink"></path>
</g>
<g text-anchor="middle" dominant-baseline="middle" fill="red" style="font-size:16px;">
<text x="80%" y="85%">00:00</text>
<text x="20%" y="85%">00:00</text>
</g>
</svg>
改为
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
<g fill='none' stroke-width='5'>
<path d="M 40 97 C -120 -25,330 -25, 155 97" stroke="lightgray"></path>
<path d="M 40 97 C -120 -25,330 -25, 155 97" stroke="pink"></path>
</g>
<g text-anchor="middle" dominant-baseline="middle" fill="red" style="font-size:16px;">
<text x="80%" y="55%">00:00</text>
<text x="20%" y="55%">00:00</text>
</g>
</svg>
起个网名好难 发表于 2024-12-24 12:58
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--r ...
好好的改它干嘛？ 太美啦 太美啦太美啦！{:4_178:}{:4_174:}{:4_190:} 图好漂亮哇，我都想把它给顺走，等小辣椒有时间给俺 做模板{:4_189:} 这女生二声部重唱太好听了！我切易云去找找，下载个歌谱，哪天有空来学一下，就用您的图图好了。{:4_173:} 光看画就被吸引住了{:4_199:} 制作真美，羡慕老师高才 感谢佳作分享 梦江南 发表于 2024-12-24 13:58
好好的改它干嘛？
原来的路径感觉不好看，变了个样子，结果帖子就改废了{:5_102:} 樵歌 发表于 2024-12-24 14:08
太美啦 太美啦太美啦！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 樵歌 发表于 2024-12-24 14:09
图好漂亮哇，我都想把它给顺走，等小辣椒有时间给俺 做模板
谢谢你帮我把帖子修复！ 世外桃源 发表于 2024-12-24 14:48
光看画就被吸引住了
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif 世外桃源 发表于 2024-12-24 14:49
制作真美，羡慕老师高才
谢谢夸奖， 马马虎虎能看得过去。 如此美丽的梅花，清净飘逸。
欣赏难难好帖{:4_199:} 红影 发表于 2024-12-24 17:08
如此美丽的梅花，清净飘逸。
欣赏难难好帖
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif