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

除夕


<meta name="referrer" content="never">
<style>
:root {--rState:running;}
#oBlk {
    width: 840px;
    height: 1180px;
    margin: 30px auto;
    display: grid;
    background-color: hsl(10, 65%, 65%);
    place-items: center;
    position: relative;
    grid-template-rows: 800px 80px;
    grid-template-columns: 100%;
    box-shadow: 3px 3px 8px darkgray;
    overflow: hidden;
    border-radius: 24px;
    padding: 4px;
    font-size: 14px;
}

#showSVG {
    position: relative;
    width: 810px;
    overflow: hidden;
    border-radius: 12px;
    background-color: snow;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 4px 4px 10px black;
    margin:auto;margin-top:10px;
}

#picture {
    -webkit-mask-image: radial-gradient(black 23%, transparent 85%);
    -webkit-mask-size: cover;
    z-index: 1;
    border-radius: 16px;
}

#processMeter {
    position: absolute;
    right: 10px;
    bottom: 0px;
    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)   }
}

.bjt {
    filter: grayscale(0.3);
}

.lrcShow {
    font: normal 2.5em sans-serif;
    position: absolute;
    bottom: 2%;
    left: 15%;
    color: transparent;
    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);
    letter-spacing: 4px;
    --aniName: bgMove1;
    --durTime: 100ms;
    --aniPlayState: running;
    cursor: pointer;
}

.lrcShow::before {
    position: absolute;
    content: attr(data-lrc);
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    color: transparent;
    background-image: linear-gradient(60deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(60, 100%, 50%), hsl(0, 100%, 50%));
    -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%;    }
}
</style>
<div id="oBlk">
        <div id="showSVG"></div>
        <div id="lrc">
                <div id="processMeter">
                        <svg xmlns="http://www.w3.org/2000/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 A95 45 0 0 1 100 5 " stroke="pink" fill="none"></path>
                                <path id="fgc" d="M 100 5 A 95 45 0 0 1 100 95 A95 45 0 0 1 100 5 " stroke="snow" fill="none"></path>
                          </g>
                        <defs>
                    <clipPath id="clip">
                            <circle cx="100" cy="50" r="41" />
                    </clilpPath>
            </defs>
                        <image xlink:href="http://p2.music.126.net/cGVcT5yytr6GXjL7EDRfvw==/109951167031190311.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="white" style="font:bold 16px sans-serif;">
                                <text x="82%" y="50%" id="durTime">00:00</text>
                                <text x="18%" y="50%" id="curTime">00:00</text>
                          </g>
                        </svg>
                </div>
                <div class="lrcShow" data-lrc="除夕"></div>
        </div>
</div>

<script>
let pics = [
"https://mmbiz.qpic.cn/mmbiz_jpg/76aMpDD5XVc4R8wpXpFI5VzxyRszficfn0E9kmSV0KQhiaicWyC6TXpUXohMLa9A0SFJlQoiaZe8vDUMnnm496gabw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/76aMpDD5XVc4R8wpXpFI5VzxyRszficfntzFGHaDicicrVQuJFA1mRNyNAjAbHnEoibgXrl6UPibwQ8doibTIp9sSEuw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/76aMpDD5XVc4R8wpXpFI5VzxyRszficfnsdELfTbficHzjIeia3xC5oBsrxD0lz6iaKa82T8hibokpOkDsIVYp53efg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/76aMpDD5XVc4R8wpXpFI5VzxyRszficfnGXURuXHtj7pfsIwkUuvKXjibwtbR6Yn9A8jMDhz962huq5KH0FHt2Xg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/76aMpDD5XVc4R8wpXpFI5VzxyRszficfnvib7a2yh0HSDy9GmYOeznPIZlNEibMzZiaNsibWCf8RPiaOA0SA1fiahMV0g/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/76aMpDD5XVc4R8wpXpFI5VzxyRszficfnMJ0lian7aDP2QYicTst2HiaW4Xnewhx3icldXlB65Dia5LTrrRBUEJ9uoOA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/76aMpDD5XVc4R8wpXpFI5VzxyRszficfnsHd4eZo7ghy0YUYt4vbyYZdbsSib39IHe4hIQblicA80Dm3YDxmwyl5Q/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/76aMpDD5XVc4R8wpXpFI5VzxyRszficfnJWI8EKdq6gljNkKV4tlXaKn3QrkvU28szYyFIHrzky3L3PuKQtYB2w/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/76aMpDD5XVc4R8wpXpFI5VzxyRszficfndn3GRcRan6HxKujox5ne2eQDysSz7BYmlcoB6nGicu8KBSk34cXz2mA/640",
];

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)}};if(parentNode)parentNode.appendChild(sObj);return sObj};

let rows = 3, cols = 3 ,pWidth = 810, factor=rows<cols?rows:cols, pHeight = 1080;
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 ${pWidth * cols} ${pHeight * rows}`});

pics.forEach((url,idx) => {
        let rowPos = (idx % cols) * pWidth, colPos = parseInt(idx/cols) * pHeight, beginStr = idx == 0 ? '0;clrs.end+1' : `ep${idx-1}.end-0.5`;
        let showPosX = ((cols - factor) * pWidth) / 2, showPosY = ((rows - factor) * pHeight) / 2;
        genTagObj(mysvg,{'tag':'image', 'xlink:href':url, 'width':pWidth, 'height':pHeight, 'x':rowPos, 'y':colPos, 'opacity':0.25, 'preserveAspectRatio':'none', 'class':'bjt'});
        let imgObj = genTagObj(mysvg,{'tag':'image','id':`p${idx}`, 'xlink:href':url, 'width':pWidth, 'height':pHeight, 'x':rowPos, 'y':colPos, 'opacity':0, 'preserveAspectRatio':'none'});
        let aniObj = genTagObj(imgObj,{'tag':'animate','id':`bp${idx}`, 'attributeName':'opacity', 'from':0, 'to':1, 'dur':2, 'begin':beginStr, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'x', 'from':rowPos, 'to':showPosX , 'dur':2, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'y', 'from':colPos, 'to':showPosY, 'dur':2, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'width', 'from':pWidth, 'to':factor * pWidth, 'dur':2, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'from':pHeight, 'to':factor * pHeight, 'dur':2, 'begin':`bp${idx}.begin`, 'fill':'freeze'});
       
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'x', 'to':rowPos, 'from':showPosX, 'dur':2, 'begin':`bp${idx}.begin+10`, 'fill':'freeze', 'id':`ep${idx}`});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'y', 'to':colPos, 'from':showPosY, 'dur':2, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'width', 'to':pWidth, 'from':factor * pWidth, 'dur':2, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
        aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'height', 'to':pHeight, 'from':factor * pHeight, 'dur':2, 'begin':`bp${idx}.begin+10`, 'fill':'freeze'});
        if(idx == (pics.length - 1))
                aniObj = genTagObj(imgObj,{'tag':'animate', 'id':"clrs", 'attributename':'opacity', 'to':0, from:1, 'begin':`bp${idx}.begin+15`,'dur':2, 'fill':"freeze"});
        else
                aniObj = genTagObj(imgObj,{'tag':'animate', 'attributeName':'opacity', 'to':0, 'from':1, 'dur':2, 'begin':'clrs.begin', 'fill':'freeze'});
       
});
showSVG.innerHTML = mysvg.outerHTML;

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

const lrctxt = `
伊然 - 除夕

写一个福倒进团圆里
画一个春贴满锦鲤
双手把幸福捧起
对所有人都说恭喜恭喜
灯笼照亮归家的游子
妈妈端上热气腾腾的饺子
爸爸的红包拿到手软
温馨又甜蜜的熟悉
这是我们的除夕
穿上红色的毛衣
点燃鞭炮迎来归期
三百六十五天都要珍惜
这是我们的除夕
对生活说声感激
烟花绽放寒冬退去
预示春天来临尽情呼吸
`;
      
let opts = {
    lrcTxt:lrctxt,
    audioURL:"https://cccimg.com/view.php/8bc1293780b0beeae95fb4d289c8bfd6.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())
                        : (mCtrl.style.setProperty('--rState','running'),sObj.unpauseAnimations());
        }
        //        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-28 07:40

好精彩的的制作！祝您除夕快乐！

庶民 发表于 2025-1-28 07:56

今天除夕，祝福或有朋友新春快乐，万事如意！

梦江南 发表于 2025-1-28 08:15

除夕了，蛇年到，祝福新春快乐，幸福安康！

起个网名好难 发表于 2025-1-28 08:30

樵歌 发表于 2025-1-28 07:40
好精彩的的制作！祝您除夕快乐！

https://mmbiz.qpic.cn/sz_mmbiz_jpg/FP8Z9xJJTEgTyve2F0bonluafkLhKfwnXToK1eh8YGI0yW4vsfR5EUCIh0OiaOSZ7V3FUjw9AjKKVblibNiaNzVRA/640?wxfrom=12&tp=wxpic&wx_fmt=jpeg

起个网名好难 发表于 2025-1-28 08:31

庶民 发表于 2025-1-28 07:56
今天除夕，祝福或有朋友新春快乐，万事如意！

https://mmbiz.qpic.cn/sz_mmbiz_jpg/FP8Z9xJJTEgTyve2F0bonluafkLhKfwnKlUc0delcpxjAQK5K4csABYBKPLibpWaAwhQVJZnlwnGN8tS8tBWquQ/640?wxfrom=12&tp=wxpic&wx_fmt=jpeg

起个网名好难 发表于 2025-1-28 08:31

梦江南 发表于 2025-1-28 08:15
除夕了，蛇年到，祝福新春快乐，幸福安康！

https://mmbiz.qpic.cn/sz_mmbiz_jpg/FP8Z9xJJTEgTyve2F0bonluafkLhKfwnmVwOfCKk4mYMDITL7e8m0mJwcK8jicMo5gyTX4icZTskLh5EZYYGYueA/640?wxfrom=12&tp=wxpic&wx_fmt=jpeg

梦江南 发表于 2025-1-28 08:45

起个网名好难 发表于 2025-1-28 08:31


https://pic1.imgdb.cn/item/67982813d0e0a243d4f83ec4.gif

红影 发表于 2025-1-28 10:20

每一幅图图都那么喜庆，这个制作真棒。
感谢难难带来的美好帖子，祝福除夕快乐{:4_199:}{:4_177:}

深秋红枫 发表于 2025-1-28 10:36

赞一个！
祝老师除夕快乐！！春节迎新！！！蛇年平安吉祥，福绿、钱包满满！！！

起个网名好难 发表于 2025-1-28 12:17

红影 发表于 2025-1-28 10:20
每一幅图图都那么喜庆，这个制作真棒。
感谢难难带来的美好帖子，祝福除夕快乐
https://pic1.imgdb.cn/item/67985c6dd0e0a243d4f84250.jpg

起个网名好难 发表于 2025-1-28 12:18

深秋红枫 发表于 2025-1-28 10:36
赞一个！
祝老师除夕快乐！！春节迎新！！！蛇年平安吉祥，福绿、钱包满满！！！
https://pic1.imgdb.cn/item/67985ca1d0e0a243d4f84252.jpg

小辣椒 发表于 2025-1-28 13:35

难难好美的制作，除夕快乐！合家团圆 幸福安康！{:4_187:}

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

小辣椒 发表于 2025-1-28 13:35
难难好美的制作，除夕快乐！合家团圆 幸福安康！


页: [1]
查看完整版本: 除夕