论坛 › 动画音画 › 心情好 一切皆圆满

起个网名好难 发表于 2025-1-3 09:41

心情好 一切皆圆满

<meta name="referrer" content="never" >
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;--w:640px; --h:690px;}
        #oBlk        {
                width:var(--w);height:calc(var(--h) + 80px);margin:auto;
                background-color:hsl(0, 0%, 90%);
                position:relative;
                box-shadow:3px 3px 8px darkgray;
                overflow:hidden;border-radius:24px;
                font-size:12px;
        }

        /**        不满意一般设置也可以调整下                */
        .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;}
        #img_area        {
                width:calc(13 * var(--w));height:var(--h);
                position: absolute;
                left:0px;left:0px;overflow:hidden;
                animation: mleft 65s steps(13) infinite var(--rState);
        }
        #img_area:hover        {animation-play-state: paused;cursor:pointer;}
        #img_area img        {width:var(--w); height:calc(var(--h) + 30px);float:left;}
        @keyframes        mleft        {to {left:calc(-13 * var(--w));}}

        #processMeter        {position: absolute; right:2%; bottom:5px; width: 140px; height:70px; 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="img_area">
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOl4RpkJmQUrTkBwz5u665l69J4mJZFzMJ5Wm5huxB0AZUp7j4JJKwhEg/640" class="roundGrid" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOlGyekSthAVvlQEYibVGfRKAPEMYYIYtQCwNrvMZDShxHiaKIfb27HosHg/640" class="roundGrid" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOlWwyMDgic9pAMzCcxFs9eiahrTLib1Cdj2ibyLwpzqSHEnI4eKJGskRgv5A/640" class="roundGrid" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOl79Xz6XTZLopj8X195Q7icrdZ9zaEe5jBk7zDkuFlFYvcgj5D1XgaCpA/640" class="roundGrid" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOl4U5FibSNXwH6VvzFDEDHdeGxLocoH5slXEhoxHfvT6uEcXT64ibMcwEQ/640" class="roundGrid" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOlo9pR5I3Oh174ia2qLqQZnBvicPFS7zL88yIPQBbQa1Wmd03CA1KagQiaw/640" class="roundGrid" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOlQ9ric578Wsc5UFQQabNCrgDjFcia6eLxNYDwC6K11q12pgicR7U7gr0uA/640" class="roundGrid" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOlpFLHQL9G1Jw2B2Va5iacuwrTYxKLLhZzicQYsZh5g5P59BLG4zx3BtHA/640" class="roundGrid" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOlFfQpaD6IlZUbdLcooRnf7ZdV0xd22xWdHe1z2p9MFu5c8ZUgjFfL3A/640" class="roundGrid" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOldQBfG7DIiauibA7C0vEGXUVgBTqjYbZHw1wHiaQ2LowibtNaY2ZPdzWGEw/640" class="roundGrid" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOlvUvsc0eKcrxX3NrEvk7nk0mDd8wCDXzdL9byBQibIAKicsk7jG9oq7PA/640" class="roundGrid" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOlsI8INqLX1Z4ocy5N9DfnfnAFU2r7RtjQDqjS8jGe3Z9n1P1ePx52vw/640" class="roundGrid" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RP2icJ8DEVeDAAg0ETQDMOlG6yiceVtqoVOTjyvaHtQ5T6mc3ib8vhQM3bh8bWCibY3zLbDPECB973gw/640" class="midGrid" />
        </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="http://p2.music.126.net/pthsS8OZsCa3XEwPfiMzVA==/109951164677240842.jpg" width="100" height='100' x="50" y="0" id="mCtrl" clip-path="url(#clip)" preserveAspectRatio="none" />
                        <g fill='none' stroke-width='8'>
                                <path d="M 40 97 C -120 -25,330 -25, 150 97 Z" stroke="pink" id="bgc"></path>
                                <path d="M 40 97 C -120 -25,330 -25, 150 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 =`
圆圆满满
圆圆满满呀
快乐的片段
双双对对的相伴
幸福吹不散

圆圆满满呀
时光在流转
聚聚散散的变化
依然会光亮

春风起年已降临
在这片大地呀
温暖着你的手心

虔诚香离不开
希望姻缘的美意
喧闹大街和小巷

烟花声呀
听幸福的响亮

红淘淘
竹报平安的想象
团圆年饭
充满爱的地方

圆圆满满呀
时光在流转
只因为彼此
把对方捧在心上

`;

var opts = {
        lrcTxt:lrc,
        audioCtrl:'mDisk',
        //        歌曲MP3链接放这里
        audioURL:'https://music.163.com/song/media/outer/url?id=5237198.mp3'
        //audioURL:'https://cccimg.com/view.php/aa761e148027a311dfb213e0976bb941.aac'
};
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-3 10:27

这个好，全是吉利话儿，而且用手势来表达，很别致{:4_199:}

红影 发表于 2025-1-3 10:36

心情好 一切皆圆满。
这个说得太对了，心情好，一切都不是事，肯定生活过得顺顺利利{:4_205:}

红影 发表于 2025-1-3 10:37

借难难好帖，同祝大家新的一年万事顺意{:4_187:}

起个网名好难 发表于 2025-1-3 16:52

红影 发表于 2025-1-3 10:27
这个好，全是吉利话儿，而且用手势来表达，很别致

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

起个网名好难 发表于 2025-1-3 16:55

红影 发表于 2025-1-3 10:36
心情好 一切皆圆满。
这个说得太对了，心情好，一切都不是事，肯定生活过得顺顺利利

https://5b0988e595225.cdn.sohucs.com/images/20190710/4221f265bbfb4811afe8efcce0dc93b1.gif

梦江南 发表于 2025-1-3 17:24

心情好 一切皆圆满，欣赏老师好帖。{:4_187:}

红影 发表于 2025-1-3 19:45

起个网名好难 发表于 2025-1-3 16:52


不客气，问好难难{:4_187:}

红影 发表于 2025-1-3 19:45

起个网名好难 发表于 2025-1-3 16:55


谢谢难难的美好祝福{:4_187:}

起个网名好难 发表于 2025-1-3 20:02

梦江南 发表于 2025-1-3 17:24
心情好 一切皆圆满，欣赏老师好帖。

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

杨帆 发表于 2025-1-3 20:29

谢谢老师精彩分享！
新的一年，祝您多喜乐、长安宁，所愿皆所成！

小辣椒 发表于 2025-1-3 22:12

打开帖就是欢乐的场面{:4_205:}

小辣椒 发表于 2025-1-3 22:13

难难新年快乐！新年有好运{:4_205:}

马黑黑 发表于 2025-1-3 22:54

心态决定一切

起个网名好难 发表于 2025-1-4 06:20

杨帆 发表于 2025-1-3 20:29
谢谢老师精彩分享！
新的一年，祝您多喜乐、长安宁，所愿皆所成！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

https://p5.itc.cn/q_70/images03/20210115/cf2a49614083467d8b5186f78bd85524.gif

起个网名好难 发表于 2025-1-4 06:21

小辣椒 发表于 2025-1-3 22:12
打开帖就是欢乐的场面

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

起个网名好难 发表于 2025-1-4 06:22

小辣椒 发表于 2025-1-3 22:13
难难新年快乐！新年有好运

https://img0.baidu.com/it/u=441426405,2459688976&fm=253&fmt=auto&app=138&f=GIF?w=500&h=500

起个网名好难 发表于 2025-1-4 06:24

马黑黑 发表于 2025-1-3 22:54
心态决定一切

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

https://dingyue.ws.126.net/2024/0413/e9448c37g00sbuoad00f2d200f000f0g00630063.gif

秋思梦景 发表于 2025-1-4 08:08

问候老师好！精美音画佳作！精心制作分享。为您点赞！祝您幸福安康！{:4_204:}{:5_116:}

起个网名好难 发表于 2025-1-4 08:32

秋思梦景 发表于 2025-1-4 08:08
问候老师好！精美音画佳作！精心制作分享。为您点赞！祝您幸福安康！

https://n.sinaimg.cn/sinakd202155s/670/w370h300/20210505/422f-kppteat0208404.gif

查看完整版本: 心情好 一切皆圆满