荷花颂--童丽王浩 - 欢乐水吧 - 花潮论坛 - Powered by Discuz! Archiver

论坛 › 欢乐水吧 › 荷花颂--童丽王浩

梦江南 发表于 2025-8-3 18:37

荷花颂--童丽王浩

<style>
/*** 以下是 https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css 的内容 **/
.lrcShow{font:bold 3em 楷体,楷体_GB2312;position:absolute;width:80%;height:2em;bottom:0px;left:10%;color:transparent;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;background:repeating-linear-gradient(
   45deg,white 1px,transparent 2px,gray 4px
),repeating-linear-gradient(-45deg,white 1px,transparent 2px,gray 4px);-webkit-background-clip:text;}.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;color:darkred;background-image:url(https://z4a.net/images/2024/01/14/auewj-fb7cv.jpg);-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
/*** 以上是 https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css 的内容 **/

:root {--rState:running;}
#oBlk    {
   --w:1080px;--h:600px;
   width:var(--w);height:var(--h);
   margin:100px auto 32px calc(50% - 0.5 * var(--w) - 81px);
   overflow:hidden;
   position:relative;
   border-radius:32px;
   box-shadow:4px 4px 10px black;
   background:hsl(60, 50% , 80%);
}
   #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 1.6em 楷体;
                     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: 120px; height:60px; cursor: pointer; z-index:999;}
#mCtrl{transform-origin:50%;animation:rot 3s linear infinite var(--rState);}
@keyframes    rot{to{transform: rotate(1turn)}}
</style>
<div id="oBlk">
<img src="https://img2.oldkids.cn/upload/2025/08/01/blog_260798238_20250801140905296.jpg " alt="" />
<img src="https://img3.oldkids.cn/upload/2025/08/01/blog_260798238_20250801140905791.jpg" alt="" />
<img src="https://img2.oldkids.cn/upload/2025/08/01/blog_260798238_20250801140905940.jpg" alt="" />
<img src="https://img4.oldkids.cn/upload/2025/08/01/blog_260798238_20250801140905701.jpg " alt="" />
<img src="https://img3.oldkids.cn/upload/2025/08/01/blog_260798238_20250801140905215.jpg" alt="" />
<img src="https://img4.oldkids.cn/upload/2025/08/01/blog_260798238_20250801140905500.jpg" alt="" />
<img src="https://img1.oldkids.cn/upload/2025/08/01/blog_260798238_20250801140905101.jpg" alt="" />
<img src="https://img4.oldkids.cn/upload/2025/08/01/blog_260798238_20250801140905114.jpg" alt="" />
<img src="https://img1.oldkids.cn/upload/2025/08/01/blog_260798238_20250801140905042.jpg" alt="" />
<img src="https://img2.oldkids.cn/upload/2025/08/01/blog_260798238_20250801141040229.jpg" alt="" />
<img src="https://img2.oldkids.cn/upload/2025/08/01/blog_260798238_20250801141040191.jpg " alt="" />
<img src="https://img2.oldkids.cn/upload/2025/08/01/blog_260798238_20250801141040124.jpg " alt="" />
<img src="https://img1.oldkids.cn/upload/2025/08/01/blog_260798238_20250801141040410.jpg" alt="" />
<img src="https://img4.oldkids.cn/upload/2025/08/01/blog_260798238_20250801141040975.jpg " alt="" />

   <div id="processMeter">
            <svg viewBox="0 0 200 100" id="svgObj">
                     
                     <g stroke-width='8'>
                     <path id='bgc' d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5" stroke="lightblue"fill="none" ></path>
                     
                     <path
                     id="fgc"
                     d="M 100 5 A 95 45 0 0 1 100 95 A 95 45 0 0 1 100 5"
                     stroke="darkred"
                     fill="none"
                     stroke-dasharray="455"
                     stroke-dashoffset="455"
                     ></path>
                     </g>
                     <defs>
               <clipPath id="clip">
                        <circle cx="100" cy="50" r="36" />
               </clilpPath>
         </defs>
                     <image xlink:href="https://img2.oldkids.cn/upload/2025/08/01/blog_260798238_20250801141041712.jpg " width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
                     <g text-anchor="middle" dominant-baseline="middle" fill='black' style="font:bold 16px;">
                     <text x="82%" y="50%" id="durTime"> </text>
                     <text x="18%" y="50%" id="curTime"> </text>
                     </g>
            </svg>
   </div>

   <div class="lrcShow" data-lrc="荷花颂"></div>
</div>

<script>

// 以下是 https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js 的内容
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=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('H G=l(){x 4.Y.15(4,18)};G.16={1h:G,Y:l(L){z=L.J.C(/(^\\s*)|(\\s*$)/g,\'\');4.8=P.1g(\'.1j\');4.q=4.V(z);4.T(L.1b)},V:l(z){H u=z.C(/(^\\s*)|(\\s*$)/g,"").S(/\\r|\\n|\\r\\n/);H 7=1d 1f();A(y i=0;i<u.c;i++){y w=u.1e(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);f(w){N=u.1i(\']\');f(N>0)J=u.R(N+1);A(m=0;m<w.c;m++){K=w.R(1).C(\']\',\'\').S(/:/);I=(+K)*1c+(+K);f(7.c==0&&I!=0){7.Q({h:0,M:\'\\1k\\O\\O\\14\\19\\1a\\17\'})}7.Q({h:+I.U(2),M:J})}}}7.1I(l(a,b){x(a.h-b.h)});y F=0;A(k=0;k<7.c-1;k++){7.e=+(7.h-7.h).U(2);F+=7.e;}y v=F/(7.c-1)+0.5;7.e=v;A(k=0;k<7.c;k++){7.e=7.e>v?v:7.e}x 7},X:l(B){4.8.1D=4.8.1F.1E=4.q.M;4.8.o.p(\'--1C\',\'1B\'+(4.9%2));4.8.o.p(\'--B\',B+\'s\');4.8.o.p(\'--E\',\'W\');4.9++},T:l(12){4.6=P.1G("13");4.6.1H=D;4.6.1A=D;4.6.1p=1r;4.6.1o=12;4.8.1l(4.6);4.9=0;4.6.j(\'1m\',()=>{4.9=0;4.6.t()});4.6.j(\'t\',()=>{4.8.o.p(\'--E\',\'W\')});4.6.j(\'10\',()=>{f(4.9==1&&4.6.Z<1){4.6.t();x D}4.8.o.p(\'--E\',\'11\')});4.6.j(\'1n\',()=>{1s.1x("13 1y, 1z t 1w 1t");});4.6.j(\'1u\',()=>{f(4.9<4.q.c){f(4.6.Z>=4.q.h){4.X(4.q.e)}}});4.8.j(\'1v\',()=>{f(4.6.11){4.6.t()}1q{4.6.10()}})}}',62,107,'||||this||mObj|lrcs|lrcShowObj|idx|||length||dur|if||seconds|index|addEventListener||function|||style|setProperty|lrcVec|||play|parts|durAvg|chkTime|return|let|lyricTxt|for|durTime|replace|false|aniPlayState|durSum|lrcPlayerY|var|_0|lrcTxt|ta|opts|words|tIdx|u0020|document|push|substr|split|genPlayer|toFixed|handleLrc|running|showLrc|init|currentTime|pause|paused|mUrl|audio|u4e5f|apply|prototype|u8f7b|arguments|u66fe|u5e74|audioURL|60|new|match|Array|querySelector|constructor|lastIndexOf|lrcShow|u00A9|appendChild|ended|error|src|autoplay|else|true|console|event|timeupdate|click|start|log|wrong|remove|muted|bgMove|aniName|innerHTML|lrc|dataset|createElement|loop|sort'.split('|'),0,{}))
// 以上是 https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js 的内容

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 = `
荷花颂 - 童丽/王浩
词：刘炽曲：程若
歌词由 www.45hk.com 提供
LRC歌词编辑：梦江南
女：万里无云好晴天
嘿
看那荷花在水面那啊
男：千万朵花儿数着它好
人人见了心喜欢
合：千万朵花儿数着它好
人人见了心喜欢
女：荷花朵朵放光彩
嘿
薄雾青纱头上戴那
啊
男：微风轻轻迎面吹来
荷花点头笑颜开
合：微风轻轻迎面吹来
荷花点头笑颜开
女：万里无云好晴天
嘿
看那荷花在水面那啊
男：千万朵花儿数着它好
人人见了心喜欢
合：千万朵花儿数着它好
人人见了心喜欢
女：荷花朵朵放光彩嘿
薄雾青纱头上戴那啊
合：微风轻轻迎面吹来
荷花点头笑颜开
微风轻轻迎面吹来
荷花点头笑颜开
`;

let opts = {
lrcTxt:lrctxt,
audioURL:"https://img3.oldkids.cn/upload/2025/08/01/blog_260798238_20250801135844019.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();
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>

梦江南 发表于 2025-8-3 18:39

鸣谢难难老师的天梯代码。

杨帆发表于 2025-8-3 19:01

本帖最后由杨帆于 2025-8-3 19:10 编辑

梦江南发表于 2025-8-3 18:39
鸣谢难难老师的天梯代码。
难难老师原创了很多优秀的代码模版

福泽后来音画制作爱好者，功德无量！

谢谢难难老师！谢谢江南精彩分享{:4_171:}

红影发表于 2025-8-3 21:48

漂亮的制作，欣赏江南好帖{:4_199:}

梦油发表于 2025-8-3 21:53

画面右下角的计时设计得好，很方便。

梦江南 发表于 2025-8-4 08:09

杨帆发表于 2025-8-3 19:01
难难老师原创了很多优秀的代码模版

福泽后来音画制作爱好者，功德无量！

谢谢杨帆对难难老师真诚中肯的点评。谢谢首席欣赏支持。早上问好！{:4_171:}

梦江南 发表于 2025-8-4 08:10

红影发表于 2025-8-3 21:48
漂亮的制作，欣赏江南好帖

谢谢影子欣赏支持，早上问好！{:4_171:}

梦江南 发表于 2025-8-4 08:10

梦油发表于 2025-8-3 21:53
画面右下角的计时设计得好，很方便。

谢谢梦油欣赏支持，早上好！{:4_171:}

梦油发表于 2025-8-4 13:56

梦江南发表于 2025-8-4 08:10
谢谢梦油欣赏支持，早上好！

彼此彼此，你对俺的支持也很不少呢。

梦江南 发表于 2025-8-4 14:00

梦油发表于 2025-8-4 13:56
彼此彼此，你对俺的支持也很不少呢。

互动增收，互动快乐。

岁月·如歌 发表于 2025-8-4 20:12

这调调好熟悉{:4_199:}

梦江南 发表于 2025-8-5 07:59

岁月·如歌发表于 2025-8-4 20:12
这调调好熟悉

早上问好岁月如歌老师，谢谢欣赏支持。祝夏安！{:4_171:}

红影发表于 2025-8-5 12:53

梦江南发表于 2025-8-4 08:10
谢谢影子欣赏支持，早上问好！

不客气啊，问好江南{:4_187:}

页: [1]

查看完整版本: 荷花颂--童丽王浩