岩新新 发表于 2024-9-14 07:46

王菲 - 但愿人长久 (3D环绕版)

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_743807">
<style>
        #mydiv { margin: 130px 0 30px calc(50% - 781px); width: 1400px; height: 760px; background: url('https://webftp-bbs.hnol.net/yx2021/pj155/8.gif') no-repeat center/cover; box-shadow: 2px 2px 6px #333; overflow: hidden; display: grid; place-items: center; position: relative; }
        #mydiv::after {content: attr(data-lrc); position: absolute; bottom: 30px; width: 100%; height: 60px; text-align: center; font: normal 45px/60px \9ED1\4F53; color: transparent;text-shadow: 1px 1px 1px #138b79;background: radial-gradient(pink, white, Salmon) center/120px 60px; -webkit-background-clip: text;}

        #mydiv::before { position: absolute; content: ''; inset: 0; background-image: repeating-linear-gradient(135deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 11px, transparent 12px), repeating-linear-gradient(22.5deg, rgb(0,0,0) 0px, rgb(0,0,0) 10px, transparent 10px, transparent 11px), linear-gradient(180deg, hsl(31,100%,50%), hsl(51,100%,50%), hsl(71,100%,50%), hsl(178,100%,50%), hsl(234,100%,82%)); mix-blend-mode: color-dodge; animation: chg 6s linear infinite var(--state); }
        #player { position: absolute; left: 10%; top: 80%; width: 120px; filter: hue-rotate(320deg); z-index: 10; transition: width .5s; opacity: .5; cursor: pointer; animation: rot 8s linear infinite var(--state); }

    #player:hover { filter: hue-rotate(240deg); }
    #vid { position: absolute; left: -200px; top: -100px; opacity: .3; width: 80%; height: 50%;transform: rotate(20deg); object-fit: cover; mix-blend-mode: multiply; pointer-events: none; }
#pic { position: absolute; width:1400px; height:720px;bottom: 1%; left: 1%; transform-origin:center bottom;transform: rotate(180deg); animation: hy 1.2s infinite alternate ;}


    @keyframes hy { from { opacity: 0.6; transform: rotate(-1deg); }to { opacity: .25; transform: rotate(2deg); }}
    @keyframes rot { to { transform: rotate(360deg); } }
    @keyframes chg { to { inset: -60px; } }
</style>

<div id="mydiv" class="mydiv" data-lrc="HUACHAO">

        <audio id="aud" src="https://webftp-bbs.hnol.net/yx2021/pj155/01.swf" autoplay loop></audio>
         <img id="player" alt="" src="https://webftp-bbs.hnol.net/yx2021//pj154/meihua_133482968750383750.png" titel="播放/暂停" />
         <img id="pic" alt="" src="https://webftp-bbs.hnol.net/yx2021/pj155/Untitled-1.gif" />
         <img id="pic" alt="" src="https://webftp-bbs.hnol.net/yx2021/pj155/3.gif" />
</div>

<script>
var sF = document.createElement('script');
sF.src = 'https://webftp-bbs.hnol.net/yx2021//pj155/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
        papa: '#mydiv',
        css: 'bottom: 100px; left: 50%; transform: translate(-50%); --color: rgba(32,178,170.5); --fsBg: transparent;',
});
var curkey = 0, lrcAr = [];
        var getAr = (text) => {
                var ar = text.trim().split('\n');
                ar.sort();
                var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
                ar.forEach(item => {
                        let result = item.match(reg);
                        let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                        lrcAr.push(.trim()]);
                });
        };
var mState = () => {
        mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
        aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onseeked = () => curkey = 0;
        aud.ontimeupdate = () => {
                if(curkey > lrcAr.length - 1) return;
                if(aud.currentTime >= lrcAr) {
                        mydiv.dataset.lrc = lrcAr;
                        curkey ++;
                }
        };       
        var lrc = `王菲 - 但愿人长久 (3D环绕版)
作词：苏轼
作曲：梁弘志
明月几时有
把酒问青天
不知天上宫阙
今夕是何年
我欲乘风归去
唯恐琼楼玉宇
高处不胜寒
起舞弄清影
何似在人间
转朱阁
低绮户
照无眠
不应有恨
何事长向别时圆
人有悲欢离合
月有阴晴圆缺
此事古难全
但愿人长久
千里共婵娟
我欲乘风归去
唯恐琼楼玉宇
高处不胜寒
起舞弄清影
何似在人间
转朱阁
低绮户
照无眠
不应有恨
何事长向别时圆
别时圆
人有悲欢离合
月有阴晴圆缺
此事古难全
但愿人长久
千里共婵娟
`;
        getAr(lrc);
</script></td></tr></table>

起个网名好难 发表于 2024-9-14 09:01

https://5b0988e595225.cdn.sohucs.com/images/20190627/2fcecd89550b4c1cb36ee7bff90ab110.gif

梦江南 发表于 2024-9-14 10:13

问好老师，佳作欣赏！{:4_199:}

红影 发表于 2024-9-14 15:14

漂亮的制作，很适合中秋节呢。
欣赏新新好帖{:4_199:}

红影 发表于 2024-9-14 15:21

好像背景变化上下有空缺呢，是不是满布更好看{:4_204:}
页: [1]
查看完整版本: 王菲 - 但愿人长久 (3D环绕版)