醉美水芙蓉 发表于 2024-10-16 22:24:50

雾凇

<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);

#oBlk        {position:relative; width:1500px;height:844px;margin:90px 0 32px calc(50% - 831px);background:url(https://pic.rmb.bdstatic.com/bjh/news/ad93b697cc40360d49ef75afb9bf1573.jpeg);overflow:hidden;border-radius:24px;box-shadow:4px 4px 10px black;}
#showSVG        {width:480px; position:absolute; right:50px; top:50px;overflow:hidden;border-radius:50%;box-shadow:2px 2px 5px black;}
#processMeter        {position: absolute; left:50px; bottom:-10px; width: 100px; height:100px; cursor: pointer;}
                /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font: normal 2.5em 微软雅黑;
                        pointer-events:none;
                        left:20%;bottom: 0px;
        }
        .lrcShow::before {
                        color:hsl(0, 50%, 50%);
        }
</style>
<div id="oBlk">
        <div id="showSVG" ></div>
        <div id="processMeter">
                <svg stroke-width="5" viewBox="0 0 150 150" >
                        <!-- 背景圆形 -->
                        <circle cx="75" cy="75" r="50" stroke="#ebeef5" fill="none"></circle>
                        <text x="50%" y="50%" stroke="#ffa020" text-anchor="middle" dominant-baseline="middle" stroke-width="1" style="font-size:24px;" id="procV">0%</text>
                        <!-- 进度条 -->
                        <circle
                          class="process-circle"
                          cx="75"
                          cy="75"
                          r="50"
                          stroke="#ffa020"
                          transform="rotate(-90 75 75)"
                          fill="none"
                          stroke-dasharray="314"
                          stroke-dashoffset="314"
                        ></circle>
                </svg>
        </div>
        <div class="lrcShow" data-lrc="雾凇" >雾凇</div>
</div>

<script>
var pics = [
"https://ss2.meipian.me/users/121759489/6bd9f2d0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bda19e0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bda6800-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bda8f10-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdab620-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdadd30-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdb0440-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdb5260-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdb7970-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdbc790-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdbeea0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdc15b0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdc3cc0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdc8ae0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdcb1f0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdcd900-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdd0010-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdd2720-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdd4e30-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdd7540-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdd9c50-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bddc360-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bddea70-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bde1180-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bde3890-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bde86b0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdeadc0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bded4d0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdefbe0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdf22f0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdf4a00-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdf7110-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdfbf30-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bdfe640-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be00d50-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be03460-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be05b70-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be08280-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be0d0a0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be0f7b0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be11ec0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be145d0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be193f0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be1bb00-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be1e210-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be23030-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be25740-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be27e50-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be2cc70-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be2f380-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be31a90-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be341a0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be38fc0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be3b6d0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be3dde0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be42c00-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be45310-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be47a20-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be4c840-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be4ef50-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be51660-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be56480-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be58b90-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be5b2a0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be5d9b0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be627d0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be64ee0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be675f0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be69d00-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be6c410-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be71230-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be73940-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be76050-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be78760-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be7ae70-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be7d580-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be7fc90-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be823a0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be84ab0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be871c0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be898d0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be8bfe0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be90e00-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be93510-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be95c20-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be98330-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be9aa40-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6be9f860-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bea1f70-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bea6d90-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bea94a0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6beabbb0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6beae2c0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6beb09d0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6beb30e0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6beb57f0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6beb7f00-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6bfc6ef0-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/5a054820-34c5-11ec-8146-25369a6f6075.png",
"https://ss2.meipian.me/users/121759489/6182b380-34c5-11ec-8146-25369a6f6075.png"
];
var sf = document.createElement('script');
sf.type = 'text/javascript';
sf.src = "https://file.uhsea.com/2410/34b933e409e019a1d30f535fa704e5122O.js";
//sf.src = "./genSVG.js";
sf.charset = "utf-8";
document.body.appendChild(sf);

sf.onload = () => {
        let opts = {width:960, height:600, showObj: showSVG};
        genSVGtag(opts);
}

    const processCircle = document.querySelector('.process-circle');
    // 获取圆的周长
    const circumference = processCircle.getTotalLength();
    // 把周长赋值给 strokeDasharray
    processCircle.style.strokeDasharray = circumference;
   
    function setProcessCircle(percent = 0) {
                // 动态计算 offset 赋值给 strokeDashoffset
                // 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换
                processCircle.style.strokeDashoffset =
                  circumference * (1 - parseInt(percent) / 100)
        }
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 = () => {
        let lrctxt = `
落叶雾凇\n 作曲/作词 : 叶三离/芮英杰\n 制作人 : 芮英杰\n落叶雾凇\n看被风吹过的冬\n它没留住夏曾似火的相拥\n可它却能等来\n下一个春将雪消融\n我却等不来\n哪怕一个目送\n好像我们似乎都望着\n同一片星空\n却又互相用着陌生来形容\n我在你的口中\n到底又会是哪一种\n终究淹没在了车水马龙\n我们在形色匆匆中\n又隐藏了影踪\n忘掉过去种种\n回到各自时空\n打开了孤独\n也不算辜负\n你给我的冷漠\n形色匆匆中\n又隐藏了影踪\n忘掉过去种种\n回到各自时空\n打开了孤独\n也不算辜负\n你给我的冷漠\n好像我们似乎都望着\n同一片星空\n却又互相用着陌生来形容\n我在你的口中\n到底又会是哪一种\n终究淹没在了车水马龙\n我们在形色匆匆中\n又隐藏了影踪\n忘掉过去种种\n回到各自时空\n打开了孤独\n也不算辜负\n你给我的冷漠\n形色匆匆中\n又隐藏了影踪\n忘掉过去种种\n回到各自时空\n打开了孤独\n也不算辜负\n你给我的冷漠\n我们在形色匆匆中\n又隐藏了影踪\n忘掉过去种种\n回到各自时空\n打开了孤独\n也不算辜负\n你给我的冷漠\n形色匆匆中\n又隐藏了影踪\n忘掉过去种种\n回到各自时空\n打开了孤独\n也不算辜负\n你给我的冷漠\n
        `;
        let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://music.163.com/song/media/outer/url?id=2070352610.mp3",
        }
        let player = new lrcPlayerY(opts);
       
        player.mObj.addEventListener('timeupdate', function() {
                let processValue = player.mObj.currentTime / player.mObj.duration;
                processCircle.style.strokeDashoffset =
                  circumference * (1 - processValue);
                procV.textContent = parseInt(processValue * 100) + '%';
        });
        processMeter.onclick = () => {
                player.mObj.paused ? player.mObj.play() : player.mObj.pause();
        }
       
}
</script>

确认过眼神 发表于 2024-10-28 17:21:29

这个作品漂亮！！！！

顶不顶个球 发表于 2024-11-3 17:51:30

这个作品漂亮！！！！

夏艳妍 发表于 2024-11-16 11:35:58

这个作品漂亮！！！！

klxf 发表于 2024-11-16 18:29:56

问好醉美版主，谢谢精彩分享:)

活跃概况 发表于 2024-12-1 08:40:37

这个作品漂亮！！！！
页: [1]
查看完整版本: 雾凇