论坛 › 欢乐水吧 › 恋曲1990（律动男版） DJ阿涵

亚伦影音工作室 发表于 2026-9-4 21:08

恋曲1990（律动男版） DJ阿涵

本帖最后由 亚伦影音工作室 于 2026-9-6 19:57 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");
#mydiv {
    margin: 20px -320px;
      display: grid;
      place-items: center;
      width: 1186px;
      height: 640px;
      background: #000;
      user-select: none;
      overflow: hidden;
      position: relative;perspective: 2000px;
      z-index: 1;--state: running;
}
#vid {
    position: absolute;
    width: 100%;
    height: 100%;
top: 0;
left: 0;
    object-fit: cover;
    display: block;
    mix-blend-mode:lighten;
   opacity: 0.8;
   z-index: 6;
   
}
#vid1 {
    position: absolute;
    width: 100%;
    height: 100%;
top: 0;
left: 0;
    object-fit: cover;
    display: none;
    mix-blend-mode:lighten;
   filter: invert(100%);
opacity: 0.8;
   z-index: 6;
   
}
.slide {z-index: 4;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

}

.slide img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}


#overlay {
position: absolute;
top: -60px;
left: 0;
width: 100%;
height: calc(100% + 80px);
object-fit: cover;
mix-blend-mode: overlay;
opacity: 0.0;
z-index: 50;
pointer-events: none;
}

/* 添加模糊糊到清晰效果样式 */
.blur-to-clear-effect {
animation: blurToClear 0.25s ease-out forwards var(--state);
}

@keyframes blurToClear {
0%{
    filter: blur(0px);transform: scale(1);
    opacity: 1;
}
20%{
    filter: blur(0);transform: scale(1.1);
    opacity: 1;
}
100%{
    filter: blur(0px);transform: scale(1);
    opacity: 1;
}
}
#main {z-index: 6;
position: absolute;
overflow: hidden;display: none;
width: 100%;height:100%;
min-height: 98vh;margin: 0px 0px;
perspective: 340px;
}
#stars {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 2px;
box-shadow: -238px 108px #f7f7f7, 193px -376px #f7f7f7, -1264px -60px #fafafa,
    145px -443px #c9c9c9, -1440px 37px #f7f7f7, 262px -136px #cfcfcf,
    212px 219px #e3e3e3, 319px 223px #c7c7c7, 1246px -51px #c9c9c9,
    308px 26px #e0e0e0, 147px 229px #e6e6e6, -1041px 450px #d1d1d1,
    671px 86px white, -921px 234px #f0f0f0, -957px 242px #e8e8e8,
    1249px -285px #d1d1d1, 741px 434px #d9d9d9, -1030px 330px #ededed,
    311px -475px #fcfcfc, -413px -105px #d4d4d4, 868px -435px #f7f7f7,
    -790px 289px #dbdbdb, 202px 427px #fcfcfc, -22px -158px #c9c9c9,
    -1294px -297px #cccccc, -63px 200px #f0f0f0, -592px -86px #f7f7f7,
    -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #c9c9c9,
    -1442px -153px #f7f7f7, 1124px -219px #ededed, 701px 257px #f0f0f0,
    36px -179px #ebebeb, -937px 480px #f7f7f7, -267px -418px #f2f2f2,
    1467px 127px #cfcfcf, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,
    624px 275px #fafafa, -473px 150px #e6e6e6, -537px -348px #d4d4d4,
    410px 455px #ebebeb, 497px -29px #cccccc, 416px -370px whitesmoke,
    977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,
    -1049px 409px white, 959px 407px #c9c9c9, -1153px -168px #dedede,
    -437px -216px #dbdbdb, -572px 420px #fcfcfc, -228px 78px #dbdbdb,
    -925px 452px #cccccc, 244px 30px #c4c4c4, 453px -336px #dedede,
    993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #fcfcfc,
    -170px -153px #c4c4c4, 987px -208px #d1d1d1, 596px 166px #fcfcfc,
    -1362px -28px #c4c4c4, 1291px -106px #e3e3e3, -1128px 169px #ededed,
    1056px 367px #ebebeb, 261px -128px #cccccc, 1017px 401px #cccccc,
    1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3,
    1481px 268px #d1d1d1, 832px -345px #cccccc, -863px 138px #f0f0f0,
    -997px -412px #e3e3e3, -330px -260px #d9d9d9, 691px -39px #fcfcfc,
    -468px -135px #d6d6d6, -535px 405px #e8e8e8, -1289px -284px #e3e3e3,
    823px -225px #cccccc, -1172px -348px white, 505px -319px #ededed,
    94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #f2f2f2,
    1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white,
    1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #fafafa,
    205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #f0f0f0,
    649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9,
    -1405px 397px #cfcfcf, 30px -81px #e6e6e6;
animation: fly 3s linear infinite var(--state);
transform-style: preserve-3d;
}
#stars:before,
#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:before {
transform: translateZ(-300px);
animation: fade1 3s linear infinite var(--state);
}
#stars:after {
transform: translateZ(-600px);
animation: fade2 3s linear infinite var(--state);
}
@keyframes fly {
from {
    transform: translateZ(0px);
}
to {
    transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
    opacity: 0.5;
}
to {
    opacity: 1;
}
}
@keyframes fade2 {
from {
    opacity: 0;
}
to {
    opacity: 0.5;
}
}


#wrapper {z-index: 12;
                position: absolute;
                padding: 0px 0px; color: #00aa00;
                font:normal 3em "Ma Shan Zheng", "悟空大体库","SimHei", "Arial", "sans-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);
       text-align: center; top: 87%;
        }
        .char {
                display: inline-block;
                padding: 4px 3px;
                opacity: 0;color: #00aa00;
                transform: translate(var(--x), var(--y));
                animation: fadeIn 1.5s var(--delay) forwards var(--state), flash 1s infinite alternate var(--state);
        }
       
        @keyframes fadeIn {
                to {
                        transform:scale(1);
                        opacity: 1;
                }
        }
        @keyframes flash {
                to { filter: hue-rotate(360deg)brightness(120%)contrast(450%); }
        }
#sp,#c,#b,#fullscreen{border-radius: 4px;position:relative;
color:#00aa00;background:#ddd;box-shadow:0px 0px 0px 1px #00aa00;
padding: 4px 8px;z-index: 120;width: 40%;
        height: 20%;
font-size: 14px;
border: none;
cursor: pointer;z-index: 92;
}

#bnt{left:70%;top: 74%;width: 150px;height: 50px;position: absolute;filter: invert(100%); cursor: pointer;z-index: 61}
#ptxt{width:100%;height:6px;font:100 20px/0px "华文行楷","SimHei", "Arial", "sans-serif";color: #000;line-height:0px;bottom: 8%;left:78%;position: absolute;z-index: 20}
#prog {position: absolute; display: grid; place-items: center; width: 215px; height: 115px; left:67%; top: 69%;border-radius: 80%;-webkit-mask: radial-gradient( transparent 67%, #000 68%, #000 0);cursor:pointer; z-index: 60;}
</style>

<div id="mydiv">
<video id="vid" src="https://www.panurl.cn/view.php/bedf9e880e08a6d3ce4f8e3a117c0a93.mp4" autoplay loop muted></video>
<video id="vid1" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1196826770.mp4" autoplay loop muted></video>

<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3ca7c44b3fe230cfbe42ecd955aac5a5.jpg" alt="图片1">
</div>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/93884784b498f1a65064e914bb056340.jpg" alt="图片2">
</div>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/c58ee618784c05a21b7b2ebc8d196e89.jpg" alt="图片3">
</div>
<div class="slide">
    <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/5ecd9bf72e90082400fb4fa87c91ba5f.jpg" alt="图片4">
</div>
    <div class="slide">
      <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e8546b5aaffb07791ed178d61e7cff7a.jpg" alt="图片5">
      </div>
      <div class="slide">
      <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d8479e15a051125823083f4d4d362b98.jpg" alt="图片6">
      </div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=3389354291.mp3"loopautoplay ></audio>

<div class="wra"id="wrapper"></div>
<div id="main">
<div id="stars"></div>
</div>
<div style="position: absolute;top:4%;left: 72%;">
<span id="c" title="歌词模式">竖列歌词</span>
<span id="b" title="特效模式">显示粒子</span>
<span id="sp" title="转场模式">擦拭模式</span>
<span id="fullscreen">全屏观赏</span>
</div>
<div class="son"><img id = "bnt" src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png">
<div id="ptxt">正在播放 0%</div>
<divid="prog"></div></div>
</div>

<script>
prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 10 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
                }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from 0deg,#ff0000,#ff0000,#ff0000 ' + aud.currentTime / aud.duration * 100 + '%, #00ff00 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
                });

bnt.onclick = () => aud.paused ? (aud.play(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png",vid.play()) : (aud.pause(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5751f8fda9783decc81.png",vid.pause());

mState = () => {mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? (vid.pause(),vid1.pause()): (vid.play(),vid1.play());

};
aud.onplaying = aud.onpause = () => mState();

aud.addEventListener("timeupdate",function(){
                              var percent= aud.currentTime / aud.duration
                              var sp = 600 / 100 ;
                              var swidth =(percent * 100 * sp) + "px";
                              console.log(percent*100,swidth)
                              //保留2位小数
                              document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
                              
                        })



</script>
<script>
let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
let timer;

// 只保留模糊到清晰效果
const effects = [
{func: applyBlurToClearEffect}   
];

function init() {
const firstSlide = slides;
effects.func(firstSlide); // 始终使用第一个效果（模糊到清晰）
startTimer();
}

// 清除所有效果
function clearEffects() {
// 移除所有可能的效果类
slides.forEach(slide => {
    slide.style.opacity = '0';
    slide.classList.remove('blur-to-clear-effect');
});
}

function showNext() {if(!aud.paused){
clearEffects();
currentIndex = (currentIndex + 1) % totalSlides;
const currentEffect = effects; // 始终使用第一个效果（模糊到清晰）

const targetSlide = slides;
currentEffect.func(targetSlide);
resetTimer();
}
}

// 模糊到清晰效果
function applyBlurToClearEffect(slide) {
slide.style.opacity = '1';
slide.classList.add('blur-to-clear-effect');
}

function startTimer() {
timer = setInterval(showNext, 1000);
}

function resetTimer() {
clearInterval(timer);
startTimer();
}

window.onload = init;
var wrapper=document.getElementById("wrapper");
const wra= document.querySelector('.wra');
var writingmode=document.getElementById("writing-mode");
var writingspace=document.getElementById("white-space");
var texalign=document.getElementById("center");
let fsa = true;
      c.onclick = () => {
            if (fsa) {c.innerText = '横列歌词';
                   wra.style.width= '60px'; wra.style.height= '90%'; wra.style.top= '5%'; wra.style.left= '8%';
wra.style.writingmode= 'vertical-lr'; wra.style.writingspace= 'pre';wra.style.transform= 'scale(0.8)';
            wra.style.display = 'block';
            wrapper.display = 'none';

         }else {c.innerText = '竖列歌词';
            wrapper.style.transform= 'scale(1.1)';wrapper.style.top= '90%';wrapper.style.width= '100%'; wrapper.style.left= '0%';
            wra.style.display = 'none';
            wrapper.style.display = 'block';
            }
            fsa = !fsa;
      };

let fsb = true;
      b.onclick = () => {
            if (fsb) {b.innerText = '取消粒子';
               main.style.display = 'block';
            }else {b.innerText = '显示粒子';
            main.style.display = 'none';
            }
            fsb = !fsb;
      };

let fssp = true;
      sp.onclick = () => {
                fssp ? (sp.innerText = '开洞模式', vid.style.display = 'none',vid1.style.display = 'block') : (sp.innerText = '擦拭模式', vid.style.display = 'block',vid1.style.display = 'none');
                fssp = !fssp;
      };
   
let fss = true;
      fullscreen.onclick = () => {
                fss ? (fullscreen.innerText = '退出全屏', mydiv.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fss = !fss;
      };

const gc = `恋曲1990（律动男版） DJ阿涵
音画设计：亚伦影音工作室
乌溜溜的黑眼珠和你的笑脸
怎么也难忘记你容颜的转变
轻飘飘的旧时光就这么溜走
转头回去看看时已匆匆数年
苍茫茫的天涯路是你的飘泊
寻寻觅觅长相守是我的脚步
黑漆漆的孤枕边是你的温柔
醒来时的清晨里是我的哀愁
或许明日太阳西下倦鸟已归时
你将已经踏上旧时的归途
人生难得再次寻觅相知的伴侣
生命终究难舍蓝蓝的白云天
轰隆隆的雷雨声在我的窗前
怎么也难忘记你离去的转变
孤单单的身影后寂寥的心情
永远无怨的是我的双眼
苍茫茫的天涯路是你的飘泊
寻寻觅觅长相守是我的脚步
黑漆漆的孤枕边是你的温柔
醒来时的清晨里是我的哀愁
或许明日太阳西下倦鸟已归时
你将已经踏上旧时的归途
人生难得再次寻觅相知的伴侣
生命终究难舍蓝蓝的白云天
轰隆隆的雷雨声在我的窗前
怎么也难忘记你离去的转变
孤单单的身影后寂寥的心情
永远无怨的是我的双眼
永远无怨的是我的双眼`;

        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, gap);
               
        }

        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 ? 650 : -650);
                        const y = Math.random() * (Math.random() > 0.5 ? -650 : 650);
                        span.style.cssText += `
                                color: #${Math.random().toString(10).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>
   

玫瑰 发表于 2026-9-4 21:15

动感十足，精彩分享，有创意。{:4_191:}

玫瑰 发表于 2026-9-4 21:17

好音乐，动听，

玫瑰 发表于 2026-9-4 21:47

音乐很有激情，活力四射，把美好旋律带给我们分享{:4_191:}

玫瑰 发表于 2026-9-4 21:48

特效效果有创意，可以说创意无限。

杨帆 发表于 2026-9-4 22:07

好听好看，活泼顺畅，谢谢亚伦老师精彩示范{:4_180:}

红影 发表于 2026-9-4 23:12

帖子里的美人儿好美啊，歌词典横排竖排以及粒子效果都是可选择的。
这个制作真好，欣赏亚伦老师好帖{:4_199:}

亚伦影音工作室 发表于 2026-9-9 11:54

https://www.panurl.cn/view.php/070bbfe2bbb6c7167e12cd5aea697c4c.mp4

查看完整版本: 恋曲1990（律动男版） DJ阿涵