醉美水芙蓉 发表于 2025-1-2 21:19:11

2025 年我们都暴富

<div style="position:relative; width:1300px;height:750px;overflow:hidden;border-radius:0%;box-shadow: 0px 0px 0px #333; ">
<style>
#mydiv { margin: 0px 0 0 calc(0% - 0px); display: grid; place-items: center; width: 960px; height: 600px; background: lightblue url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/cf995f7a930fdf437f9df8e307ab2a90_preview.jpg') no-repeat center/cover; box-shadow: 0px 0px 0px #333; user-select: none; overflow: hidden; position: relative;--state: running; }
#mydiv::before,#mydiv::after { position: absolute; left: 550px; top: 250px; content: url('https://bbs.cnzv.cc/up/upload/pic/12/20250102-d651dcdc39ac7ace94ed36c12a4f5db3.gif'); mix-blend-mode: screen; offset-path: path('M60,120 L300,200');animation: move 30s var(--delay) infinite var(--state); --delay: 0s; }
#mydiv::after { --delay: -15s; }
@keyframes move { from {offset-distance: 0%; transform: rotate(0deg); } to { offset-distance: 100%; transform: rotate(720deg); } }
#mplayer {margin:0 auto;z-index: 40;position: absolute;top:0%;left:0%;width: 100px;height: 50px;cursor: pointer;animation: spin 10s infinite linear;}
@keyframes spin {0% {transform: rotate(360deg);}}
#lrc{left: 15%; top: 82%;} #lrcc {right:15%; top:90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#0E02FD;border:0px solid black;position: absolute;font:normal 2.0em Microsoft YaHei;color:#03C9FB;white-space: pre;-webkit-background-clip: text;z-index: 10;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff 1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color:#0303FB;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}

.vid{position: absolute; width: 960px; height: 600px; top: 0px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ; }
.mm img { width:210px; height: 280px;
      position: absolute;
      left:0px; top:-40px;z-index: 10;
      box-shadow:0px 0px 0px 2px #ffffff, 0px 0px 2px 6px #B5EDFD;
      background-size:100% 100%;
      border-radius: 0px; }
.mm   { margin: 160px auto;
      width: 210px;
      height: 280px;
      transform-style: preserve-3d;
      animation-name: animate;
      animation-duration: 100s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      position: relative; }
@keyframes animate{
      from {transform: rotatex(-20deg) rotateY(0deg);}
         50% {transform: rotatex(20deg) rotateY(-720deg);}
          to {transform: rotatex(-20deg) rotateY(0deg);}
            }
.mm img:nth-child(1){ transform:translateZ(300px);}
.mm img:nth-child(2){ transform: rotateY( 40deg) translateZ(300px); }
.mm img:nth-child(3){ transform: rotateY( 80deg) translateZ(300px); }
.mm img:nth-child(4){ transform: rotateY(120deg) translatez(300px); }
.mm img:nth-child(5){ transform: rotateY(160deg) translatez(300px); }
.mm img:nth-child(6){ transform: rotateY(200deg) translatez(300px); }
.mm img:nth-child(7){ transform: rotateY(240deg) translatez(300px); }
.mm img:nth-child(8){ transform: rotateY(280deg) translatez(300px); }
.mm img:nth-child(9){ transform: rotateY(320deg) translatez(300px); }
.mm img:nth-child(1):stop{animation-play-state:paused;}
.mm img:nth-child(2):stop{animation-play-state:paused;}
.mm img:nth-child(3):stop{animation-play-state:paused;}
.mm img:nth-child(4):stop{animation-play-state:paused;}
.mm img:nth-child(5):stop{animation-play-state:paused;}
.mm img:nth-child(6):stop{animation-play-state:paused;}
.mm img:nth-child(7):stop{animation-play-state:paused;}
.mm img:nth-child(8):stop{animation-play-state:paused;}
.mm img:nth-child(9):stop{animation-play-state:paused;}
.stop{animation-play-state:paused;}

</style>
<div id="mydiv">

<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/cf995f7a930fdf437f9df8e307ab2a90_preview.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="testImg" class="mm">
<img src="https://bbs.cnzv.cc/up/upload/pic/12/20250101-f48a9b134ad553154af97dfeb0e9c484.jpg" />
<img src="https://bbs.cnzv.cc/up/upload/pic/12/20250101-7d6c25eec2a4f96f993475c66bf196cd.jpg" />
<img src="https://bbs.cnzv.cc/up/upload/pic/12/20250101-da8ad7bc1a3ebd0747b2680f916da95f.jpg" />
<img src="https://bbs.cnzv.cc/up/upload/pic/12/20250101-311c67720359bbd4cc7714ffc50b4425.jpg" />
<img src="https://bbs.cnzv.cc/up/upload/pic/12/20250101-02d6c9a6f549cf96c50a59dd7c00ef6c.jpg" />
<img src="https://bbs.cnzv.cc/up/upload/pic/12/20250101-8ffd2464de3490b33fcf0ecae937a30f.jpg" />
<img src="https://bbs.cnzv.cc/up/upload/pic/12/20250101-3caa8f903f3939885981352ae323c089.jpg" />
<img src="https://bbs.cnzv.cc/up/upload/pic/12/20250101-3ffdcf0b86b360d4c415a8ea30881b05.jpg" />
<img src="https://bbs.cnzv.cc/up/upload/pic/12/20250101-4941a48dcb92f174b229335502aa2252.jpg" />
</div>

<audio id="MusicPlayer" src="https://www.joy127.com/url/119344.mp3" loop autoplay>
</audio>
<div type="button" id="btn" title="">
    <img id="mplayer" src="https://bbs.cnzv.cc/up/upload/pic/12/20241221-dc50464e30c747d941ccf88e96a183fe.png" alt="" />
</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>       
       
</div>

<span id="lrcStr" style="visibility: hidden;">
红蔷薇，落笔-2025 年我们都暴富（DJ 对唱版）
作词：陈晓容
作曲：陈晓容
演唱：红蔷薇/落笔
混音：贺尧丰
监制：贺尧丰
LRC编辑：醉美水芙蓉
女：清晨阳光照喜鹊来报到
新的一年到财神已来到
男：梦想在闪耀大步向前跑
2025 年要把财富捞
女：投资不失误创业有建树
薪资涨无数奖金拿到吐
男：副业也起步财源广进处
财源滚滚来挡都挡不住
合：2025 年我们都暴富
金银财宝堆满屋
女：豪车别墅不羡慕
男：账户数字蹭蹭突
合：2025 年我们都暴富
股票基金全飘红
女：事业腾飞路路通
男：好运爆棚乐无穷
合：财富自由不是梦
女：投资不失误创业有建树
薪资涨无数奖金拿到吐
男：副业也起步财源广进处
财源滚滚来挡都挡不住
合：2025 年我们都暴富
金银财宝堆满屋
女：豪车别墅不羡慕
男：账户数字蹭蹭突
合：2025 年我们都暴富
股票基金全飘红
女：事业腾飞路路通
男：好运爆棚乐无穷
合：财富自由不是梦
合：2025 年我们都暴富
金银财宝堆满屋
女：豪车别墅不羡慕
合：账户数字蹭蹭突
合：2025 年我们都暴富
股票基金全飘红
女：事业腾飞路路通
男：好运爆棚乐无穷
合：财富自由不是梦
谢谢欣赏！

</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let arr="";
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        lrca=lrcAr;
        lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
        let Y=String(mKey/2).indexOf(".");
        if (Y == -1)
    {
        0==mKey&&(lrc.innerHTML=lrca);
        lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
        lrcc.dataset.lrc = "";
        lrc.style.setProperty('--motion', 'cover1');
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
        }
    else
    {
        lrc.innerHTML = lrcb;
        lrcc.dataset.lrc = lrca;
        lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
        lrcc.style.setProperty('--tt', time + 's');
        lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
        }
        mKey += 1;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (MusicPlayer.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (MusicPlayer.currentTime - lrcAr);
        showLrc(time);
};

/*函数 ：关键帧动画状态切换*/
let mState = () => MusicPlayer.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.style.animationPlayState="running");
/*监听播放进度*/
MusicPlayer.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (MusicPlayer.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});

mplayer.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('pause', () => mState());/*监听暂停事件*/
MusicPlayer.addEventListener('play', () => mState());/*监听播放事件*/
MusicPlayer.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();

</script>

klxf 发表于 2025-1-3 00:37:10

很好，2025 年我们都暴富

admin 发表于 2025-1-3 16:20:10

2025我们都暴富！！1:D

醉美水芙蓉 发表于 2025-1-3 20:22:52

klxf 发表于 2025-1-3 00:37
很好，2025 年我们都暴富

㊗️友友新年快乐！

醉美水芙蓉 发表于 2025-1-3 20:23:19

admin 发表于 2025-1-3 16:20
2025我们都暴富！！1

㊗️老大新年快乐！
页: [1]
查看完整版本: 2025 年我们都暴富