论坛 › 欢乐水吧 › 下定决心忘记你 (DJ彭锐版) - 柳欢欢

亚伦影音工作室 发表于 2026-7-27 16:52

下定决心忘记你 (DJ彭锐版) - 柳欢欢

本帖最后由 亚伦影音工作室 于 2026-8-1 18:19 编辑 <br /><br /><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 -300px; width: 1286px; height: 720px; background: #880000 url(https://image.hnol.net/c/2026-07/27/17/202607271725018361-5769293.jpg)no-repeat center/cover; box-shadow:0 0px 0px 0px #800000;display: grid; place-items: center; position: relative; z-index: 1; --state: running; overflow:hidden;}
#papa:hover { background: #880000 url(https://image.hnol.net/c/2026-07/27/17/202607271749319191-5769293.jpg)no-repeat center/cover;transform: brightness(840%)}
#mplayer {z-index: 1;
position: absolute;top:20%; left:20%;
width: 250px;
height: 440px;
transition: 3s;
filter: drop-shadow(0 0 24px yellow);
align-items:center;
animation: spin 8s infinite linear var(--state);
}
#mplayer:hover { filter:drop-shadow(0 0 24px red); }
.leaf {position: absolute;
width: 40%;
height: 40%;
border-radius: 0px 90px;
border:3px solid #fff;
display: block;
margin-left: auto;
margin-right: auto;
       animation: sp 6s linear 1 forwards var(--state);
transform-origin: 125% 125%;
}

.leaf:nth-of-type(1) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/preview/f44a06506fcad3502a3a6dfb4e5c935d_preview_mid.jpg)no-repeat center/cover;
transform: rotate(60deg)translateX(60px);
}

.leaf:nth-of-type(2) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/preview/6bbf0da310122cbb5498514f07cfa387_preview_mid.jpg)no-repeat center/cover;
transform: rotate(120deg)translateX(60px);
}
.leaf:nth-of-type(3) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/preview/a7da91e19705a26b09fae3cad9851da3_preview_mid.jpg)no-repeat center/cover;
transform: rotate(180deg)translateX(60px);
}
.leaf:nth-of-type(4) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/live/979ad1300396ca12ddceb671be4ad9b8_preview_mid.jpg)no-repeat center/cover;
transform: rotate(240deg)translateX(60px);
}
.leaf:nth-of-type(5) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/preview/edc8135d413a8b0a4650aeceaefadc20_preview_mid.jpg)no-repeat center/cover;
transform: rotate(300deg)translateX(60px);
}
.leaf:nth-of-type(6) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/preview/ca77e1c4207406bace8b1073118b7901_preview_mid.jpg)no-repeat center/cover;
transform: rotateZ(360deg)translateX(60px);
}
@keyframes spin {0% { transform: rotate(-360deg);}
}
@keyframes sp {0% { transform: rotateY(180deg);}
}
#stage {cursor: pointer;z-index: 100;
      --len: 40px;
       top:20%; left:82%;
      position: absolute;
      width: var(--len);
      height: var(--len);
      transform-style: preserve-3d;
      animation: rot 8s linear infinite var(--state);

}
#stage div {
      position: absolute;
      width: inherit;
      height: inherit;
      color: #55ffaa;filter:hue-rotate(0deg)contrast(450%)brightness(840%);
       border-radius: 0px 0px ;
font-weight:100;
      font: 2em / var(--len) Ma Shan Zheng;
      text-align: center;
      left: 0; top: 0;
      opacity: 1;

}

@keyframes rot {100% { transform: rotatex(-12deg)rotateY(-360deg) scale(1);}
      0% { transform: rotatex(-12deg)rotateY(360deg) scale(1);}
      }


#wrapper {
                position: absolute;
                padding: 0px;
                font-weight:100;font-size:3em;font-family:"Ma Shan Zheng","STKaiti","SimHei",   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);
white-space: pre;transform: translateX(0%);text-align: center;
      width:100%;height:10%;left: 0%;z-index: 20;
                top:80%;white-space: nowrap;
        }
        .char {
                display: inline-block;
                padding: 0px 4px;
                opacity: 0;
                transform: translate(var(--x), var(--y))rotate(-720deg) ;
                animation: fadeIn 1.5s var(--delay) forwards var(--state),flash 0.5s linear infinite var(--state);
        }
       
        @keyframes fadeIn {
                100% {
                        transform: translate(0, 50%);
                        opacity: 1;
                }

        }
        @keyframes flash {
                100% {filter: hue-rotate(360deg);}

        }

#clone_player0,#clone_player1, #clone_player2, #clone_player3, #clone_player4, #clone_player5, #clone_player6, #clone_player7, #clone_player8, #clone_player9, #clone_player10,#clone_player11,#clone_player12 {
        position: absolute;
        left: 402px;
        top: 515px;
width: 35px;
        height: 3px;
        border-radius: 50%;
          background:#00ff00;
        box-shadow: 0px 0px 10px #ff0000;
        z-index: 10;
        --time: .2s;
        animation: rotating 0.65s var(--time) infinite alternate linear var(--state);
}
#clone_player0 { --time: 2.4s; left: 10%; top: 400px; filter: hue-rotate(30deg); }
#clone_player1 { --time: 1.4s; left: 50%; top: 492px; filter: hue-rotate(30deg); }
#clone_player2 { --time: 2.4s; left: 58%; top: 548px; filter: hue-rotate(50deg); }
#clone_player3 { --time: 2.0s; left: 8%; top: 254px; filter: hue-rotate(60deg); }
#clone_player4 { --time: 1.4s; left: 66%; top: 568px; filter: hue-rotate(40deg); }
#clone_player5 { --time: 3.4s; left: 71%; top: 441px; filter: hue-rotate(10deg); }
#clone_player6 { --time: 2.6s; left: 81%; top: 554px; filter: hue-rotate(60deg); }
#clone_player7 { --time: 1.0s; left: 20%; top: 468px; filter: hue-rotate(40deg); }
#clone_player8 { --time: 3.4s; left: 94%; top: 521px; filter: hue-rotate(10deg); }
#clone_player9 { --time: 2.4s; left: 45%; top: 451px; filter: hue-rotate(20deg);}
#clone_player10 { --time: 1.4s; left: 30%; top: 400px; filter: hue-rotate(60deg); }
#clone_player11 { --time: 3.4s; left: 54%; top: 580px; filter: hue-rotate(200deg); }
#clone_player12 { --time: 0s; left: 85%; top: 480px; filter: hue-rotate(300deg); }
@keyframes rotating {
        from { transform: translate(0px,120px) rotateZ(0deg)scale(1);}
        to { transform: translate(0px,-120px) rotateZ(2580deg)scale(1);filter: hue-rotate(360deg)contrast(450%)brightness(840%); }
}

       
#fullscreen{border-radius: 4px;position: absolute;
color:#eee;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 100;
font:400 32px/0px "STKaiti";color: #000;
border: none;
cursor: pointer; top: 5%;
      left: 2%;
}
</style>
<div id="papa">
<div id="fullscreen">全屏观赏</div>

<div id="wrapper"></div>
<div id="stage"></div>
<div id="mplayer">
        <span class="leaf"></span>

        <span class="leaf"></span>

        <span class="leaf"></span>

    <span class="leaf"></span>

        <span class="leaf"></span>

        <span class="leaf"></span>
</div>
<div id="clone_player0"></div>
        <div id="clone_player1"></div>
        <div id="clone_player2"></div>
        <div id="clone_player3"></div>
        <div id="clone_player4"></div>
        <div id="clone_player5"></div>
        <div id="clone_player6"></div>
        <div id="clone_player7"></div>
        <div id="clone_player8"></div>
<div id="clone_player9"></div>
<div id="clone_player10"></div>
<div id="clone_player11"></div>
<div id="clone_player12"></div>
      </div>
      <audio id="audio" src="https://www.djdvd.com/plug/down.php?ac=music&lk=mp3&id=65474e3463334e6a626e4e75" loop autoplay></audio>
<script>
(function() {
const gc = `下定决心忘记你 (DJ彭锐版) - 柳欢欢
词：正云
曲：蔓萱
编混：DJ彭锐
出品：亚伦影音工作室
走在彷徨的路上
我的心情暗自伤
多少快乐的往事
都随风儿去远方
说好不悲伤
为何泪红了眼眶
只因对你情太深
曾经相爱到放弃
如果继续也没有意义
曾经迷失了我自己
我会离开你远去
走到海角天边
刻骨铭心这份真情
含泪默默哭泣
下定决心忘记你
走在彷徨的路上
我的心情暗自伤
多少快乐的往事
都随风儿去远方
说好不悲伤
为何泪红了眼眶
只因对你情太深
曾经相爱到放弃
如果继续也没有意义
曾经迷失了我自己
我会离开你远去
走到海角天边
刻骨铭心这份真情
含泪默默哭泣
下定决心忘记你
曾经相爱到放弃
如果继续也没有意义
曾经迷失了我自己
我会离开你远去
走到海角天边
刻骨铭心这份真情
含泪默默哭泣
下定决心忘记你

`;

      const gcAr = lrc2HC(gc);
      let curkey = 0, isSeeking = false;

      audio.ontimeupdate = () => {
                if(curkey > gcAr.length - 1) return;
                if(audio.currentTime >= gcAr) {
                        const gap = gcAr?. ?? 0 - gcAr;
                        showLrc(gcAr, wrapper, gap);
                }
      };

      audio.onended = () => {
                curkey = 0;
                aud.play();
      }

      audio.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 (audio.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 ? 1000 : -1000);
                        const y = Math.random() * (Math.random() > 0.5 ? 600:-600);
                        span.style.cssText += `
                              color: #${Math.random().toString(16).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>
      
      <script>
(function() {let txt = "下定决心忘记你(DJ彭锐版)*柳欢欢*";
let angle = 360 / txt.length;
let w = stage.clientWidth;
let trz = Math.ceil(Math.tan(Math.PI / 180 * (180 - angle) /2 ) *w / 2);
let str = "";
for(j=0; j<txt.length; j++){
      let cc = `#${Math.random().toString(16).substr(-6)}`;
let ry = Math.floor(j*angle);
      str += `<div style="color: ${cc};transform:rotateY(${ry}deg) translateZ(${trz}px);">${txt.charAt(j)}</div>\n`;
}
stage.innerHTML = str;
})();

(function() {
      
      var mState = () => {papa.style.setProperty('--state', audio.paused ? 'paused' : 'running');
         stage.style.setProperty(audio.paused ? 'paused' : 'running');
      };
audio.onplaying = audio.onpause = () => mState();
stage.onclick = () => audio.paused ? audio.play() : audio.pause();
})();


let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
</script>

亚伦影音工作室 发表于 2026-7-27 16:52

//video-bsy-zip.51miz.com/preview/video/00/00/15/31/V-153194-63DE8BA8.mp4

梦油 发表于 2026-7-27 16:54

为亚伦朋友无与伦比的精彩制作鼓掌。{:4_199:}

红影 发表于 2026-7-27 20:28

小鞋跳跃的小棒真好看，还有旋转的花瓣图，背景也漂亮。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-7-27 21:06

新颖别致，效果漂亮，谢谢亚伦老师精彩示范{:4_190:}

查看完整版本: 下定决心忘记你 (DJ彭锐版) - 柳欢欢