小辣椒 发表于 2024-12-14 12:54

晴文曲 TO：夕阳老师


<meta name="referrer" content="never" >
<meta charset="utf-8">
<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(240, 60% , 50%, .34);
}
        #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 SlateBlue) drop-shadow(0px 1px 0px SlateBlue) drop-shadow(0px -1px 0px white);
                        writing-mode: vertical-rl;z-index:99;left:5px;top:100px;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://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7S7zfxocuXMvdKABFwD7kXdibdLbkPjH2dxNve3aryicr91mYqzhyPgMjAHu4o2nrLoD1wk9GEiaChOQ/640" alt="" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7S7zfxocuXMvdKABFwD7kXdAEUTxicvaVMyRjo1qTo1ia4rxwlxJ2IibL1DvYtVOmu7ZMMRnF4nTkw0A/640" alt="" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7S7zfxocuXMvdKABFwD7kXddx26fmYVUVjZT6to83pLZgt90FAmHSvu2uML1wyDicicmrKZGO544rpQ/640" alt="" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7S7zfxocuXMvdKABFwD7kXdnsXv4yXTAuWU5gh8BKrgBBblclrGibibJiaMvYeXKs0HdwIdS3ueg2NyQ/640" alt="" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7S7zfxocuXMvdKABFwD7kXdicJElbHHMzmJY5TKIcDvf2iaTJVRafXBtkGre5yaeObEf4zvvz7Vr5Uw/640" alt="" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7S7zfxocuXMvdKABFwD7kXdVI5zWUo6HEKbTtFs7Tcmy5UOspibfmBmQ0zmCwwIQbOfLV3Ltx2aLicQ/640" alt="" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7S7zfxocuXMvdKABFwD7kXdwQp5dAK4HOMBtzIBZpFWhliajUpicUw3Q2YuZSyHZqFVklO00Oz1wXcg/640" alt="" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7S7zfxocuXMvdKABFwD7kXdDib1Ruv0f4icL2ziczHvaibcBa2r8by4Hic2rhHoZFUTH86SkbZXTapvfEw/640" alt="" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7S7zfxocuXMvdKABFwD7kXd3mvDian8qcsjEL4MmCOn5czNiaNN8CZ6gmLs0oCCeMIyhlVez8pmtpiaQ/640" alt="" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7S7zfxocuXMvdKABFwD7kXddXRQunxwVNxPKE0CCZb09E9NPajb67XtAN6ibsibHjbE5C57Xo0MU6CA/640" alt="" />
        <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7S7zfxocuXMvdKABFwD7kXdicJElbHHMzmJY5TKIcDvf2iaTJVRafXBtkGre5yaeObEf4zvvz7Vr5Uw/640" 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="MediumPurple"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="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7S7zfxocuXMvdKABFwD7kXdibdLbkPjH2dxNve3aryicr91mYqzhyPgMjAHu4o2nrLoD1wk9GEiaChOQ/640" 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://piguda.com/upfile/20241214122627.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>

小辣椒 发表于 2024-12-14 12:56

@夕阳黄昏

谢谢夕阳老师的代码，小辣椒玩一个，想修改一下颜色，结果出来没有原来你的漂亮了，但已经修改了就这样发了{:4_173:}

小辣椒 发表于 2024-12-14 12:57

这些图片转换效果特别的美，谢谢夕阳老师的精彩分享

起个网名好难 发表于 2024-12-14 13:04

http://5b0988e595225.cdn.sohucs.com/images/20180609/f85bb2266e7e495d8a8203f3e12af903.gif

梦油 发表于 2024-12-14 14:06

好曲配美图，绝了！{:4_199:}

梦江南 发表于 2024-12-14 15:33

漂亮！赞！{:4_199:}

冬天的雨 发表于 2024-12-14 17:22

手机欣赏效果完美{:4_178:}

冬天的雨 发表于 2024-12-14 17:24

歌儿好听，红楼梦晴文歌，也是就晴文曲{:4_199:}

世外桃源 发表于 2024-12-14 20:03

又见一个图片特效代码制作{:4_199:}

世外桃源 发表于 2024-12-14 20:04

欣赏欣赏

世外桃源 发表于 2024-12-14 20:04

感谢分享

红影 发表于 2024-12-14 21:00

晴文是这个晴雯吧，宝玉的丫鬟，被赶出大观园了{:4_173:}

红影 发表于 2024-12-14 21:01

亲爱的制作漂亮，夕阳老师收礼开心{:4_187:}

红影 发表于 2024-12-14 21:07

这样的图片轮播制作也不容易，需要收集很多同类图图呢。夕阳老师的轮播效果很美{:4_199:}

小辣椒 发表于 2024-12-14 21:32

红影 发表于 2024-12-14 21:00
晴文是这个晴雯吧，宝玉的丫鬟，被赶出大观园了
亲爱的我昨天上去时就感觉是这个晴雯的，主要网易音乐名称是晴文曲，我专辑里面的音乐是晴雯歌，我因为用了网易的音乐就用了这个晴文曲的名字

自己的音乐要去网盘下载怕麻烦，所以这个音质也是不好

红影 发表于 2024-12-14 22:57

小辣椒 发表于 2024-12-14 21:32
亲爱的我昨天上去时就感觉是这个晴雯的，主要网易音乐名称是晴文曲，我专辑里面的音乐是晴雯歌，我因为用 ...

还是改过来吧，网易云里肯定弄错了呢{:4_173:}

樵歌 发表于 2024-12-15 07:42

简洁妙图！正好配这曲子了。{:4_178:}

樵歌 发表于 2024-12-15 07:43

感冒好后又到大西北去玩了几天，没上坛，回来唱了几首歌儿，发不上来{:4_179:}
页: [1]
查看完整版本: 晴文曲 TO：夕阳老师