论坛 › 欢乐水吧 › 你与春风皆过客(DJheap九天版)

醉美水芙蓉 发表于 2022-7-24 09:58

你与春风皆过客(DJheap九天版)

本帖最后由 醉美水芙蓉 于 2022-7-24 09:57 编辑 <br /><br /><div style="z-index: 27;width: 1024px; height: 600px; margin-top:30px; margin-left:-215px;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/13/22031313224507420082.gif) 0 0/100% 100%,url(https://s1.ax1x.com/2022/07/24/jXxBo8.jpg)0 0px/100% 100%; text-align: center;">
<div class="container">
   <audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=229228399 &.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="items1"style="transform: scale(1);position: absolute;top:-520px; left:570px;z-index: 70;">
<div class="img_border" id="aplay" style="width: 200px; height: 200px; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313224507420082.gif)0 0/100%100%,url(https://img-baofun.zhhainiao.com/fs/b3e8af43c1b2a2652758641b1c729c17.jpg)-30px 0px/170% 100%;position: absolute;top:130px; left:15px;z-index: 20;border-radius:50%;border:25px solid #800000; box-shadow: 0px 0px 2px 0.2px #eeeeee, 0px 0px 0px 45px #800000, 0px 0px 5px 46px #eeeeee"></div><P id="picBtn" class=""style="width: 400px; height: 400px;position: absolute;top:0px; left:0px;background: url('https://s1.ax1x.com/2022/07/18/jo4wIH.png') 0 0/100% 100%;z-index: 20;"></p></div>

   <div class="items" >
<divclass="lrc">
      <ul id="ullrc">
         </ul>
      </div>
</div>
</div>


<style type="text/css">
.container{width: 1px;height: 1px;
    margin: 0;position: absolute;top:500px; left:-30px;z-index: 550;
}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.container .btn{
    display: block;
    margin: 0;
}
.container .lrc{
    width: 960px;
    height: 180px;z-index: 550;
    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:-30px; left:80px;
    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: 80px;
    line-height: 90px;
font-family:悟空大字库;
    font-size: 0px;
    color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    font-weight: normal;
    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;
    font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:400px;height:400px;margin:0px ;position: absolute;text-align: center;}
.container .img_border #aplay{ }
.container .z360z{ width:400px;height:400px;animation: rot 10s linear infinite;}@keyframes rot{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>

<style type="text/css">.items1{ animation: slider1 1s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(80%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);}}
</style>
<script >var lrc = ` 孙艺琪-你与春风皆过客(DJheap 九天版)
作词：张宥伦
作曲：欧阳尚尚
来来回回都难得
终究你与春风皆是过客
我的世界已成了荒漠
想说的千言万语没来得及说
还未等我眼泪流淌成河
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 = 80, lrc_ul_height = 90;
    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 language="javascript">

var mu = document.getElementById('MusicPlayer');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://s1.ax1x.com/2022/07/18/jo4wIH.png')0 0/100% 100%") : (mu.pause(), btn.style.background="url('https://s1.ax1x.com/2022/07/18/jo4rRI.png')0 0/100% 100%");
}

mu.addEventListener("ended", function(){
      btn.style.background="url(' ')0 0/100% 100%";
})


</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>

绿叶清舟 发表于 2022-7-24 10:01

坐个沙发

绿叶清舟 发表于 2022-7-24 10:02

芙蓉这个播放器漂亮啊

醉美水芙蓉 发表于 2022-7-24 10:03

绿叶清舟 发表于 2022-7-24 10:01
坐个沙发

清舟美女早上好！

红影 发表于 2022-7-24 10:45

这个唱片播放器好漂亮，欣赏水芙蓉好制作{:4_187:}

小辣椒 发表于 2022-7-24 11:27

谢谢水芙蓉精彩分享{:4_187:}

醉美水芙蓉 发表于 2022-7-24 11:51

红影 发表于 2022-7-24 10:45
这个唱片播放器好漂亮，欣赏水芙蓉好制作

问候红影美女！

醉美水芙蓉 发表于 2022-7-24 11:51

小辣椒 发表于 2022-7-24 11:27
谢谢水芙蓉精彩分享

问候辣椒美女！

红影 发表于 2022-7-24 14:19

醉美水芙蓉 发表于 2022-7-24 11:51
问候红影美女！

抱抱水芙蓉，问好{:4_179:}

查看完整版本: 你与春风皆过客(DJheap九天版)