论坛首页 › 单图音画 › 珊瑚颂 (雷鬼版) - 大头钉团队

亚伦影音工作室 发表于 2026-5-23 20:38:25

珊瑚颂 (雷鬼版) - 大头钉团队

本帖最后由 亚伦影音工作室 于 2026-5-27 15:45 编辑 <br /><br /><div id="papa">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/8f22ccd228cbc1f638b88ed120645986_preview.mp4" loop muted autoplay=""></video>
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/20bfeebe9e314eef46ce51106a2e0957_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://music.163.com/song/media/outer/url?id=3384778015.mp3" type="audio/mpeg">
         </audio>

</div>

<style>
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#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:300;font-size:3.5em;font-family: "ZCOOL QingKe HuangYou","Liu Jian Mao Cao","STKaiti","SimHei","KaiTi", cursive, serif;
                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 4px;
                opacity: 0;
                transform: translate(var(--x), var(--y));
                animation: fadeIn 1.5s var(--delay) forwards,flash 0.5s linear infinite;
        }
       
        @keyframes fadeIn {
                100% {
                        transform: translate(0, 0);
                        opacity: 1;
                }

        }
        @keyframes flash {
                100% {filter: hue-rotate(360deg)brightness(120%)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 = `珊瑚颂 (雷鬼版) - 大头钉团队
词：赵忠/钟艺兵/林萌梧/单文
曲：胡士平/王锡仁
一树红花照碧海
一团火焰出水来
珊瑚树红春常在
风里浪里花常开
哎
云来遮
雾来盖
云里雾里放光彩
风吹来
浪打来
风吹浪打花常开
一树红花照碧海
一团火焰出水来
珊瑚树红春常在
风里浪里花常开
哎
云来遮
雾来盖
云里雾里放光彩
风吹来
浪打来
风吹浪打花常开

`;

      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(8).substring(8,2)};
                              --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 20:50:56

欣赏亚伦老师精彩音画！

醉美水芙蓉 发表于 2026-5-23 20:51:57

感谢老师的精彩音画作品,美美哒帖子，音乐悦耳~

醉美水芙蓉 发表于 2026-5-23 20:52:57

漂亮音乐贴 音画细腻做工显用心，歌曲好听！

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

漂亮~谢谢亚伦老师精彩分享

zlpi@163.com 发表于 2026-5-28 09:52:55

限漂亮的画面，欣赏

查看完整版本: 珊瑚颂 (雷鬼版) - 大头钉团队