也曾年轻 发表于 2025-11-28 18:30

山茶花

本帖最后由 也曾年轻 于 2025-11-28 20:57 编辑 <br /><br /><meta charset="utf-8">
<meta name="referrer" content="never" />
<style type="text/css">
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
#oBlk        {width:960px;height:540px;position:relative;border-radius:32px;overflow:hidden;margin:80px auto 40px calc(50% - 561px);}
.lrcShow        {top:20px; font-size:2em;}
        .lrcShow::before {
                        color:transparent;
                        background-image: repeating-linear-gradient(to left, red, green, pink, blue, orange) ;
        }
#vid        {width:115%;object-fit:contain;}
#showSVG        {width:288px;height:512px; background-color:transparent;position:absolute;left:336px;top:14px;
                -webkit-mask-image: radial-gradient(black 50%, transparent 75%);                -webkit-mask-size: cover;
                }
        #mCtrl{transform-origin:50%;animation:rot 5s linear infinite var(--rState);}
        @keyframes        rot{to{transform: rotate(1turn)}}
#canvas        {position:absolute; left:3%; bottom:10px;z-index:150;}
</style>
<div id="oBlk">
        <video src="https://img.tukuppt.com/video_show/2418175/01/68/77/63e9aaa889cf1.mp4" loop autoplay muted id="vid" ></video>
        <canvas id="canvas" width='660' height='300'></canvas>
        <div id="showSVG"></div>
        <div class="lrcShow" data-lrc="山茶花">山茶花</div>
        <div style="width:160px;height:80px;position:absolute;right:0px;bottom:10px;">
        <svg viewBox="0 0 200 100" id="ctlObj">
          <radialGradient r="0.8" id="rg">
                <stop offset="0.1" stop-color="hsl(20, 50%, 10%)"></stop>
                <stop offset="0.5" stop-color="hsl(10, 50%, 50%)"></stop>
                <stop offset="1.0" stop-color="hsl(0, 50%, 90%)"></stop>
          </radialGradient>
          <path d="M 100 50 A 20 13.333333333333334 0 0 0 140 50 A 20 13.333333333333334 0 0 0 100 50 A 20 13.333333333333334 72 0 0 112.36067977499789 88.04226065180615 A 20 13.333333333333334 72 0 0 100 50 A 20 13.333333333333334 144 0 0 67.63932022500211 73.51141009169893 A 20 13.333333333333334 144 0 0 100 50 A 20 13.333333333333334 216 0 0 67.6393202250021 26.48858990830108 A 20 13.333333333333334 216 0 0 100 50 A 20 13.333333333333334 288 0 0 112.36067977499789 11.957739348193854 A 20 13.333333333333334 288 0 0 100 50 " fill-rule="evenodd" fill="url(#rg)" id="mCtrl"></path>
        </svg>
</div>
</div>

<script>
const pics = [
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjajiaWwIKByzZQOCrLKD45Oa709rmpgQo6hM0mt5RKX849FksVWDNJLOA/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjasLQ1O3IiaxJDRwfFHpzlejpoOibtfG0ZTn5n1ltyYIp9rLGiaoa2rxDoQ/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaQTpN5YB6Xia96kB23dZeEdEombYNU3niaoyiaIvbCg2OUoKCxCIrIKbiaw/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaXJ9ibf9STs6RlrlJxL79HSRdwvUvjK7vo1Qwf4cBNgwAeicc7DQuhcHA/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaseHUvM9yBFyfQkUAFqo3ia1qhT98UlfOfPjlrMRJyOm8uPOk4awMFTg/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjavs1D0pcTz9XcJ3D60aqXfrV70ibA9PUDkceLMYicrwKcZfZ9KWGNpeOQ/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaPvia6j9iaUSPdbBj7QfcG8roJic5iaTZI367o8otmV2btibRfsELpia0emUg/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaoQTTKk86h3vvawbYJkerFGMGIyTYlpYY8YrXBXs8DjicsD4eXOuqq4Q/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaCKJYPbLHKUzkaLYx93Vdf8y1iaopENz5oOTYCbBdhhHVx0ia3I5c6Azg/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCja3dS1ardFahQgYxFibJvm4hibdiaqwxegUIzn0wSuW8O4GfDXXShycK5ag/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaibbXTBoRoPR2Zl38obCUEuXmn6fRIwZ3ciaQ0OHPdp3RfQwH4UFic1oiaw/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaNvnGNuc0G7MrCj6jf2HwaDNjZxhUVQAnHibPMEsPuCECJnib1J1hPJvw/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaJn39HWxQm2FDjbALS5ndKp391RUkjmpb2icibSEI1HnNHeH5uDusRZtA/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCja7iatOVLu7Rcn8KiaKicSIHPtNP3coWR5p8ZrTicGu7d934zG8v3Ph8Xd0A/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaRZWzh3TsZqvkPg9SZXcTQ9JkRPQYfRr94wWCearhgHDI7hVfiaPBksQ/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaLNsXWgU0KBbpAUQhKZvkt7icWaU6b7cz6HyGrMT4ahogSmULZCKsxnA/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjavqfRrAZCSHacgYRSHtIia4VBUFDzm1rwzRKK8KCfp7b23mNK9ZK5bicQ/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaBdlpALuTiadfibgia3eicibOced3rc0l6xxdwPZu6FoIDicZrnUfgoZxcXRA/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaWicb3XibF1cPLufL4C42SjrUu5QnEkU3jFTvZXcIQ51skGwTOPI25CSQ/640",
"https://mmbiz.qpic.cn/mmbiz_png/5xzGjDwjeSdjLgqPyoN26v7UooibPfCjaCQHS4OOkiaCxuyxVF3C9okKEUtfWOcCRUGX4nphZvF7ia1Nyia1dQGmIQ/640",
];
const lrc =`
山茶花 - 邓丽君
词：庄奴
曲：远藤实
山茶花
你说他的家
开满山茶花
每当那春天三月
乡野如图画
村里姑娘上山采茶
歌声荡漾山坡下
年十七 年纪十八
偷偷在说悄悄话
羞答答 羞答答
梦里总是梦见他
一朵花
他说你美丽
就像一朵花
他希望总有一天
把你摘回家
村里姑娘也会羡慕
羡慕你像一朵花
年十七 年纪十八
偷偷在说悄悄话
羞答答 羞答答
梦里总是梦见他
一朵花
但愿你美丽
能像一朵花
更希望有那一天
跟他转回家
村里姑娘出来欢迎
欢迎你这一朵花
年十七 年纪十八
偷偷在说悄悄话
羞答答 羞答答
梦里总是梦见他

`;
var sf1 = document.createElement('script');
sf1.type = 'text/javascript';
//sf1.src = "https://cccimg.com/down.php/af4d73a4781cb57f0e3e784a7383e369.js";
sf1.src="https://file.uhsea.com/2511/b918af54406833810875615421ff60bdM7.js";
sf1.charset = "utf-8";
document.body.appendChild(sf1);
sf1.onload = () => {

let aniObjs = ;
let picArr = [], errCount = 0;

let getPictureSize = (url,pIdx) => {
        let img = new Image();
        img.onerror = () => {
                console.log(url+" 图片加载失败，请检查url是否正确");
                errCount++;
        };

        img.onload = () =>        {
                picArr.push({'index':pIdx, 'url':url, 'width':img.width, 'height':img.height});
                img.onload=null;//避免重复加载
               
        }
        img.src = url;
}
let dataReady = ()=> {
        if(picArr.length != (pics.length - errCount))        setTimeout(dataReady,50);
        else        {
                picArr.sort(function(a, b) {
            return (a.index - b.index);
      });

                let opts = {width:showSVG.offsetWidth, height:showSVG.offsetHeight , showObj: showSVG, picAr: picArr};

                new mkSVGPics(opts).makeSVGsegment();
        }
}
pics.forEach((url,pIdx) => getPictureSize(url, pIdx));
dataReady();

//-----------------------------------------------------------------------------
let opts = {audioURL:"https://s2.cldisk.com/sv-w9/audio/7c/0f/0b/2faef1081fe54ea8131be54cd089abd5/audio.mp3", lrcTxt:lrc, canvas:canvas};
let player = new lrcPlayerC(opts);
let mObj = player.getAudObj();
        let runState = () => {
                mObj.paused
                        ? (oBlk.style.setProperty('--rState','paused'), vid.pause())
                        : (oBlk.style.setProperty('--rState','running'), vid.play());
        }
        mCtrl.onclick = () => {
                                if(player.getAudContext() && player.getAudContext().state !== 'running') {
                                        player.getAudContext().resume();
                                }
                mObj.paused ? (mObj.play()) : (mObj.pause());
        }
        mObj.addEventListener('play', () => runState());
        mObj.addEventListener('pause', () => runState());
        mObj.play().catch(_ = () => runState());
}

</script>

偶然~ 发表于 2025-11-28 18:40

来欣赏也曾年轻精品佳作！

偶然~ 发表于 2025-11-28 18:41

音画太棒了！

偶然~ 发表于 2025-11-28 18:41

视频唯美

偶然~ 发表于 2025-11-28 18:41

背景歌声动听

偶然~ 发表于 2025-11-28 18:41

制作大气

偶然~ 发表于 2025-11-28 18:41

音画合一，音乐与画面结合完美

偶然~ 发表于 2025-11-28 18:41

太棒了！玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然 献花给你啦】

偶然~ 发表于 2025-11-28 18:41

感谢也曾年轻带来的精彩，辛苦了！祝你开心幸福、阖家安康！

阿狄丽娜 发表于 2025-11-28 18:54

美丽的山茶花

也曾年轻 发表于 2025-11-28 19:04

偶然~ 发表于 2025-11-28 18:40
来欣赏也曾年轻精品佳作！

谢谢欣赏支持！晚上好！

也曾年轻 发表于 2025-11-28 19:04

阿狄丽娜 发表于 2025-11-28 18:54
美丽的山茶花

谢谢欣赏支持！晚上好！

偶然~ 发表于 2025-11-28 19:10

也曾年轻 发表于 2025-11-28 19:04
谢谢欣赏支持！晚上好！

{:4_180:}

寒冬残荷 发表于 2025-11-28 20:21

来欣赏老师的作品。老师，是我的浏览器问题吗？没看到LRC歌词和图片轮播。只有熊猫网的山茶花视频。

也曾年轻 发表于 2025-11-28 20:55

寒冬残荷 发表于 2025-11-28 20:21
来欣赏老师的作品。老师，是我的浏览器问题吗？没看到LRC歌词和图片轮播。只有熊猫网的山茶花视频。

也许是引用的文件没正确载入导致的。

现在换了一个地方（用的屋舍网站），您看还有没有问题。

樵歌 发表于 2025-11-28 21:03

动听的歌声，好美丽的山茶花！{:4_174:}

寒冬残荷 发表于 2025-11-28 21:07

也曾年轻 发表于 2025-11-28 20:55
也许是引用的文件没正确载入导致的。

现在换了一个地方（用的屋舍网站），您看还有没有问题。

看到LRC歌词和图片轮播了！太美了！望老师佳作频出！

寒冬残荷 发表于 2025-11-28 21:14

也曾年轻 发表于 2025-11-28 20:55
也许是引用的文件没正确载入导致的。

现在换了一个地方（用的屋舍网站），您看还有没有问题。

哦，看到了，您的.JS文件原放彩虹网，我放过也不得，放.html文件也运行不得。

也曾年轻 发表于 2025-11-28 21:19

樵歌 发表于 2025-11-28 21:03
动听的歌声，好美丽的山茶花！

谢谢欣赏支持！晚上好！

也曾年轻 发表于 2025-11-28 21:22

寒冬残荷 发表于 2025-11-28 21:14
哦，看到了，您的.JS文件原放彩虹网，我放过也不得，放.html文件也运行不得。

我的电脑对屋舍上的文件认为是有害文件，放彩虹盘是为避开屋舍。

看来免费的都多少有些毛病。
页: [1] 2 3
查看完整版本: 山茶花