《沁园春·雪》- 学习难难老师贴《白狐》

杨帆 · 发表于 2025-1-16 19:55

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由杨帆于 2025-1-17 18:11 编辑

红影 · 发表于 2025-1-16 20:13

学得很好

红影 · 发表于 2025-1-16 20:14

很喜欢的意境，太美了

红影 · 发表于 2025-1-16 20:17

天公岂敢与我试比高，主席的词非常大气磅礴。

红影 · 发表于 2025-1-16 20:24

欣赏杨帆好帖

秋思梦景 · 发表于 2025-1-16 21:01

问候老师好！精美音画佳作，精心制作分享！为您加分点赞！

起个网名好难 · 发表于 2025-1-16 22:29

本帖最后由起个网名好难于 2025-1-16 22:30 编辑

登录/注册后可看大图

这一行有混入的乱码。
@import url(<a href="https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css" target="_blank">https://file.uhsea.com/2403/f45f ... 3eae6fa88eb78YS.css</a>);

杨帆 · 发表于 2025-1-16 23:25

红影发表于 2025-1-16 20:13
学得很好

谢谢鼓励，一起学习，共同进步

杨帆 · 发表于 2025-1-16 23:26

秋思梦景发表于 2025-1-16 21:01
问候老师好！精美音画佳作，精心制作分享！为您加分点赞！

谢谢梦景友友支持与鼓励，祝开心

杨帆 · 发表于 2025-1-16 23:29

起个网名好难发表于 2025-1-16 22:29
这一行有混入的乱码。
@import url(https://file.uhsea.com/2403/f45f ... 3eae6fa88eb78YS.css);

@起个网名好难老师好，在您原贴代码基础上，加了一个动图，请老师把它控制住，谢谢老师

起个网名好难 · 发表于 2025-1-17 07:55

杨帆发表于 2025-1-16 23:29
@起个网名好难老师好，在您原贴代码基础上，加了一个动图，请老师把它控制住，谢谢老师

<style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2.9em 华文中宋;
pointer-events:none;position:absolute;
left:28%;bottom: 4%;
filter: drop-shadow(2px 0px 0px white) drop-shadow(0px 2px 0px white) drop-shadow(-2px 0px 0px white) drop-shadow(0px -2px 0px white);
}
.lrcShow::before {
color:HSLA(350, 50%, 50%, 90%);
}
#oBlk {
width:1080px;height:720px; position: relative; margin:90px 0 40px calc(50% - 621px);
background: #ccc ;
padding:16px;
overflow:hidden;
border-radius:32px;
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)}}
#pic{width: 100%; height: 100%; position: absolute;top:0px; left:0px; mix-blend-mode: screen;}
</style>
<div id="oBlk">
<img id="pic" src="https://pic1.imgdb.cn/item/66b5074cd9c307b7e98f80c2.gif" alt="" />
<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://pic1.imgdb.cn/item/668809bad9c307b7e9768059.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 Z" stroke="lightgray" id="bgc"></path>
<path d="M 40 97 C -120 -25,330 -25, 150 97 Z" stroke="#FF1493" 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 type="text/javascript">
//--------------------------------------------------------------------------
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('6(\'d\'n c.a(\'2\')){j.l.q=b(){6(1.7){1.7.h.p(1.7);1.7=o;1.3.i=\'\'}6(1.9){1.8=1.9}};j.l.m=b(){g 2=c.a(\'2\');g 4=1.4,5=1.5;6(4&5){6(!1.9){1.9=1.8}2.4=4;2.5=5;2.3.k=1.3.k;2.3.f=1.3.f;2.d(\'z\').y(1,0,0,4,5);x{1.8=2.A("B/t")}s(e){1.r(\'8\');2.3.w=\'v\';1.h.u(2,1);1.3.i=\'0\';1.7=2}}}}',38,38,'|this|canvas|style|width|height|if|storeCanvas|src|storeUrl|createElement|function|document|getContext||top|var|parentElement|opacity|HTMLImageElement|left|prototype|stop|in|null|removeChild|play|removeAttribute|catch|gif|insertBefore|absolute|position|try|drawImage|2d|toDataURL|image'.split('|'),0,{}))
//----------------------------------------------------------------------------
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://pic1.imgdb.cn/item/67667728d0e0a243d4e7a047.gif",
"https://pic1.imgdb.cn/item/67667708d0e0a243d4e79fed.gif",
"https://pic1.imgdb.cn/item/676676efd0e0a243d4e79fa9.gif",
"https://pic1.imgdb.cn/item/676676d0d0e0a243d4e79f55.gif",
"https://pic1.imgdb.cn/item/66c87823d9c307b7e987195b.jpg",
"https://pic1.imgdb.cn/item/66b503ecd9c307b7e98d30c0.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[key])}};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 1080 730`});
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':1080, 'height':730, '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 =`
[00:00.39]沁园春·雪 - 黑鸭子
[00:01.21]词：毛泽东
[00:31.27]北国风光
[00:39.78]千里冰封
[00:45.87]万里雪飘
[01:01.97]万里雪飘
[01:12.46]望长城内外
[01:16.40]惟余莽莽
[01:20.09]大河上下顿失滔滔
[01:31.72]山舞银蛇
[01:35.67]原驰腊象
[01:39.44]欲与天公试比高
[01:49.89]须晴日
[01:53.73]看红装素裹
[01:59.26]分外妖娆
[02:19.07]江山如此多娇
[02:27.24]引无数英雄竟折腰
[02:35.42]江山如此多娇
[02:43.60]引无数英雄竟折腰
[02:56.25]惜秦皇汉武
[03:00.22]略输文采
[03:04.53]唐宗宋祖稍逊风骚
[03:12.49]一代天骄成吉思汗
[03:23.82]只识弯弓射大雕
[03:32.68]只识弯弓射大雕
[03:43.03]俱往矣
[03:47.81]数风流人物还看今朝
[03:50.22]数风流人物还看今朝
[03:52.56]数风流人物
[03:54.08]还看今朝
[04:00.54]还看今朝
`;
var opts = {
lrcTxt:lrc,
// 歌曲MP3链接放这里
audioURL:'https://cccimg.com/view.php/74d32de8c310a10477b1645524231d8b.mp3'
};
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(), pic.stop())
: (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations(), pic.play());
}
// SVG viewBox 与实际尺寸的比值
let factorX = svgObj.viewBox.baseVal.width / svgObj.clientWidth;
let factorY = svgObj.viewBox.baseVal.height / svgObj.clientHeight;
// 歌曲进度条鼠标移动处理
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>

复制代码

梦江南 · 发表于 2025-1-17 08:32

欣赏老师的好制作，这雪加得真好。

红影 · 发表于 2025-1-17 13:10

杨帆发表于 2025-1-16 23:25
谢谢鼓励，一起学习，共同进步

问好杨帆，周末快乐

杨帆 · 发表于 2025-1-17 16:14

起个网名好难发表于 2025-1-17 07:55

哈哈，雪花虽美，但也不可肆意任性，在难难老师手下终于学乖了！谢谢难难老师，您辛苦了！

[灌水] 《沁园春·雪》- 学习难难老师贴《白狐》

请马上登录，朋友们都在花潮里等着你哦：）

评分

点评

点评

点评

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

鹰傲苍穹

飞龙在天

王者至尊

大将风范

花潮版主

花潮美女

星月交辉

海样胸怀

火热情怀

优雅迷人

神秘浪漫

缤纷心情

草莓情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

相遇之美

一往情深

花好月圆

心香一瓣

紫色情节

金剪刀

天籁妙音

妙笔生花

风雨同行

我心永远

天长地久

幸福快乐

绚丽缤纷

喜乐安康

中秋征文

周年庆

指尖上的流年

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

花潮管理

音画大师

花潮贵宾