醉美水芙蓉 发表于 2024-12-12 22:00:25

雨巷佳人-么健

<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;}
#oBlk        {
        --w:600px;--h:900px;
        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(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 5s linear infinite var(--rState);}
@keyframes        rot{to{transform: rotate(1turn)}}
</style>
<div id="oBlk">
        <img src="https://bbs.cnzv.cc/up/upload/pic/1ed874b104d97168127dcb749736a9de.jpg" alt="" />
        <img src="https://bbs.cnzv.cc/up/upload/pic/bb5f82e58e65b38966e15fd25f943835.jpg" alt="" />
        <img src="https://bbs.cnzv.cc/up/upload/pic/81b3bcf0f67eb9ce8988ed4eced3fd69.jpg" alt="" />
        <img src="https://bbs.cnzv.cc/up/upload/pic/05b0111f33b7422d609149fbdbe8e573.jpg" alt="" />
        <img src="https://bbs.cnzv.cc/up/upload/pic/2bd008a5f3a76745fe010f1553950d7b.jpg" alt="" />
        <img src="https://bbs.cnzv.cc/up/upload/pic/acc553de98ee3df1b3c28139fcd3da5c.jpg" alt="" />
        <img src="https://bbs.cnzv.cc/up/upload/pic/3374f313d13a179738c09a52607a7f9b.jpg" alt="" />
        <img src="https://bbs.cnzv.cc/up/upload/pic/783bf43278c17b5f56b9554758bd4e14.jpg" alt="" />
        <img src="https://bbs.cnzv.cc/up/upload/pic/665216733547643489478943605664e7.jpg" alt="" />
        <img src="https://bbs.cnzv.cc/up/upload/pic/2ac0b9be3d9ee17a4c70d9c0819135e3.jpg" alt="" />
        <img src="https://bbs.cnzv.cc/up/upload/pic/a743ce67f8499c57a08b9b25e809366d.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="41" />
                    </clilpPath>
            </defs>
                        <image xlink:href="http://p2.music.126.net/Z_WJPu1pe3InX2IIn_sgiQ==/109951165069581038.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>
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 = `
雨巷佳人-么健
作词:修篱种菊
作曲:金琳琳
演唱:么健
你从江南雨巷里走来
柔柔春风亲吻你裙摆
小桥流水乌篷船的桨声
醉了醒了那沉静楼台
你从如诗画卷里走来
嘈嘈切切琴音落玉盘
丝丝缕缕吴侬细语呢喃
羞了含苞待放的那朵莲
俏丽的身影起舞翩翩
芳华逝去你却妩媚依然
倩影倒映在平静的湖面
怎叫人不为你顾盼迷恋
油纸伞下清丽旖旎诗行
石拱桥记忆着多少古往
江南雨巷的平江府姑娘
亭亭玉立宛在那水中央
你从如诗画卷里走来
嘈嘈切切琴音落玉盘
丝丝缕缕吴侬细语呢喃
羞了含苞待放的那朵莲
俏丽的身影起舞翩翩
芳华逝去你却妩媚依然
倩影倒映在平静的湖面
怎叫人不为你顾盼迷恋
油纸伞下清丽旖旎诗行
石拱桥记忆着多少古往
江南雨巷的平江府姑娘
亭亭玉立宛在那水中央
油纸伞下清丽旖旎诗行
石拱桥记忆着多少古往
江南雨巷的平江府姑娘
亭亭玉立宛在那水中央
亭亭玉立宛在那水中央
`;
      
let opts = {
    lrcTxt:lrctxt,
    audioURL:"https://music.163.com/song/media/outer/url?id=1456216220.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>

klxf 发表于 2024-12-12 22:35:27

效果真棒！谢谢醉美管理员精彩分享:)

醉美水芙蓉 发表于 2024-12-13 20:36:54

klxf 发表于 2024-12-12 22:35
效果真棒！谢谢醉美管理员精彩分享

谢谢友友支持！
页: [1]
查看完整版本: 雨巷佳人-么健