论坛 › 欢乐水吧 › 酒酒酒

醉美水芙蓉 发表于 2022-5-25 21:19

酒酒酒

本帖最后由 醉美水芙蓉 于 2022-5-25 21:19 编辑 <br /><br /> <div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_10361776">
<div style="z-index: 127;width: 1200px; height: 620px; margin-top:30px; margin-left:-300px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/30%30%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); text-align: center;">
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/eb13f85ab83ad5070ededc97592b734b.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/3d7514c4015ef22db37115c9714f740d.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/5ff2512a52b4b07ff00e29b1f1417766.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/7421642a2d280c2d80bdaf88dc2fb041.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/78500109b1fd4c217c027f6cb437e232.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/2a846bff701481b9dc6027506ff13310.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/e8c4e7990e76e9ff026ee76ade4ab20c.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/c081a07e9c90c9faf8495709c3f6bccd.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=221524401&.mp3" controls loop style="width: 1%;

height: 1%;z-index: 1;"></audio>
      <div class="btn">
      <img src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png" id="playpause"style="position:absolute;top:-300px;left:780px;width:40px;height:40px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);z-index: 600;"/>
      <span id="bf"onclick="rbf();"></span>
      </div>
<div class="img_border"><imgid="aplay"style="width: 100%; height: 100%;z-index: 110;background:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com/fs/1e44714e0018e73d7831a10b7ffdaa54.jpg)-20px 0px/180% 100%;" ></div>
   <div class="items" >
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div></div>
</div>
<style type="text/css">
.photo {width: 1200px;
height: 620px;
position: absolute;top:0px; left:0px;
filter:contrast(130%)brightness(100%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(0%,0%)scale(1);}
5% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
16% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;
transform:translate(0%,0%)scale(1);}
}
img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >

<style type="text/css">
.container{width: 1px;height: 1px;
    margin: 0;position: absolute;top:500px; left:-20px;z-index: 100;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;z-index: 300;
    margin: 0;}
.container .lrc{
    width: 1000px;
    height: 130px;z-index: 1;
    overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
    display: block;position: absolute;top:-40px; left:60px;
    margin: 0 auto;}
.container .lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.container .lrc #ullrc li{
    height: 70px;
    line-height: 70px;
font-family:悟空大字库;
    font-size: 40px;
    color: #000078;
    font-weight: normal;transform: translate(20%,0%);
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
    text-align: center;
    display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;transform: translate(-20%,0%);
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:300px;height:300px;margin:0px ;position: absolute;top:-430px;left:650px;transform: scale(1,1);}
.container .img_border #aplay{display:block;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000;border-radius:50%; }
.container .z360z{-webkit-animation:rotating 10s linear infinite;}@-webkit-keyframes rotating{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100%{transform:rotateX(0deg) rotateY(0deg) rotateZ(360deg);}
}
.audio{
    z-index: 1;
    bottom: 0;
    opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
    opacity: 0;
}
</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<script >var lrc = `樊少华、袁林 - 酒酒酒 (DJ伟然版)
作词：樊少华
作曲：樊少华
LRC编辑：醉美水芙蓉
天上下雨地上流
人都往高处走
青春一去难回头
敬往事这杯酒
时间让我已看透
你是我的好朋友
人生短短多少秋
别负光阴别忧愁
酒酒酒啊喝个够
不醉不罢休
干干干了这碗酒
感情都在酒里头
走走走啊往前走
阳光大道一起走
手手手啊手拉手
齐心协力有奔头
时间让我已看透
你是我的好朋友
人生短短多少秋
别负光阴别忧愁
酒酒酒啊喝个够
不醉不罢休
干干干了这碗酒
感情都在酒里头
走走走啊往前走
阳光大道一起走
手手手啊手拉手
齐心协力有奔头
酒酒酒啊喝个够
不醉不罢休
干干干了这碗酒
感情都在酒里头
走走走啊往前走
阳光大道一起走
手手手啊手拉手
齐心协力有奔头
谢谢欣赏！`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
    var lrc_li_height = 70, lrc_ul_height = 50;
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
         var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/35b530b3868a28afe2b97da37543395f.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png";
}, false);

</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);

</script>
</td></tr></table>

加林森 发表于 2022-5-25 21:22

好漂亮的同步制作。水芙蓉好样的！{:4_199:}

马黑黑 发表于 2022-5-25 21:22

喝多了，眩晕

小满 发表于 2022-5-25 21:26

都好厉害的，听听~

醉美水芙蓉 发表于 2022-5-25 21:59

加林森 发表于 2022-5-25 21:22
好漂亮的同步制作。水芙蓉好样的！

队长晚上好！

醉美水芙蓉 发表于 2022-5-25 21:59

马黑黑 发表于 2022-5-25 21:22
喝多了，眩晕

黑黑老师晚上好！

醉美水芙蓉 发表于 2022-5-25 22:00

小满 发表于 2022-5-25 21:26
都好厉害的，听听~

朋友晚上好！

加林森 发表于 2022-5-25 22:02

醉美水芙蓉 发表于 2022-5-25 21:59
队长晚上好！

水芙蓉晚上好！{:4_171:}

红影 发表于 2022-5-25 22:06

真漂亮的制作，那个转动光碟和外边框还是同一个色系的，好听又好看{:4_187:}

醉美水芙蓉 发表于 2022-5-25 22:10

红影 发表于 2022-5-25 22:06
真漂亮的制作，那个转动光碟和外边框还是同一个色系的，好听又好看

红影美女观察得好仔细！

马黑黑 发表于 2022-5-25 22:15

醉美水芙蓉 发表于 2022-5-25 21:59
黑黑老师晚上好！

{:4_180:}

红影 发表于 2022-5-26 19:04

醉美水芙蓉 发表于 2022-5-25 22:10
红影美女观察得好仔细！

很协调，漂亮{:4_187:}

马黑黑 发表于 2022-5-26 22:34

看看酒喝完没有

查看完整版本: 酒酒酒