醉美水芙蓉 发表于 2026-5-23 20:48:45

小甜橘 - 佛

<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 -180px ; 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>

klxf 发表于 2026-5-23 23:06:58

富有新意~谢谢友友精彩分享

醉美水芙蓉 发表于 2026-5-24 10:09:28

klxf 发表于 2026-5-23 23:06
富有新意~谢谢友友精彩分享

谢谢友友光临！

llz123 发表于 2026-5-29 17:01:07

美芙蓉这个帖子不错，视频融合非常好，点赞！

醉美水芙蓉 发表于 2026-5-31 19:47:00

llz123 发表于 2026-5-29 17:01
美芙蓉这个帖子不错，视频融合非常好，点赞！

谢谢老师光临点评！
页: [1]
查看完整版本: 小甜橘 - 佛