论坛 › 欢乐水吧 › 好想醉一回(对唱版)

亚伦影音工作室 发表于 2026-3-23 07:33

好想醉一回(对唱版)

本帖最后由 亚伦影音工作室 于 2026-3-24 23:27 编辑 <br /><br /><style type="text/css">
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");

#hWindow         {
                width:1186px;
                height:640px;
                bbbackground-image:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/072951cf0f560273bb3331af9a9b4ebd.jpg);
                bbbackground-size:cover;
                background-color:#800000;
                box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;
                position: relative;
                margin:10px-300px;
                overflow:hidden;
                border-radius:0px;font-family: "Ma Shan Zheng","华文行楷","SimHei", "Arial", "sans-serif";
        }
        #curp        {
                width: 100%;
                height:100%;
                background-image:url(https://pic1.imgdb.cn/item/6824a1fc58cb8da5c8f1b5a2.jpg);box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #880000;
                background-size: cover;
                transform-origin: center;
                position:absolute; top:0px; left:0px;
                  animation: hue-rotate 0.5s linear infinite ;
        }
       
        .stop #curp{animation-play-state: paused;}
@keyframes hue-rotate {
to {
   filter: hue-rotate(360deg);
}
}
#LRCShow{position:absolute;left:22%;bottom:30px;width:100%;height:100px;font-size:2.8em;    font-weight: 200;}
.lyricDisp{ transition:.3s all ease;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);line-height: 50px;}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:300ms;--aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: transparent;background: linear-gradient(90deg, #Ff0000,#800000 ,#00aa00 ,#000080 ,#ff0000 ,#00aa00 ,#000080 ,#ff0000,#00aa00 ,#000080 ,#ff0000);-webkit-background-clip: text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color:blue;text-align:center;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}

#rdisk{position:absolute;left:28px;bottom:10px;border-radius: 50%;
width:80px;height:80px;border: 2px solid #000000;
        background: url('https://365.tf/disk/tf/1667321249.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);mask: radial-gradient(transparent 6px,#red 0);-webkit-mask: radial-gradient(transparent 6px,red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);
color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;}@keyframes circleSmall2{0%{transform:rotateX(40deg) rotateY(20deg) rotateZ(0deg);}100%{transform:rotateX(40deg) rotateY(20deg) rotate(360deg);}}


        #fullscreen{border-radius: 4px;position: absolute;
color:#000;background:#0000;box-shadow:0px 0px 0px 0px #fff;
padding: 4px 8px;z-index: 120;
font-size: 25px;font-weight: 100;
border: none;
cursor: pointer;top: 5px;left: 8%;
}

</style>

<div id="hWindow">
        <div id="fullscreen" title="屏展模式">全屏欣赏</div>
<div id="tetimg" ><div id="curp"></div></div>
    <div id="rdisk" ></div>

    <div id="LRCShow" >
            <div class="lyricDisp">亚伦影音工作室</div><div class="lyricDisp"></div>
         
    </div>
</div>


<textarea id="lrc_content" style="visibility: hidden;">
好想醉一回(对唱版)
词：马健涛
曲：马健涛
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
为何这人间疲惫
都让我一个人背
为何这世间酸楚
都让我一人承受
白天人前装笑颜
夜晚泪水却流干
今夜拿酒杯作伴
对酒讲我的心酸
我的心好酸
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
白天人前装笑颜
夜晚泪水却流干
今夜拿酒杯作伴
对酒讲我的心酸
我的心好酸
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
好想醉一回
忘掉那伤悲
稀里哗啦的眼泪
落在这酒杯
好想醉一回
将痛苦麻醉
找个没人的地方
痛快哭一回
找个没人的地方
痛快哭一回

</textarea>

<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lrcVec=new Array();this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=this.showLrcObj.getElementsByTagName('div'); this.imagee=document.getElementById('tetimg');
this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0;that.mObj.play()});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play();aniObj.play();that.imagee.classList.remove('stop')}else{that.mObj.pause();aniObj.pause();that.imagee.classList.add('stop')}};try{this.mObj.play()}catch(err){console.log(err.message)}}}





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

<script type="text/javascript">
var imgSet =[
"https://pic1.imgdb.cn/item/683a8cc358cb8da5c81e81b5.jpg",
"https://pic1.imgdb.cn/item/69b92dc51eedde6824929811.jpg",
"https://pic1.imgdb.cn/item/6818838658cb8da5c8dd8333.jpg",
"https://pic1.imgdb.cn/item/692e1ee511af9ce9c3e936d8.png",
"https://pic1.imgdb.cn/item/686cbd4658cb8da5c8963cfc.webp",
"https://pic1.imgdb.cn/item/6862641f58cb8da5c87f852b.jpg",
"https://pic1.imgdb.cn/item/6824a1fc58cb8da5c8f1b5a2.jpg"
];
var keyFrames =
        [
       
       {opacity:'1',transform:'translate(-100%,-100%)scale(0)',offset:0},
       
       {opacity:'1',transform:'translate(0%,0%)scale(0.7)rotate(-360deg)',offset:0.20},
       {opacity:'1',transform: 'perspective(2000px) rotateY(80deg)scale(0.7)',offset:0.35},
       {opacity:'1',transform: 'perspective(2000px) rotateY(-80deg)scale(0.7)',offset:0.55},
       {opacity:'1',transform:'translate(100%,100%) perspective(2000px)rotatex(180deg) rotateY(-70deg)scale(1)',offset:0.70}

       
];

var EffectTiming = {duration: 8000, fill: 'forwards'};

var imgIdx = 0, lastIdx = imgSet.length - 1;
var imgBlock, curp, aniObj;

        function initTrun()        {
                imgBlock = document.getElementById('hWindow');
                curp = document.getElementById('curp');
               
                aniObj = curp.animate(keyFrames, EffectTiming);
                aniObj.pause();
                aniObj.onfinish = chg_cur_pic;
                chg_cur_pic();        //my_audio.play();
        }

        function chg_cur_pic()        {       
                imgBlock.style.backgroundSize = "cover";
                imgBlock.style.backgroundImage = "url(" + imgSet + ")";
        curp.style.backgroundImage = "url(" + imgSet + ")";
               
                lastIdx = imgIdx;
                imgIdx++;
                imgIdx %= imgSet.length;
                aniObj.play();
               
        }
       
        initTrun();

        var opts = {
                        //        下面4个参数是必须的！
                        lrcTxtID:'lrc_content',
                        lrcShowID:"LRCShow",
                        audioURL:"https://www.aaz.cx/plug/down.php?ac=music&lk=mp3&id=vvwmwvcdb&.mp3",
                        audioCtrl:'rdisk'
        };
        new lrcPlayer2(opts);

</script>

梦油 发表于 2026-3-23 11:09

欣赏佳作，问候亚伦。

红影 发表于 2026-3-23 15:43

漂亮的图片轮播效果，所有待轮转的图图都用颜色变化弄超出了仿佛动态效果似的，真好看。
欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2026-3-23 20:37

亚纶怎么又回到你最早的那种制作了{:4_170:}

小辣椒 发表于 2026-3-23 20:38

记得最早这种图片转换再出去了的效果有制作过吧

亚伦影音工作室 发表于 2026-3-23 20:57

小辣椒 发表于 2026-3-23 20:38
记得最早这种图片转换再出去了的效果有制作过吧

这个代码和之前的有不同，用了sj插件。360浏览器手机欣赏不到效果。

小辣椒 发表于 2026-3-23 20:59

哦，那我换个浏览器看看

老谟深虑 发表于 2026-3-24 09:59

            好美的制作，好听的歌曲。点赞！

小辣椒 发表于 2026-3-24 22:04

亚纶也是好学的，昨天我手机看了，效果也是不错。手机浏览器我有好几个的

查看完整版本: 好想醉一回(对唱版)