论坛 › 欢乐水吧 › 嘉欣《新鸳鸯蝴蝶梦》51miz42N1293647429/51miz42N1293647379

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

嘉欣《新鸳鸯蝴蝶梦》51miz42N1293647429/51miz42N1293647379

本帖最后由 亚伦影音工作室 于 2026-9-10 08:18 编辑 <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;
   filter: invert(0%);
   z-index: 6;
    opacity: .8;
}
#vid1 {
    position: absolute;
    width: 100%;
    height: 100%;
top: 0;
left: 0;
    object-fit: cover;
    display: none;
    mix-blend-mode:lighten;   
   filter: invert(0%);
   z-index: 6;
    opacity: .8;
}
.slide {z-index: 4;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
}

.slidevideo{
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 1s ease-out forwards var(--state);
}

@keyframes blurToClear {
from {
    filter: blur(0px);
    opacity: 0;
}
to {
    filter: blur(0);
    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(0%); 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://video-qn.51miz.com/vcg/video/preview/51miz42N1355565749.mp4" autoplay loop muted></video>
<video id="vid1" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1334870036.mp4" autoplay loop muted></video>

<div class="slide">
    <videosrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/cad6d2dc1d8908565d74da6cf33dc20c_preview.mp4" loop muted autoplay=""></video>
</div>
<div class="slide">
   <videosrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/8e9a80ee0deb77474cb1a4ec0a7042cd_preview.mp4" loop muted autoplay=""></video>
</div>
<div class="slide">
   <videosrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/e180e4eed2342295bdc0737ce0b7b958_preview.mp4" loop muted autoplay=""></video>
</div>
<div class="slide">
    <videosrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/dc2fced91782978213693b3b67343888_preview.mp4" loop muted autoplay=""></video>
</div>
    <div class="slide">
      <videosrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4e88ef4d8a07729e36c618ec7c89c737_preview.mp4" loop muted autoplay=""></video>
      </div>
      <div class="slide">
         <videosrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/4d4c4912bb79e8adb0c3f9b77cff0ff2_preview.mp4" loop muted autoplay=""></video>
      </div>
<audio id="aud" src="https://www.panurl.cn/view.php/a419b9d1a4112ea840aff217b909a6c0.m4a"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 + '%, #fff 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());




const videos = document.querySelectorAll('video');
      var mState = () => {
         videos.forEach(vid => aud.paused ? vid.pause(): vid.play() );
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, 7000);
}

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';vid.style.display = 'none';vid1.style.display = 'none';
            }else {b.innerText = '显示粒子';
            main.style.display = 'none';vid.style.display = 'none';vid1.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 = `嘉欣《新鸳鸯蝴蝶梦》
音画设计：亚伦影音工作室
没有三分爱意在
怎惹七分伤与害
爱恋一对字 拆不开
旧爱一声再见后
转眼新欢走过来
爱新不爱旧 还是爱
历遍风花与雪月
可有结果可有缘
想天想地 太辛酸
乱世心慌意更乱
找个青天许个愿
怨天且怨地 难尽怨
鸳鸯似永远不死
哪管哪段年代
红男绿女都相信相爱
可化蝶远飞
旧戏新做 化作传奇
最易惹乐与悲
最难判是与非
又甜又苦全是戏
没有三分爱意在
怎惹七分伤与害
爱恋一对字 拆不开
旧爱一声再见后
转眼新欢走过来
爱新不爱旧 还是爱
鸳鸯似永远不死
哪管哪段年代
红男绿女都相信相爱
可化蝶远飞
旧戏新做 化作传奇
最易惹乐与悲
最难判是与非
又甜又苦全是戏

`;

        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-6 13:34

这首歌竟然是粤语的。这制作真好，这么多可选择的效果。
欣赏亚伦老师好帖{:4_199:}

杨帆 发表于 2026-9-6 15:15

切换顺畅，效果漂亮，谢谢亚伦老师精彩示范{:4_190:}

梦油 发表于 2026-9-6 16:57

粤语的《新鸳鸯蝴蝶梦》很好听。
问好亚伦朋友。

小辣椒 发表于 2026-9-6 22:42

欣赏亚纶精彩制作{:4_187:}

查看完整版本: 嘉欣《新鸳鸯蝴蝶梦》51miz42N1293647429/51miz42N1293647379