论坛 › 动画音画 › 腊八腊八 马上就发

起个网名好难 发表于 2025-1-7 11:41

腊八腊八 马上就发

<meta name="referrer" content="never" >
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;--w:640px; --h:720px;}
#oBlk        {width:var(--w); height:calc(var(--h) - 30px);overflow:hidden;position:relative;margin:24px auto;box-shadow:3px 3px 8px darkgray;border-radius:24px;font-size:10px;}
#imgHold        {width:calc(6 * var(--w));height:var(--h);position:absolute;left:0px;top:0px;animation: mleft 66s steps(6) infinite var(--rState);}
#imgHold img        {width:var(--w);height:var(--h);float:left;}
        @keyframes        mleft        {to {left:calc(-6 * var(--w));}}
        /**        不满意一般设置也可以调整下                */
        .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:10%;bottom:-10px;color:hsla(240,60%, 90%, 0.7);
        }
        .lrcShow:before        {color:transparent;}
        #processMeter        {position: absolute; right:2%; bottom:5px; width: 120px; height:60px; cursor: pointer; z-index:99;}
        #mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
        @keyframes        rot{to{transform: rotate(1turn)}}
</style>

<div id="oBlk">
        <div id="imgHold">
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7TcSHKGeKKjkMLJH6XZmJQx4SspurnZ8p5RfQYVXZ0FwSfIrYhCCOicVbVaS5pRqYoa6NK2CNsy1zw/640" alt="" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7TcSHKGeKKjkMLJH6XZmJQxicqzCaWBTLicWFdmHHVS5DK0MYE0rgBMK8P2pqQQfDnkUicJd91EqZia9g/640" alt="" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7TcSHKGeKKjkMLJH6XZmJQxQsIAEXLibHZh2EARHL5bBVyVhM4Hv7J0tia3kE1c6B5ZQ4Xd4icbUfFaw/640" alt="" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7TcSHKGeKKjkMLJH6XZmJQxXffaGlgqobgcfiaZbubvSHuulchKbpArODdcNP8mBDQBgWjGvr4MNrg/640" alt="" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7TcSHKGeKKjkMLJH6XZmJQxLzEGgDGcHtenibL7QyVyGOvNLRMWfBhePc3bCQicbMsrGS1jHy8LyqNg/640" alt="" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7TcSHKGeKKjkMLJH6XZmJQxZM3Tb5kSXsrnR0oXrnjvTJu3Mol11xVPmL2aX30u2KYTUczBIe9nmQ/640" alt="" />
        </div>
                <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='8'>
                                <path d="M 40 97 C -120 -25,330 -25, 157 97 Z" stroke="pink" id="bgc"></path>
                                <path d="M 40 97 C -120 -25,330 -25, 157 97 Z" stroke="brown" 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 = () => {
const lrc =`
作曲 : 小王涛涛\n小孩小孩你别馋\n过了腊八就是年\n腊八正值数九天\n一碗热粥暖心田\n再来一瓣腊八蒜\n驱走疾病御严寒\n一家一粥一香甜\n一年一岁一团圆\n小孩小孩你别馋\n过了腊八就是年\n腊八正值数九天\n一碗热粥暖心田\n再来一 瓣腊八蒜\n驱走疾病御严寒\n一家一粥一香甜\n一年一岁一团圆\n `;

var opts = {
        lrcTxt:lrc,
        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里
        audioURL:'https://music.163.com/song/media/outer/url?id=2096364317.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
                        ? (oBlk.style.setProperty('--rState','paused'))
                        : (oBlk.style.setProperty('--rState','running'));
        }
        //        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-1-7 12:56

咱们中华文明的传承之一吧。今天俺家做了。{:4_173:}

杨帆 发表于 2025-1-7 13:50

谢谢精彩分享，祝福难难老师腊八节安康{:4_191:}

梦江南 发表于 2025-1-7 14:38

欣赏老师音画佳作。腊八快乐，万事如意。

起个网名好难 发表于 2025-1-7 15:28

樵歌 发表于 2025-1-7 12:56
咱们中华文明的传承之一吧。今天俺家做了。

粥香浓情腊八天，甜蜜温馨绕心间。愿你日子“红红火火”，家庭和美满福缘。

起个网名好难 发表于 2025-1-7 15:29

杨帆 发表于 2025-1-7 13:50
谢谢精彩分享，祝福难难老师腊八节安康

腊八粥香飘四方，甜蜜滋味暖心房。愿你事事“心想事成”，幸福安康永绵长。

起个网名好难 发表于 2025-1-7 15:29

梦江南 发表于 2025-1-7 14:38
欣赏老师音画佳作。腊八快乐，万事如意。

腊八时节，粥香四溢，愿你的生活如诗如画，“四季平安”，幸福绵长。

老谟深虑 发表于 2025-1-7 16:03

         老师腊八节快乐！

起个网名好难 发表于 2025-1-7 16:34

老谟深虑 发表于 2025-1-7 16:03
老师腊八节快乐！

寒风中的温暖，腊八的粥最甜，愿你“六六大顺”，事业有成，家庭美满。

红影 发表于 2025-1-7 17:11

年年腊八事事“粥”全，这个说得真好{:4_187:}

红影 发表于 2025-1-7 17:12

难难的这个贺帖真好，那么喜庆，又那么喜庆。借难难好帖，同祝大家腊八节快乐{:4_187:}{:4_177:}

梦油 发表于 2025-1-7 17:15

祝福难难和朋友们腊八快乐、幸福安康！

起个网名好难 发表于 2025-1-7 18:06

红影 发表于 2025-1-7 17:11
年年腊八事事“粥”全，这个说得真好

一碗热粥，一份温情，腊八佳节，愿你“福星高照”，笑口常开，好运连连。

起个网名好难 发表于 2025-1-7 18:07

红影 发表于 2025-1-7 17:12
难难的这个贺帖真好，那么喜庆，又那么喜庆。借难难好帖，同祝大家腊八节快乐

生日到，福气到！愿你拥有无尽的欢笑和幸福，每一天都充满阳光和温暖。愿你的每一步都坚定有力，每一个梦想都能实现。祝你生日快乐，万事如意！

起个网名好难 发表于 2025-1-7 18:08

梦油 发表于 2025-1-7 17:15
祝福难难和朋友们腊八快乐、幸福安康！

腊八时节，粥香四溢，愿你的生活如诗如画，“四季平安”，幸福绵长。

红影 发表于 2025-1-7 23:40

起个网名好难 发表于 2025-1-7 18:06
一碗热粥，一份温情，腊八佳节，愿你“福星高照”，笑口常开，好运连连。

这祝福真人，让人心里暖暖的{:4_187:}

红影 发表于 2025-1-7 23:41

起个网名好难 发表于 2025-1-7 18:07
生日到，福气到！愿你拥有无尽的欢笑和幸福，每一天都充满阳光和温暖。愿你的每一步都坚定有力，每一个梦 ...

多谢难难，感谢你的美好祝福{:4_187:}

秋思梦景 发表于 2025-1-8 06:29

问候老师好！精美音画佳作，精心制作分享。为您点赞！祝您幸福快乐！

樵歌 发表于 2025-1-8 08:11

起个网名好难 发表于 2025-1-7 15:28
粥香浓情腊八天，甜蜜温馨绕心间。愿你日子“红红火火”，家庭和美满福缘。

家庭和美满福缘，日子过得比蜜甜。愿您天天都开心，三九寒天很温暖。

起个网名好难 发表于 2025-1-8 08:52

秋思梦景 发表于 2025-1-8 06:29
问候老师好！精美音画佳作，精心制作分享。为您点赞！祝您幸福快乐！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

查看完整版本: 腊八腊八 马上就发