论坛 › 动画音画 › 喝的不是酒是眼泪 (DJ对唱版) - 赵洋/大度【下雪特效鼠控】

亚伦影音工作室 发表于 2022-11-7 06:48

喝的不是酒是眼泪 (DJ对唱版) - 赵洋/大度【下雪特效鼠控】

本帖最后由 亚伦影音工作室 于 2022-11-9 20:52 编辑 <br /><br /><style type="text/css">
.lyricDisp{-webkit-text-stroke:1px #ffffff;font: bold 2em悟空大字库, sans-serif; transition:.3s all ease;}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--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(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#FEFFFF 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;filter: contrast(110%)brightness(160%);overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#FEFFFF 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;text-align:center;font-size:2em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:15%;bottom:15px;width:100%;height:100px;margin:16px auto position:relative;z-index: 11}#rdisk{position:absolute;left:20px;bottom:10px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;z-index: 11}@keyframes circleSmall2{0%{transform:rotateX(40deg) rotateY(20deg) rotateZ(0deg);}100%{transform:rotateX(40deg) rotateY(20deg) rotate(360deg);}}
        #hWindow         {
                width:1200px;
                height:620px;
               
                bbbackground-size:cover;
                background-color:#800000;font-size:18px;
                box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 6px #880000;
                position: relative;
                margin:140px-300px;
                overflow:hidden;
                border-radius:0px;z-index: 9;
        }
        #curp        {
                width: 100%;
                height:100%;
               
                background-size: cover;
                transform-origin: center;
                position:absolute; top:0px; left:0px;}

#mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 620px;
        animation: fly 100s linear infinite;
        cursor: pointer;
        opacity: 0;
}
#mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 620px;
        animation: tot 80s linear infinite;
        cursor: pointer;
        opacity: 0;
}

#hWindow:hover #mpic { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 620px;
        animation: fly 100s linear infinite;
        cursor: pointer;
        opacity: 1; transition: 0.3s;
}
#hWindow:hover #mpicc { position: absolute;
        top: 0px;
        left: 0px;
        width: 1200px;z-index: 10;
        height: 620px;
        animation: tot 80s linear infinite;
        cursor: pointer;
        opacity: 1; transition: 0.3s;
}

@keyframes fly {0%{
      background-position: 600% 0;
    }
    100%{
      background-position: 30% 1600%;filter:hue-rotate(360deg)
    }
}
@keyframes tot { 0%{
      background-position: 0% -1600%;
    }
    100%{
      background-position: 0% 0%;filter:hue-rotate(360deg)
    }
}

</style>
<div id="hWindow">
<div id="curp"></div>
<imgid="mpic"style="width: 100%; height: 100%;background: url('https://www.kumeiwp.com/sub/filestores/2022/11/09/9d71b312b9587c941a35e338e496ae53.png')0 0/50% 50%" >
<imgid="mpicc"style="width: 100%; height: 100%;background: url('https://www.kumeiwp.com/sub/filestores/2022/11/09/9d71b312b9587c941a35e338e496ae53.png')0 0/40% 40%" >
    <div id="rdisk" style="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 7px,#red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);"></div>
    <div id="LRCShow" style="position:absolute;left:15%;bottom:10px;" >
            <div class="lyricDisp">亚伦影音工作室</div><div class="lyricDisp"></div>
         </div>
</div>
<textarea id="lrc_content" style="visibility: hidden;">
                        喝的不是酒是眼泪 (DJ对唱版) - 赵洋/大度
词：张俊英
曲：赵洋
我喝的不是酒 是眼泪
孤独的时候没人安慰
你的承诺口是心非
悲伤日夜把我追随
男：
今夜我端起了酒杯
独自和寂寞干杯
一杯苦酒喝出眼泪
忧伤把自己灌醉
女：
今夜我举起了酒杯
独自一人饮酒醉
自你走后相思成堆
想你我只能望穿秋水
合唱：
我喝的不是酒 是眼泪
孤独的时候没人安慰
你的承诺口是心非
悲伤日夜把我追随
我喝的不是酒是眼泪
杯杯都是苦涩滋味
曾经爱情那么的美
结局却是如此狼狈
男：
今夜我举起了酒杯
独自一人饮酒醉
女：
自你走后相思成堆
想你我只能望穿秋水
合唱：
我喝的不是酒是眼泪
孤独的时候没人安慰
你的承诺口是心非
悲伤日夜把我追随
我喝的不是酒是眼泪
杯杯都是苦涩滋味
曾经爱情那么的美
结局却是如此狼狈
我喝的不是酒是眼泪
孤独的时候没人安慰
你的承诺口是心非
悲伤日夜把我追随
我喝的不是酒是眼泪
杯杯都是苦涩滋味
曾经爱情那么的美
结局却是如此狼狈
曾经爱情那么的美
结局却是如此狼狈
                                        </pre>
</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.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()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}}}
</script>

<script type="text/javascript">
var imgSet =[
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview_jpg/ec6883f8df57252d9f2727e38651292b.jpg",
"https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4cb41dacbb046d10732f324ae909bfc7.jpg",
"https://img-baofun.zhhainiao.com/fs/f7e75d008c745d7996042426e7af3e6c.jpg",
"https://img-baofun.zhhainiao.com/fs/ec6f1143509105c52b475fb2cb9bcc73.jpg",
"https://img-baofun.zhhainiao.com/fs/0b52f0a14a42b5a27908b8fd529751aa.jpg",
"https://img-baofun.zhhainiao.com/fs/68d07469d6053187a0c52d94c047b4ed.jpg",
"https://img-baofun.zhhainiao.com/fs/7e794b6a488fb41070c5f7b88df14cfc.jpg",
"https://img-baofun.zhhainiao.com/fs/6ded602cf20b1527aa3e800d57bf96ff.jpg"
];
var keyFrames =
        [{transform:'perspective(1000px) rotateY(-180deg)scale(.6)',filter:'hue-rotate(360deg)', opacity:'1'},
       {transform:'perspective(1000px)rotateY(0deg)scale(.6)', opacity:'1', offset:0.3},
{transform:'perspective(800px)rotateX(90deg)scale(.6)', opacity:'1', offset:0.5},
{transform:'perspective(800px)rotateX(0deg)scale(.6)', opacity:'1', offset:0.8},
{transform:'perspective(800px)rotateX(90deg)scale(.6)', opacity:'0', offset:1},
];

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.qqmc.com/up/kwlink.php?id=196523631&.mp3",
                        audioCtrl:'rdisk'
        };
        new lrcPlayer2(opts);
</script>

起个网名好难 发表于 2022-11-7 08:09

年轻人的歌

马黑黑 发表于 2022-11-7 12:28

泪水也可以喝喝{:4_170:}

小辣椒 发表于 2022-11-7 13:50

感觉界面高度还可以增加，下面歌词太贴边了，那网名难下面的歌词小一点，感觉整体感觉不错。

相约爱晚亭 发表于 2022-11-7 16:16

欣赏音画佳作！

红影 发表于 2022-11-7 21:14

鼠标上去就有漂亮的雪花，这个帖子真棒。欣赏亚伦老师好帖{:4_187:}

查看完整版本: 喝的不是酒是眼泪 (DJ对唱版) - 赵洋/大度【下雪特效鼠控】