<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/5495720782b9a7545f0c8edfabb45d49.jpg)0 0/100% 100%;
  animation-delay: 42s;
}
img:nth-child(2) {background:url(http://pan.yinhuabbs.cn/view.php/5087c6faf53eec5cbc87ab418714c66f.jpg)0 0/100% 100%;
  animation-delay: 36s;
}
img:nth-child(3) {background:url(http://pan.yinhuabbs.cn/view.php/effe7db473c15a7484829dc2f0310616.jpg)0 0/100% 100%;
  animation-delay: 30s;
}
img:nth-child(4) {background:url(http://pan.yinhuabbs.cn/view.php/afc6b08d735a2ee38553cae2279d57dd.jpg)0 0/100% 100%;
  animation-delay: 24s;
}
img:nth-child(5) {background:url(http://pan.yinhuabbs.cn/view.php/0768cf5f5cc64bf7818a42ddd4e92d84.jpg)0 0/100% 100%;
  animation-delay: 18s;
}
img:nth-child(6) {background:url(http://pan.yinhuabbs.cn/view.php/96d3590f0f580a9790cbbc1719659956.jpg)0 0/100% 100%;
  animation-delay: 12s;
}
img:nth-child(7) {background:url(http://pan.yinhuabbs.cn/view.php/b0a9bc93a2585a689fef28f982ac070c.jpg)0 0/100% 100%;
  animation-delay: 6s;
}
img:nth-child(8) {background:url(http://pan.yinhuabbs.cn/view.php/682f2fefb8a70b14d633be013cec851f.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/e8f736cffe3180d77425fa27c3830318.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/155822838.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:07.227]《功夫战警》电视剧片尾曲
[00:13.554]词：郑亦钧 晓川  曲：郑亦钧
[00:20.963]英雄出自我辈
[00:22.744]热血勇敢无畏
[00:25.271]责任绝不任谁
[00:27.583]胡作非为
[00:30.119]动作行云流水
[00:32.063]脚步永不后退
[00:34.249]使命忘却安危
[00:36.313]视死如归
[00:39.282]不盼青史能够名垂
[00:43.417]只愿心中能够无怨无悔
[00:48.164]不盼青史能够名垂
[00:52.540]所有珍贵都由
[00:54.670]我来保卫
[00:57.215]功夫 是正义的守护
[01:01.054]千变万化招数
[01:04.365]为天地为正途
[01:06.429]降龙伏虎 双目
[01:09.565]将罪恶看清楚
[01:13.133]破碎所有企图
[01:17.062]任四面埋伏
[01:19.117]刺透迷雾 领悟
[01:22.580]英雄不在江湖
[01:24.972]平凡之中沉浮
[01:27.869]用一身铁骨
[01:31.484]让黑暗消除
[01:52.962]Rap：
[01:54.260]我没与生俱来的骨骼惊奇
[01:56.684]却有激荡胸中的浩然正气
[01:59.236]赤诚之心不需要独门绝技
[02:01.388]暗潮之中不放过蛛丝马迹
[02:03.586]春去秋来时光在斗转星移
[02:06.035]不曾改变我一直坚守不离
[02:08.314]为了光明我选择披荆斩棘
[02:10.499]拥有信仰我能够无可匹敌
[02:13.114]英雄出自我辈
[02:14.786]热血勇敢无畏
[02:17.034]责任绝不任谁
[02:19.323]胡作非为
[02:21.970]动作行云流水
[02:23.893]脚步绝不后退
[02:26.194]使命忘却安危
[02:27.793]视死如归
[02:31.418]不盼青史能够名垂
[02:35.510]只愿心中能够无怨无悔
[02:40.286]不盼青史能够名垂
[02:44.542]所有珍贵都由
[02:46.742]我来保卫
[02:49.350]功夫 是正义的守护
[02:52.879]千变万化招数
[02:56.178]为天地为正途
[02:58.466]降龙伏虎 双目
[03:01.514]将罪恶看清楚
[03:05.026]破碎所有企图
[03:08.850]任四面埋伏
[03:11.166]刺透迷雾 领悟
[03:14.606]英雄不在江湖
[03:16.829]平凡之中沉浮
[03:19.925]用一身铁骨
[03:23.517]让黑暗消除
[03:40.517]`;
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>