<style>
.container {
  margin: 0px auto;
  width: 1024px;
  height: 600px;
  overflow: hidden;
  position: relative;
}
.photo {width: 100%;
  height: 100%;
  position: absolute;
 box-shadow: 0px 0px 0px 1px #ffffff, 0px 0px 0px 5px #880000;
  top:0px; left:0px;filter:contrast(140%)brightness(100%);
  opacity: 0;
animation-name: round ;animation-duration: 48s; 
               animation-iteration-count: infinite; 
                animation-timing-function: linear;
}
@keyframes round {0% {opacity:1;transform:perspective(1600px) translate(-28%,28%)scale(0.4)rotateX(0deg)rotateY(0deg);filter:hue-rotate(0deg)contrast(140%)brightness(100%);}
10% { opacity: 1;transform:perspective(1600px) translate(-10%,-10%)scale(0.4)rotateX(0deg)rotateY(45deg);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
20% { opacity: 1;transform:perspective(1600px) translate(20%,-10%)scale(0.4)rotateX(0deg)rotateY(-45deg);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
22% { opacity: 1;transform:perspective(1600px) translate(20%,-10%)scale(0.4)rotateX(0deg)rotateY(-45deg);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
28% { opacity: 0;transform:perspective(1600px) translate(28%,-38%)scale(0.4)rotateX(0deg)rotateY(-45deg);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
}

img:nth-child(1) {background:url(http://pan.yinhuabbs.cn/view.php/48e46fbd483569c908abdd7d4ae4c0a3.jpg)0 0/100% 100%;
  animation-delay: 42s;
}
img:nth-child(2) {background:url(http://pan.yinhuabbs.cn/view.php/5a0f03a8d1a29bec2426d9381f184726.jpg)0 0/100% 100%;
  animation-delay: 36s;
}
img:nth-child(3) {background:url(http://pan.yinhuabbs.cn/view.php/43c125907a3116ef81f38c3f4b098e5c.jpg)0 0/100% 100%;
  animation-delay: 30s;
}
img:nth-child(4) {background:url(http://pan.yinhuabbs.cn/view.php/426fedb539bcded258104947411d7ee5.jpg)0 0/100% 100%;
  animation-delay: 24s;
}
img:nth-child(5) {background:url(http://pan.yinhuabbs.cn/view.php/d83d3940ea4f7a400910c32a26773e41.jpg)0 0/100% 100%;
  animation-delay: 18s;
}
img:nth-child(6) {background:url(http://pan.yinhuabbs.cn/view.php/4bc5459e2bf558716a905afeb5855b1a.jpg)0 0/100% 100%;
  animation-delay: 12s;
}
img:nth-child(7) {background:url(http://pan.yinhuabbs.cn/view.php/02010f3bbd4676e4680aea2d516c4543.jpg)0 0/100% 100%;
  animation-delay: 6s;
}
img:nth-child(8) {background:url(http://pan.yinhuabbs.cn/view.php/c93c8e6c865f9c3ce0b82931c349de7b.jpg)0 0/100% 100%;
  animation-delay: 0s;
}

.stop img:nth-child(1) {
  animation-play-state: paused;
}
.stop img:nth-child(2)  {
 animation-play-state: paused;
}
.stop  img:nth-child(3)  {
 animation-play-state: paused;
}
.stop img:nth-child(4)  {
  animation-delay: 24s;animation-play-state: paused;
}
.stop img:nth-child(5)  {
 animation-play-state: paused;
}
.stop img:nth-child(6)  {
  animation-play-state: paused;
}
.stop img:nth-child(7) {
  animation-play-state: paused;
}
.stop img:nth-child(8) {
  animation-play-state: paused;
}
</style>
<div style="z-index: 127;width: 1024px; height: 600px; margin-top:12px; margin-left:12px;  box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 6px 12px #880000; overflow: hidden;transform:  rotate(0deg);background:url(http://pan.yinhuabbs.cn/view.php/8d6e1a3f7ff361346077802df7c9ab83.jpg)0 0/100%  100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000);text-align: center;">

<div class="texiao"id="testImg"> <div class="HT">
<div class="container"id="testImg"><img  class='photo '><img class='photo ' ><img class='photo '><img  class='photo '><img class='photo ' ><img class='photo '><img  class='photo '><img  class='photo '></div>
  <audio autoplay=""  id="MusicPlayer"  src="http://link.hhtjim.com/kw/95383900.mp3" loop="" ></audio>
<div class="img_border" id="aplay"style="width: 1024px; height: 1024px;background:url(http://pan.yinhuabbs.cn/view.php/ee1f2925815538fb07ef4afd9fda49d8.png)0 0/20% 20%;margin: -220px auto;transform:  rotate(360deg)scale(1.2);position: absolute;top:0px; left:0px;"></div>
  
<div class="lrc">
<ul id="ullrc">
         </ul>
      </div>
</div>
</div></div>

<div class="items" style="top:40px; left:60px; position:absolute; color:#fff000;width:500px;height:50px; font-family:华文隶书; font-size:35px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px 0);"> 《陌上花》</div>
<div class="items" style="top:80px; left:80px; position:absolute; color:#fff000;width:500px;height:50px; font-family:华文隶书; font-size:25px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px 0);"> 演唱：胡密丹  制作：焱鑫磊</div>

<style type="text/css">
.HT{
    width: 1000px;position: absolute;top:10px; left:40px;
}
#MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.btn{
    display: block;z-index: 300;
    margin: 0px 0px;position: absolute;top:540px; left:40px;
}
.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 -1px  0);
    display: block;position: absolute;top:500px; left:60px;z-index: 30;
    margin: 0 auto; 
}
 .lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.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;
     background: linear-gradient(180deg, #0937F3 0%,#F55454 66%,#FD2D2D 100%);
     -webkit-text-fill-color : transparent; /*将颜色设置为透明*/
-webkit-background-clip : text; /*背景裁剪，必不可少*/
    

}
/*动态歌词样式*/
.lrc #ullrc li.active{ 
    font-size: 40px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold;
}

/*mv动画*/
.img_border{margin: -220px auto;position: absolute;top:0px; left:0px;z-index:10;
    display: block;
    width: 1024px; height: 1024px;animation:rotating 10s linear infinite;}
.img_border #aplay{ }

@keyframes rotating  {0%{
        background-position: 0% 0%;filter:hue-rotate(0deg);transform:  rotate(0deg)scale(1.2);
    }
    100%{
        background-position: 0% 0;filter:hue-rotate(0deg);transform: rotate(360deg)scale(1.2);
    }
}

</style>

<style>
.texiao{margin: 0px auto;position: absolute;top:0px; left:0px;z-index:10;
    display: block;
    width: 1024px; height: 600px;animation:rotat 0.2s linear infinite;}
.stop {
  animation-play-state: paused;
}

@keyframes rotat  {0%{
        background-position: 0% 0%;filter:hue-rotate(360deg);transform:  rotate(0deg)scale(1);
    }
    100%{
        background-position: 0% 0;filter:hue-rotate(0deg);transform: rotate(0deg)scale(1);
    }
}

</style>

<script>var lrc =`[00:00.000]《陌上花》胡蜜丹
[00:12.273]词：孙守廷  曲：刘亦敏
[00:23.265]LRC歌词制作：焱鑫磊
[00:34.231]一缕春风 唤醒三月陌上花
[00:41.231]鹅黄柳丝 粉墙黛瓦
[00:44.708]妆点丹青一幅画
[00:48.285]一夜微雨 催开三月陌上花
[00:55.309]园田初犁新野吐绿
[00:58.796]满目青青是芦芽
[01:02.356]陌上花 陌上花
[01:05.820]三月陌上花
[01:09.428]陌上有个桃花源
[01:12.956]花蹊深处是我家
[01:16.420]陌上花 陌上花
[01:19.956]三月陌上花
[01:23.548]阳光都来看花了
[01:27.037]你来看我吗
[02:02.576]一纸云笺 相约三月陌上花
[02:09.430]笑语盈盈 携手花前
[02:12.990]喃喃细语是情话
[02:16.494]一对彩蝶 舞动三月陌上花
[02:23.566]情浓如酒 醉了你我
[02:27.103]流连忘返夕阳下
[02:30.711]陌上花 陌上花
[02:34.112]三月陌上花
[02:37.703]陌上有个桃花源
[02:41.272]花蹊深处是我家
[02:44.727]陌上花 陌上花
[02:48.255]三月陌上花
[02:51.821]阳光来看花了
[02:55.245]你也来看我啦
[02:58.853]阳光来看花了
[03:02.334]你也来看我啦
[03:30.334]`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
        parts[index] = getLrcObj(parts[index]);
    }
    return parts;

    function getLrcObj(content) {
        var twoParts = content.split("]");
        var time = twoParts[0].substr(1);
        var timeParts = time.split(":");
        var seconds = +timeParts[1];
        var min = +timeParts[0];
        seconds = min * 60 + seconds;
        var words = twoParts[1];
        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[index].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[index].classList.add("active");
}

var turn = 0;

function getLrcIndex(){
    var time = $("MusicPlayer").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
        if (lrcArray[index].seconds > time) {
            return index - 1;
        }
    }
}

$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
         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="";
                }
            }
        }

var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="img_border";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc); 
</script>