岩新新 发表于 2024-9-14 14:33

王铮亮 - 喀秋莎 (Live)

本帖最后由 岩新新 于 2024-9-14 14:56 编辑 <br /><br /><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: 780px; background: url('https://cccimg.com/view.php/6a6ea18d4627cbf068d26e337be44ec7.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://cccimg.com/view.php/ef7474675cb5c557c0637838ef527d7c.mp3" autoplay loop></audio>
         <img id="player" alt="" src="https://cccimg.com/view.php/634bb131adb7e17d7672ca5283467f39.png" titel="播放/暂停" />
         <img id="pic" alt="" src="https://cccimg.com/view.php/6a103793e17dc2980043235a9144ee38.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 = `喀秋莎 (Live) - 王铮亮 (Reno Wang)
正当梨花开遍了天涯
河上飘着柔曼的轻纱
喀秋莎站在峻峭的岸上
歌声好像明媚的春光
喀秋莎站在峻峭的岸上
歌声好像明媚的春光
姑娘唱着美妙的歌曲
她在歌唱草原的雄鹰
她在歌唱心爱的人儿
她还藏着爱人的书信
她在歌唱心爱的人儿
她还藏着爱人的书信
啊这歌声姑娘的歌声
跟着光明的太阳飞去吧
去向远方边疆的战士
把喀秋莎的问候传达
去向远方边疆的战士
把喀秋莎的问候传达
驻守边疆年轻的战士
心中怀念遥远的姑娘
勇敢战斗保卫祖国
喀秋莎爱情永远属于他
勇敢战斗保卫祖国
喀秋莎爱情永远属于他
正当梨花开遍了天涯
河上飘着柔曼的轻纱
喀秋莎站在峻峭的岸上
歌声好像明媚的春光
喀秋莎站在峻峭的岸上
歌声好像明媚的春光
`;
        getAr(lrc);
</script></td></tr></table>

小辣椒 发表于 2024-9-14 14:38

这个代码有错误呢

小辣椒 发表于 2024-9-14 14:41

欣赏岩新精彩的制作，播放器颜色偏深，可以移动一下位置

小辣椒 发表于 2024-9-14 14:41

可以直接代码发帖，你源代码有溢出码





岩新新 发表于 2024-9-14 14:44

小辣椒 发表于 2024-9-14 14:41
可以直接代码发帖

用代码图片不显示！

小辣椒 发表于 2024-9-14 14:47

岩新新 发表于 2024-9-14 14:44
用代码图片不显示！

那个图片？

岩新新 发表于 2024-9-14 14:50

小辣椒 发表于 2024-9-14 14:47
那个图片？

谢谢，现在图片显示了！

小辣椒 发表于 2024-9-14 14:58

岩新新 发表于 2024-9-14 14:50
谢谢，现在图片显示了！

好的，我去删除我发的

红影 发表于 2024-9-14 17:45

漂亮的变色效果，精美的制作。
欣赏新新好帖{:4_199:}
页: [1]
查看完整版本: 王铮亮 - 喀秋莎 (Live)