论坛 › 欢乐水吧 › 崔伟立 - 吻心 (DJheap九天版)

醉美水芙蓉 发表于 2022-5-20 20:55

崔伟立 - 吻心 (DJheap九天版)

本帖最后由 醉美水芙蓉 于 2022-5-20 20:55 编辑 <br /><br /> <div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f"
<br /><br /><div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-230px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow:hidden;transform:rotate(0deg);background:url(https://www.tupianzj.com/uploads/allimg/200520/30-200520151108.jpg)0 0/100%100%,linear-gradient(0deg, #000080, #003300,#800000, #000060);text-align: center;">

<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://chuangshicdn.data.mvbox.cn/music/yc/22/05/19/22051922004236508688.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
      <div class="btn">
         <img src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png" id="playpause"style="position:absolute;top:-35px;left:35px;width:150px;height:150px;z-index:

600;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);"/>
      </div>
<div class="img_border" id="aplay"></div>
   <div class="bs" style="z-index: 500;position: absolute;top:0px; left:0px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div></div>
<div id="txtBox" class="bs"style="margin: auto;color: #fff000;font-family:华文隶书;font-size: 1.5em;position: absolute;left: 60px;top: 10px; width: 900px;text-align:

center;"></div>
</div>


<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;
    margin: 0;}
.container .lrc{
    width: 960px;
    height: 130px;
    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:10px; left:70px;
    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: 60px;
    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: 48px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;
    z-index: 13;position: absolute;
   top:-500px;opacity: 1;
    left: 20px;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/10%10%, url(http://pan.yinhuabbs.cn/view.php/05affd15399206808a38a06e375bdec9.png)0 0px/50% 50%;
animation: rotating 50s linear infinite;}
@keyframes rotating {
    0%{
      background-position: -600% 0;filter:hue-rotate(0deg)brightness(500%);
    }
    100%{
      background-position: 0 600%;filter:hue-rotate(360deg)brightness(900%);
    }
}
</style>
<style type="text/css">.bs{animation: slider0 0.26s linear infinite ;position: absolute;top:-20px; left:0px;z-index: 1000;}
@keyframes slider0 {0%,100%{margin: 0px 0px;)filter:drop-shadow(0px 0px 8px #CD6600) drop-shadow(0px 0px 8px #CD6600)drop-shadow(0px 0px 8px #CD6600)brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 8px #000090)drop-shadow(0px 0px 8px #000090)drop-shadow(0px 0px 8px #000090)brightness(100%);}}
</style>
<script language="javascript">
var txtBox = document.getElementById("txtBox");
var idx = 0;
var str = " 崔伟立 - 吻心 (DJheap九天版) ";

setInterval(function(){
      txtBox.innerHTML = str.substring(0, idx) + "➽➣";
      idx += 1;
      if(idx > str.length) idx = 0;
}, 300);
</script>


<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 = 60, lrc_ul_height = 60;
    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://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png";
}, false);

</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="txtBox";};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-20 22:15

漂亮的制作，温馨的画面。欣赏水芙蓉好帖{:4_187:}

马黑黑 发表于 2022-5-20 20:56

漂酿

加林森 发表于 2022-5-20 20:57

水芙蓉制作得真漂亮，加油！{:4_204:}{:4_190:}

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

马黑黑 发表于 2022-5-20 20:56
漂酿
黑黑老师晚上好！谢谢加分鼓励！

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

加林森 发表于 2022-5-20 20:57
水芙蓉制作得真漂亮，加油！

队长晚上好！谢谢加分鼓励！

小辣椒 发表于 2022-5-20 21:21

爱一个人不需要理由，今天520这个刚好，祝福大家520快乐！

醉美水芙蓉 发表于 2022-5-20 21:24

小辣椒 发表于 2022-5-20 21:21
爱一个人不需要理由，今天520这个刚好，祝福大家520快乐！

辣椒美女520快乐！

加林森 发表于 2022-5-20 21:24

醉美水芙蓉 发表于 2022-5-20 21:19
队长晚上好！谢谢加分鼓励！

水芙蓉晚上好。520快乐！

闲言不语 发表于 2022-5-20 21:39

画面真清晰！{:4_199:}

马黑黑 发表于 2022-5-20 21:44

醉美水芙蓉 发表于 2022-5-20 21:18
黑黑老师晚上好！谢谢加分鼓励！

{:4_190:}

醉美水芙蓉 发表于 2022-5-20 21:44

闲言不语 发表于 2022-5-20 21:39
画面真清晰！

谢谢版主闲言不语大驾光临加分鼓励！

闲言不语 发表于 2022-5-20 21:49

醉美水芙蓉 发表于 2022-5-20 21:44
谢谢版主闲言不语大驾光临加分鼓励！

驾，俺有驾吗，貌似偷偷光顾的。{:4_397:}

岩新新 发表于 2022-5-20 21:54

欣赏点赞！

醉美水芙蓉 发表于 2022-5-20 21:54

岩新新 发表于 2022-5-20 21:54
欣赏点赞！

岩新老师晚上好！

醉美水芙蓉 发表于 2022-5-21 11:28

红影 发表于 2022-5-20 22:15
漂亮的制作，温馨的画面。欣赏水芙蓉好帖

红影美女中午好！

大猫咪 发表于 2022-5-21 12:24

精美制作，温馨浪漫的画面。真棒！   欣赏水芙蓉好帖，周末快乐！

{:4_204:}{:4_199:}

醉美水芙蓉 发表于 2022-5-21 16:58

大猫咪 发表于 2022-5-21 12:24
精美制作，温馨浪漫的画面。真棒！   欣赏水芙蓉好帖，周末快乐！

欢迎大喵咪光临！周末愉快！

马黑黑 发表于 2022-5-21 20:32

{:4_174:}

查看完整版本: 崔伟立 - 吻心 (DJheap九天版)