论坛 › 欢乐水吧 › 红尘深处再相逢

醉美水芙蓉 发表于 2022-7-18 20:38

红尘深处再相逢

本帖最后由 醉美水芙蓉 于 2022-7-18 20:38 编辑 <br /><br /> <div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background-size: 100% 100%;background-image: url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031215495620443168.png); text-align: center;">
<div class="container">
      <audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=40570360&.mp3" loop=""></audio>
      <div class="btn">
      <button id="bf" onclick="bf();">暂停</button>
      <button id="bf" onclick="rbf();">重新播放</button>
      </div>
<div class="img_border" id="aplay" style="width: 1000px; height: 600px;position: absolute;top:-500px; left:0px;"><img class="img_border" src="https://s1.ax1x.com/2022/07/15/j4Y2Oe.jpg" style="width: 510px; height: 320px; box-shadow: 0px 0px 0px 2px #000000, 0px 0px 0px 10px #cccccc; position: absolute;top:130px; left:440px;transform: perspective(480px) rotateY(-10deg)rotateX(-4deg)scale(1);z-index: 100;">
   <div class="items" style="text-align:center;position:absolute;top:100px;left:280px;z-index: 200;transform:perspective(500px) rotateY(-6deg)rotateX(2deg)scale(0.6)">
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div></div>
</div>

</div>
<style type="text/css">

.container{
    width: 400px;position: absolute;top:500px; left:0px;
}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.container .btn{
    display: block;z-index: 300;
    margin: 0px 0px;position: absolute;top:40px; left:80px;
}
.container .lrc{
    width: 870px;
    height: 140px;
    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:400px; left:250px;
    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: 60px;
font-family:华文隶书;
    font-size: 0px;
    color: #000078;transform: translate(0%,0%);
    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;transform: translate(0%,0%);
    font-weight: bold;
}
/*动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:-500px; left:0px;}
.container .img_border #aplay{border:12px solid #000000;border-radius:0%; }
.container .z360z{animation: rotating 40s linear infinite;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313512556895204.gif)0 0/50%50%,url(http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313224507420082.gif)0 0/50%50%,url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031215361105663728.gif)0 0/100%100%;}@keyframes rotating{from {filter:hue-rotate(0deg)contrast(120%)brightness(140%);}
to {filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}


.audio{
    z-index: 0;
    bottom: 0;
    opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
box-shadow:0px 0px 0px 2px #000000;
border-radius:25%;position: absolute;top:480px; left:220px;
}
.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 =`红尘深处再相逢 - 东方之勇
词：东方之勇
曲：东方之勇
发行：雨陌文化
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 = 70;
    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>
      function rbf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            audio.currentTime = 0;
            audio.play();
            bf.innerText="暂停";
      }

      function bf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            if (audio !== null) {
                if (audio.paused) {
                  audio.play(); //audio.play();// 这个就是播放
                  bf.innerText="暂停";
                } else {
                  audio.pause(); // 这个就是暂停
                  bf.innerText="播放";
                }
            }
      }
    </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></div>

绿叶清舟 发表于 2022-7-18 20:43

芙蓉这个制作太棒了

加林森 发表于 2022-7-18 21:13

这个帖怎么啦？我一进来就被卡起来了。{:4_203:}

醉美水芙蓉 发表于 2022-7-18 21:18

绿叶清舟 发表于 2022-7-18 20:43
芙蓉这个制作太棒了

谢谢清舟美女支持！

醉美水芙蓉 发表于 2022-7-18 21:19

加林森 发表于 2022-7-18 21:13
这个帖怎么啦？我一进来就被卡起来了。

队长的电脑容量太小了！

红影 发表于 2022-7-18 21:19

这个帖子好美啊，像是在看投影，水芙蓉好棒{:4_199:}

绿叶清舟 发表于 2022-7-18 21:21

醉美水芙蓉 发表于 2022-7-18 21:18
谢谢清舟美女支持！

不客气了

醉美水芙蓉 发表于 2022-7-18 21:22

红影 发表于 2022-7-18 21:19
这个帖子好美啊，像是在看投影，水芙蓉好棒

红影美女可以换成视频就是投影了！

加林森 发表于 2022-7-18 21:26

醉美水芙蓉 发表于 2022-7-18 21:19
队长的电脑容量太小了！

我清理了电脑再进来了，挺不错的。{:4_199:}

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

醉美水芙蓉 发表于 2022-7-18 21:22
红影美女可以换成视频就是投影了！

现在这个就已经很好了呢{:4_187:}

查看完整版本: 红尘深处再相逢