起个网名好难 发表于 2024-11-3 10:01

柿柿如意

本帖最后由 起个网名好难 于 2024-11-3 09:55 编辑 <br /><br /><meta name="referrer" content="never" />
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
:root {--rState:running;}
#outBlk        {width:640px;height:720px;position:relative;overflow:hidden; border-radius:24px;box-shadow:4px 4px 10px gray;margin:auto;}
#showSVG        {width:100%; position:absolute; right:0px; top:0px;box-shadow:2px 2px 5px black;}
#processMeter        {position: absolute; right:20px; bottom:-10px; width: 100px; height:100px; cursor: pointer;}
                /**        不满意一般设置也可以调整下                */
        .lrcShow {
                        font: normal 2em 微软雅黑;
                        pointer-events:none;
                        left:20%;bottom: 0px;
        }
        .lrcShow::before {
                        color:hsl(0, 50%, 50%);
        }
.rPlayer        {transform-origin:50%; animation: rot 5s linear infinite var(--rState);}
@keyframes        rot        {to {transform:rotate(1turn)}}
</style>
<div id="outBlk">
        <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>
                        <!-- 进度条 -->
                        <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>
                        <defs>
                        <ellipse id='ec' cx='75' cy='75' rx='40' ry='15' fill='none' stroke-width='3'></ellipse>
                        </defs>
                        <g class='rPlayer'>
                        <use href='#ec' stroke='red'></use>
                        <use href='#ec' stroke='green' transform='rotate(120, 75,75)'></use>
                        <use href='#ec' stroke='blue'transform='rotate(240, 75,75)'></use>
                        </g>
                </svg>       
        </div>
        <div class="lrcShow" data-lrc="柿柿如意" >柿柿如意</div>
</div>

<script>
var pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7R3iaF2pdfWPFuUThgAhib57dicISPH7yIx9uW4lnxRqlYG3ibndaJOlN9qhFufQC5VSJic5udsgzjzIeA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/V5xNBzs8grWNtwRPqulxg9ibc2ibBg3nUaNVz4sw7RGEDp7KlassQS43fDooRlM3I4QQAGC8EucrXXmkPicSFqFcA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7R3iaF2pdfWPFuUThgAhib57dgMibagniaHmfjp7jDPFKNt5BYOgaDlVibCfJvIMA6yiazoia4LZFb2aj7dQ/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/34muJdRtOl6g3yletYDCOeVuPyicFBbkduiaQHfXU73WKlpVrb1AQwFawP4PRszLlqTQwbKbBEzAw9kgJib4YUJAQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7R3iaF2pdfWPFuUThgAhib57dIvQhqCbCzhqGdOWXk3eBWSTbicoHtOK3ib1RvY6IAjfo2l2ic4nS5CeJA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/34muJdRtOl6g3yletYDCOeVuPyicFBbkd6E1A4dgobwicRvcu3YxhH5AusMMYVJGjE3U1DaXpjJ8noQxU8ov7noQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7R3iaF2pdfWPFuUThgAhib57duykdF92T0ibIXp4KH9rnp6VIXFWX1HGIgqaNjiaicCbl4rKEeUTrdssMw/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/34muJdRtOl6g3yletYDCOeVuPyicFBbkd2pw3n5LS3Oeib5cD3mrHDK2TlULZdbtecDJiaxezdaazxlKTV3pFz4aw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7R3iaF2pdfWPFuUThgAhib57dyUtSiaZaAeTiba89W5icc0UMOWh2IdBZgOSrUHc4eP7chsmkuzRAZ4FNA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/34muJdRtOl6g3yletYDCOeVuPyicFBbkdchxdNZGXsg28LFeWDEodYgfngfwQUgMBeahJUagHe8rwStqotUUZcQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7R3iaF2pdfWPFuUThgAhib57djYZAWAKvib7lYthEXibTM0LZBXw4OxlvtmSAj9DRGbsF34WVokLWSccg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/34muJdRtOl6g3yletYDCOeVuPyicFBbkdn9O2NLb1ZkDhd13kQSfpl35LQiaxNB9wrtTN3NwGAdTdSTJ9dTtXdZw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7R3iaF2pdfWPFuUThgAhib57drCn5ialnZGJ3IRxIPONribmmpIbQz16tov4S3oPmibEFECwr8DgvmAUsg/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/34muJdRtOl6g3yletYDCOeVuPyicFBbkdU4cSIzicSkTLf7PFv050Rx9B4f7zmXuCkicBFR0mzwPpwLK2kvdXq5RQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7R3iaF2pdfWPFuUThgAhib57d38jAYcXmFagK7qVpe0vOFZh32go88FPAPUvUrCbO8iaggcO117NQeTA/640",
"https://mmbiz.qpic.cn/mmbiz_jpg/34muJdRtOl6g3yletYDCOeVuPyicFBbkd81tQYnVou3eIXUoLZ3GSyuHlxqqBOOXSAicRHMhC9TbibjO0FibmZksoA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7R3iaF2pdfWPFuUThgAhib57dDPrxcG9ubDVgMXyEOadNo9EibhBEibqdaPoVE0hoeibKUmXTicvUEgyllA/640",
];
var sf = document.createElement('script');
sf.type = 'text/javascript';
sf.src = "https://file.uhsea.com/2410/34b933e409e019a1d30f535fa704e5122O.js";
sf.charset = "utf-8";
document.body.appendChild(sf);

sf.onload = () => {
        let opts = {width:800, height:900, 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 = `
柿柿如意
张钰瑶
作词 张景明
作曲 张景明

望青山 大晴天
有一座寺庙在眼前
泥菩萨眯着眼
能解一些心宽

山那边 还是山
钟声已敲响在耳边
财神和月老仙   
快把愿望都实现      


财运跟着山连着山      
人间的姻缘有红线牵      
尘世的香火飞上天   
顺风又顺水保平安   

一岁有一岁的期盼   
一年又一年都团圆         
百姓最欢喜风调雨顺   
五谷丰收 吃不完

守护神和伽蓝   
快把厄运都退散   
        `;
        let opts = {
                lrcTxt:lrctxt,
                audioURL:"https://music.163.com/song/media/outer/url?id=2121691754.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);
        });
        processMeter.onclick = () => {
                player.mObj.paused ? (outBlk.style.setProperty('--rState','running'), player.mObj.play()) : (outBlk.style.setProperty('--rState','paused'), player.mObj.pause());
        }
       
}
</script>

梦江南 发表于 2024-11-3 10:08

秋天浓了柿子熟了。丰收的季节！{:4_187:}

梦江南 发表于 2024-11-3 10:09

稚嫩的童音，唱得真好！{:4_199:}

红影 发表于 2024-11-3 10:14

鲜红的柿子，好诱人啊，歌曲好听，寓意吉祥，难难这个帖子真好{:4_199:}

红影 发表于 2024-11-3 10:15

图片轮播效果奇特，歌词的底色也有特点，小播也很漂亮。
给难难点赞{:4_199:}

梦江南 发表于 2024-11-3 10:15

小播外圈还是进条度。{:4_199:}

起个网名好难 发表于 2024-11-3 10:15

梦江南 发表于 2024-11-3 10:08
秋天浓了柿子熟了。丰收的季节！

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

起个网名好难 发表于 2024-11-3 10:16

红影 发表于 2024-11-3 10:14
鲜红的柿子，好诱人啊，歌曲好听，寓意吉祥，难难这个帖子真好

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

起个网名好难 发表于 2024-11-3 10:18

红影 发表于 2024-11-3 10:15
图片轮播效果奇特，歌词的底色也有特点，小播也很漂亮。
给难难点赞

https://cccimg.com/view.php/6a1acfd3b4d74a20d5526242c682e519.webp

起个网名好难 发表于 2024-11-3 10:21

梦江南 发表于 2024-11-3 10:15
小播外圈还是进条度。

组合体试验{:5_106:}

小辣椒 发表于 2024-11-3 10:28

难难这个效果特别棒，柿子红红的诱人哦{:4_189:}

小辣椒 发表于 2024-11-3 10:29

图片转换流畅，播放器也是漂亮，歌词同步，该有的效果齐全了，赞的

小辣椒 发表于 2024-11-3 10:30

童音好听，难难好棒{:4_178:}

梦江南 发表于 2024-11-3 10:37

起个网名好难 发表于 2024-11-3 10:21
组合体试验

真厉害。

起个网名好难 发表于 2024-11-3 10:39

小辣椒 发表于 2024-11-3 10:28
难难这个效果特别棒，柿子红红的诱人哦

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

起个网名好难 发表于 2024-11-3 10:40

小辣椒 发表于 2024-11-3 10:29
图片转换流畅，播放器也是漂亮，歌词同步，该有的效果齐全了，赞的

都是简易版，没繁复花样{:5_102:}

起个网名好难 发表于 2024-11-3 10:59

小辣椒 发表于 2024-11-3 10:30
童音好听，难难好棒

刚好找到个这个题目的歌，原来我也没听过这歌。

起个网名好难 发表于 2024-11-3 10:59

梦江南 发表于 2024-11-3 10:37
真厉害。

凑合{:5_102:}

红影 发表于 2024-11-3 10:59

起个网名好难 发表于 2024-11-3 10:16


被弄得想吃柿子了{:4_189:}

红影 发表于 2024-11-3 11:01

起个网名好难 发表于 2024-11-3 10:18


这个小播特别漂亮，里面的椭圆和进度条颜色各不相同{:4_187:}
页: [1] 2 3
查看完整版本: 柿柿如意