梦江南 发表于 2024-12-26 15:43

2025年好运到（套用难难老师一枝梅代码）


<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(255,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="http://tuku.link/imgs/2024/12/f8cd0336ffe9de5d.jpg" alt="" />
                <img src="http://tuku.link/imgs/2024/12/0fbf69d3c5a692bb.jpg" alt="" />
                <img src="http://tuku.link/imgs/2024/12/9033b807fd4981b0.jpg" alt="" />
                <img src="http://tuku.link/imgs/2024/12/25a0f00a76990b4e.jpg" alt="" />
                <img src="http://tuku.link/imgs/2024/12/6c45c1752b6f81df.jpg" alt="" />
                <img src=http://tuku.link/imgs/2024/12/4b2677dde761a97a.jpg" alt="" />
                <img src=http://tuku.link/imgs/2024/12/8334af4118d7ff84.jpg" alt="" />
                <img src=http://tuku.link/imgs/2024/12/1a16457ae7993834.jpg" 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="2025新年好运到"></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 = `
2025新年好运到

作词 : 高國軍/高国军

作词：高国军

作曲：高捞

演唱：闫辽艳

录混：高捞

出品：浩艺影音

2025新年好运到

老人健康孩子有目标

家庭和睦眉开眼笑

其乐融融生活更美妙

2025新年好运到

工作顺心事业节节高

生意兴隆招财进宝

喜气洋洋日子会更好

抬头见喜蓝天白云飘

安居乐业雨顺风调

千家万户新年乐逍遥

一顺百顺福星高照

开门大吉财神送元宝

万事如意步步登高

东西南北新年多热闹

春回大地江山多娇

2025新年好运到

老人健康孩子有目标

家庭和睦眉开眼笑

其乐融融生活更美妙

2025新年好运到

工作顺心事业节节高

生意兴隆招财进宝

喜气洋洋日子会更好

开门大吉财神送元宝

万事如意步步登高

东西南北新年多热闹

春回大地江山多娇

2025新年好运到

老人健康孩子有目标

家庭和睦眉开眼笑

其乐融融生活更美妙

2025新年好运到

工作顺心事业节节高

生意兴隆招财进宝

喜气洋洋日子会更好

2025新年好运到

老人健康孩子有目标

家庭和睦眉开眼笑

其乐融融生活更美妙

2025新年好运到

工作顺心事业节节高

生意兴隆招财进宝

喜气洋洋日子会更好

`;
      
let opts = {
    lrcTxt:lrctxt,
    audioURL:"https://music.163.com/song/media/outer/url?id=2659300329.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>

梦江南 发表于 2024-12-26 15:45

问难难老师，开始图片出来时间怎么这么长啊？

愤怒的葡萄 发表于 2024-12-26 15:50

祝坛友们蛇年快乐，葡萄在此给坛友们拜个早年。

梦江南 发表于 2024-12-26 15:58

愤怒的葡萄 发表于 2024-12-26 15:50
祝坛友们蛇年快乐，葡萄在此给坛友们拜个早年。

谢谢葡萄祝福，祝蛇年网友身体健康，阖家幸福！

红影 发表于 2024-12-26 15:59

这笑嘻嘻的小蛇真可爱。欣赏江南好帖{:4_199:}

红影 发表于 2024-12-26 16:02

梦江南 发表于 2024-12-26 15:45
问难难老师，开始图片出来时间怎么这么长啊？

是的，我也觉得图片出来得有点慢了。有时还会有空的时候。
另外评分后出现两个歌声呢。{:4_173:}

红影 发表于 2024-12-26 16:03

这个制作真好，歌曲也都是吉利话呢，图图和音乐都很好{:4_187:}

愤怒的葡萄 发表于 2024-12-26 16:03

梦江南 发表于 2024-12-26 15:58
谢谢葡萄祝福，祝蛇年网友身体健康，阖家幸福！

也祝江南兄在蛇年一帆风顺，万事如意，身体康健！

愤怒的葡萄 发表于 2024-12-26 16:04

红影 发表于 2024-12-26 16:03
这个制作真好，歌曲也都是吉利话呢，图图和音乐都很好

祝红影姐姐在新年里闷声发大财，事事顺心，葡萄给你拜个早年了。

起个网名好难 发表于 2024-12-26 16:38

<meta name="referrer" content="never">
<div style="width:380px;height:380px;">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLbibVz3AkZ7hIUIlhjxPglibaiaklicjzJsRZRBwHKB4Y79Q0nPictYDYaEA/640" width="120" height="120">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLicKHtRgt2qicnaLpiavX5lel2hCOoibVnXicicNialpIkpxBxv5q9sfKt5leg/640" width="120" height="120">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLGD80vViczfCRJJok2x8QHzpiaZxJzNJG3Qcy2UXh25Eo46mgrPSWaD2Q/640" width="120" height="120">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLsjaCUYlbb9tia4ChGTibiarOjnwLUJq6QuOL2AqSAsoQu4y1OyyTVmHwg/640" width="120" height="120">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RL7mwxNBYLZ8sPeH0iahng4F2ylVH123qPZR6vWqA85ibiajZHe1u1oo8lg/640" width="120" height="120">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLzcMSNYj8Sws5gb0ALW4ovK6nnkMHUPxPV628vvFMT6kSlPd3pppEtA/640" width="120" height="120">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLlRwed0qibciaujcMibNFuElh8BeKrEjLtU7LibA38RzG3JicJEOA9KYUBvw/640" width="120" height="120">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLiatlkxQl0STqOicyZEcTicqhSGIFHUP4TzibLmicFdIgHHfpibZUVZkhia54w/640" width="120" height="120">
<img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/ocnaMuutcibNFwXa3lM9eDMKwISggU3RLtia57rRWZu2l9N1Xv2X4mfSmVRpjYibZicKK3jkD06ceSiaIQZrEdzic2Ag/640" width="120" height="120">
</div>

起个网名好难 发表于 2024-12-26 16:39

梦江南 发表于 2024-12-26 15:45
问难难老师，开始图片出来时间怎么这么长啊？

还好吧，没觉得太慢啊。

梦油 发表于 2024-12-26 17:10

预祝梦江南和朋友们新年快乐。

冬天的雨 发表于 2024-12-26 19:37

我感觉图片出来速度快的

冬天的雨 发表于 2024-12-26 19:37

音乐出来也是速度快

杨帆 发表于 2024-12-26 19:38

蛇年行大运，谢谢梦江南友友精彩分享{:4_204:}

世外桃源 发表于 2024-12-26 20:55

发现有二个音乐重叠

世外桃源 发表于 2024-12-26 20:55

欣赏欣赏

世外桃源 发表于 2024-12-26 20:55

感谢佳作分享

红影 发表于 2024-12-26 21:34

愤怒的葡萄 发表于 2024-12-26 16:04
祝红影姐姐在新年里闷声发大财，事事顺心，葡萄给你拜个早年了。

谢谢葡萄，大家来年一起顺顺利利，平平安安{:4_187:}

愤怒的葡萄 发表于 2024-12-26 21:45

红影 发表于 2024-12-26 21:34
谢谢葡萄，大家来年一起顺顺利利，平平安安

明年是蛇年了，希望在新的一年里有所收获吧，希望自己的身体健康，福寿双全。
页: [1] 2 3 4 5 6 7
查看完整版本: 2025年好运到（套用难难老师一枝梅代码）