醉美水芙蓉 发表于 2026-5-23 20:56:12

【水芙蓉播放器】小甜橘 - 佛

<meta charset="utf-8">
<div id="papa">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/5955589a5efe9f34852b6497364902e6_preview.mp4" loop muted autoplay=""></video>
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/fbdf08f459824b97516957432cb933af_preview.mp4" loop muted autoplay=""></video>
<div id="testImg" >
<div id="wrapper"></div>
</div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<audio id="aud"autoplay loop >
            <source src="https://www.joy127.com/url/151325.mp3" type="audio/mpeg">
         </audio>

</div>

<style>
#papa { margin: 10px 50px ; width: 1186px; height: 620px;background:#800000; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #800000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;border-radius: 0px 0px;--state: running;/* 示例混合模式 */}
#vid{width: 100%; height: 100%;z-index: 2;
position:absolute;
top:0%; left:-15%;-webkit-mask-image: radial-gradient( circle at 0% 0%, black 50%, transparent 75%);
object-fit: cover; pointer-events: none;
}

#vid1{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:10%;
object-fit: cover; pointer-events: none;
}

#wrapper {
                position: absolute;
                padding: 10px;
                font-weight:200;font-size:3.2em;font-family: "华文新魏";
                filter: drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 1px 0) drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px 0);

      width: 50%;height:90px;left: 50%;transform: translateX(-50%);z-index: 12;text-align: center;
                top: 80%;white-space: nowrap;
        }
        .char {
                display: inline;
                padding: 6px 3px;
                opacity: 0;filter: hue-rotate(30deg)brightness(100%)contrast(120%);
                transform: translate(var(--x), var(--y));
                animation: fadeIn 1.5s var(--delay) forwards,flash 1.5s linear infinite;
        }
       
        @keyframes fadeIn {
                100% {
                        transform: translate(0, 0);
                        opacity: 1;
                }

        }
        @keyframes flash {
                100% {filter: hue-rotate(360deg)brightness(80%)contrast(200%);}

        }
        .stop .char{animation-play-state: paused;}

#player {position:absolute;top: 4%;z-index: 98;
            left: 85%;
width: 120px;
height: 120px;
display: grid;
        place-items: center;
animation: rot 8s linear infinite ;

}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
        width: 30%;
        height: 30%;
display: grid;
        place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);

}
#rect:nth-of-type(1) { background:#880000;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#eee;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom:22px; cursor: pointer;right:94%;z-index: 140;}

#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>

<script>
player.onclick = () => aud.paused ? (aud.play(),vid.play(),vid1.play(),player.style.animationPlayState = 'running',image.classList.remove('stop')) : (aud.pause(),vid.pause(),vid1.pause(),player.style.animationPlayState = 'paused',image.classList.add('stop'));
image=document.getElementById('testImg');
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}
</script>

<script>
       
const gc = `小甜橘 - 佛
LRC编辑：醉美水芙蓉
菩提落 染白了青石阶
檀香绕 漫过了旧经卷
木鱼敲 敲碎了尘缘劫
一念起 一念又归灭
心是镜 照见三千界
不增不减 不垢不净 无挂牵
风过耳 吹散了执念
不争不辩 不言不语 坐山巅
佛在菩提下 拈花笑
佛在明镜前 照尘嚣
佛在心头坐 无纷扰
一呼一吸 皆是道
晨钟鸣 惊醒了春夜晓
暮鼓响 送走了落日谣
袈裟披 遮住了人间扰
半盏茶 煮尽了寂寥
心是莲 开在淤泥间
不染不妖 不悲不喜 自清廉
月当头 照亮了归田
不疾不徐 不慌不忙 度流年
佛在菩提下 拈花笑
佛在明镜前 照尘嚣
佛在心头坐 无纷扰
一呼一吸 皆是道
放下 放下 烦恼三千
随缘 随缘 世事变迁
菩提本无树 明镜亦非台
本来无一物 何处惹尘埃
佛在 拈花笑
佛在 照尘嚣
佛在 心头绕
一呼一吸 皆是道
禅音落 天地宽
谢谢欣赏！

`;

      const gcAr = lrc2HC(gc);
      let curkey = 0, isSeeking = false;

      aud.ontimeupdate = () => {
                if(curkey > gcAr.length - 1) return;
                if(aud.currentTime >= gcAr) {
                        const gap = gcAr?. ?? 0 - gcAr;
                        showLrc(gcAr, wrapper, gap);
                }
      };

      aud.onended = () => {
                curkey = 0;
                aud.play();
      }

      aud.onseeked = () => calcKey();

      function lrc2HC(text) {
                let lrcAr = [];
                let ar = text.trim().split('\n');
                ar.sort();
                let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        if(reg.test(item)) {
                              let result = item.match(reg);
                              let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                              lrcAr.push(.trim()]);
                        }
                });
                return lrcAr ? lrcAr : ;
      };

      function calcKey() {
                for (let j = 0; j < gcAr.length; j++) {
                        if (aud.currentTime <= gcAr) {
                              curkey = j - 1;
                              break;
                        }
                }
                if (curkey < 0) curkey = 0;
                if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
                let time = gcAr?. ?? 0 - gcAr;
                isSeeking = false;
                showLrc(gcAr, wrapper, time);
      }

      function showLrc(str, targetElm, time) {
                if(isSeeking) return;
                targetElm.innerHTML = '';
                const chars = str.split('').map(c => c === ' ' ? ' ' : c);
                const frg = document.createDocumentFragment();
                chars.forEach((char, idx) => {
                        const span = document.createElement('span');
                        span.innerHTML = char;
                        span.classList.add('char');
                        const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
                        const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
                        span.style.cssText += `
                              color: #${Math.random().toString(10).substring(2,8)};
                              --x: ${x}px;
                              --y: ${y}px;
                              --delay: ${Math.random() * 0.5}s;
                        `;
                        frg.appendChild(span);
                });
                targetElm.appendChild(frg);
                curkey ++;
                setTimeout(() =>isSeeking = false, time);
      }
</script>

欧阳风刀 发表于 2026-5-23 21:05:08

特效十分精彩，画面色彩清新，意境空灵宁静，充满禅意。

欧阳风刀 发表于 2026-5-23 21:06:24

佛曲很是治愈，欣赏聆听精彩。

欧阳风刀 发表于 2026-5-23 21:06:41

感谢水芙蓉精心制作分享，周末愉快啊。

醉美水芙蓉 发表于 2026-5-23 21:30:43

欧阳风刀 发表于 2026-5-23 21:06
感谢水芙蓉精心制作分享，周末愉快啊。

问好欧阳帅晚上好！谢谢光临！

念若莲 发表于 2026-5-24 10:22:42

{:S15:}萌宠版小和尚小猫咪，这也太可爱了吧

念若莲 发表于 2026-5-24 10:25:27

庄严祥和的气场，阿弥陀佛

念若莲 发表于 2026-5-24 10:26:10

{:1_150:}蛐蛐儿好听，静心嘀佛曲

醉美水芙蓉 发表于 2026-5-24 11:23:57

念若莲 发表于 2026-5-24 10:26
蛐蛐儿好听，静心嘀佛曲

谢谢友友支持！

绿蔷薇 发表于 2026-5-24 11:32:05

哇，这动画清新脱俗哈，小和尚、猫咪，搭配巨大的荷叶，给人安静的松弛感~~{:4_123:}
页: [1] 2 3
查看完整版本: 【水芙蓉播放器】小甜橘 - 佛