E:\西瓜视频备份

<!--《岁月刻刀》 - 洋澜一-->

<style>
#papa { margin: 10px 30px ; width: 1200px; height: 710px; background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gi)0 0/10%  10%,linear-gradient(80deg, #000080, #000090, #000000, #111111); box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;transform:rotateX(0deg) scale(1)}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:3%; left:85%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 0em  华文隶书; opacity: 1; cursor: pointer; z-index: 11}/*全屏按钮位置大小*/







.photo {width: 100%;
  height: 100%;
  position: absolute;z-index: -2;

  top:0px; left:0px;filter:contrast(120%)brightness(100%);
  opacity: 0;
animation-name: round ;animation-duration: 48s; 
               animation-iteration-count: infinite; 
                animation-timing-function: linear;
}

@keyframes round  {0% {opacity: 0;}
10% {opacity: 1;}
18% {opacity: 0;}
}
img:nth-child(1) {
  animation-delay: 42s;
}
img:nth-child(2) {
  animation-delay: 36s;
}
img:nth-child(3) {
  animation-delay: 30s;
}
img:nth-child(4) {
  animation-delay: 24s;
}
img:nth-child(5) {
  animation-delay: 18s;
}
img:nth-child(6) {
  animation-delay: 12s;
}
img:nth-child(7) {
  animation-delay: 6s;
}
img:nth-child(8) {
  animation-delay: 0s;
}


</style>
<style type="text/css">
#ganguang {width: 100%;
  height: 100%;
  position: absolute;top:0px; left:0px;z-index: 1;
background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/25%  25%,radial-gradient(circle 672px at 50% 50%, rgba(146, 254, 157, 0) 20%,rgba(255, 14, 0, 0.82) 100%);
animation: bh 6s infinite linear;
  }

@keyframes bh {
0%{
opacity: 1;clip-path:inset(50% 50% 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);} 
80% {
opacity: 1;clip-path: inset(0 0 0 0);
-webkit-transform:translate(0%,0%)scale(1);filter:hue-rotate(360deg)}
100% {
opacity: 1;clip-path: inset(0 0 0 0);
-webkit-transform:translate(0%,0%)scale(2);}

}

</style >








<div id="papa">
<audio id="MusicPlayer" src="https://s2.cldisk.com/sv-w9/audio/f8/e4/ba/5563e22a10429edf7b80c1a184bd4637/audio.mp3" autoplay loop></audio>
<span id="fullscreen">全屏观赏</span>
<div id="testImg" >
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6lUMT.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6ldLF.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6ltzV.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6lasU.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6lYR0.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6l0Z4.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6lBdJ.jpg" />
<img alt="" class="photo" src="https://s4.ax1x.com/2022/02/14/H6lDo9.jpg" />
</div>
<div id='ganguang' > </div>

 <div class="bfbj">
<div  id="btn"> 
<div id="img_border"></div></div> 
   <div class="lrc"  >
        <div class="p"> <li  id="ullrc" > 
          </li>
      </div>
    </div>
</div>
</div>
<style>


.bfbj{
    width: 100%;   height: 100%;margin: 0px 0px;position: absolute;
}
 #MusicPlayer{
    width: 600px;
    display: block;
    margin: 0 auto;
}
 #btn{
    display: block;
    margin: 0 ;
}
.lrc{
    width: 980px;
    height: 140px;position: absolute;top:90%; left:10%;/*歌词位置*/
	z-index: 3;
    overflow: hidden;
    display: block;
    margin: 0px 0px;
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;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);
    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;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrc li.active{ 
    font-size: 45px;color: #ff0000;
text-align:center;
  transform: translate(0%,0%);
    font-weight: normal;-webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
    background-image:linear-gradient(50deg, #ffff00, #ff0000, #fff000, #00ff00);
     background-position: 0px 0;
     
     -webkit-animation:loop 3s linear 2;
}
@-webkit-keyframes loop{
     0%{background-position: -800px 0;filter:hue-rotate(360deg)contrast(180%)brightness(500%);}
     
}
#img_border{display:inline-block;width:150px;height:150px;position: absolute;top:75%; left:5%;z-index: 30; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://p.cldisk.com/star3/origin/4a5a7b95a3235b43313442fb3723d789.png)0px 0px/100% 100%;border-radius:0%;}
@keyframes rotating {
	0% { transform: rotate(-30deg); }
	25% { transform: rotate(0deg); }
	50% { transform: rotate(30deg); }
	75% { transform: rotate(0deg); }
	100% { transform: rotate(-30deg); }
}
</style>


<style type="text/css">.items { 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 = `[00:00.00]《岁月刻刀》 - 洋澜一
[00:04.00]作词：王林军
[00:07.00]作曲：彭思文
[00:10.00]演唱：洋澜一
[00:13.00]编曲：KITO
[00:16.00]和声：姚斯婷
[00:19.00]混音：苏洲
[00:22.00]制作人：唐欣宇
[00:25.00]宣发：苏苏
[00:28.00]统筹：冬唲
[00:31.00]LRC编辑：亦是金
[00:34.00] 。。。。。。
[00:35.32]从年少轻狂的斤斤计较
[00:39.00]到信马由缰的继续煎熬
[00:42.82]无论你过的好或者不好
[00:46.17]苦与乐只有你自己知道
[00:50.20]是秋天的霜白了你发梢
[00:53.96]还是冬天的雪开了玩笑
[00:57.78]忍无可忍岁月这把刻刀
[01:01.22]雕琢了轮廓的沟沟壕壕
[01:07.03]青春在什么地方走掉
[01:10.77]我看到你不负责任的坏笑
[01:14.58]那有什么岁月静好
[01:18.02]时间总叫人神魂颠倒
[01:22.04]我丢失了夜里的骄傲
[01:25.84]在寂寞的角落给自己问好
[01:29.57]得与失已无关紧要
[01:33.32]给自己一个爱的拥抱
[01:38.15]就很好
[01:40.97] 。。。。。。
[01:59.60]是秋天的霜白了你发梢
[02:03.42]还是冬天的雪开了玩笑
[02:07.09]忍无可忍岁月这把刻刀
[02:10.54]雕琢了轮廓的沟沟壕壕
[02:16.34]青春在什么地方走掉
[02:20.11]我看到你不负责任的坏笑
[02:23.98]那有什么岁月静好
[02:27.33]时间总叫人神魂颠倒
[02:31.41]我丢失了夜里的骄傲
[02:35.19]在寂寞的角落给自己问好
[02:38.93]得与失已无关紧要
[02:42.66]给自己一个爱的拥抱
[02:46.46]青春在什么地方走掉
[02:50.17]我看到你不负责任的坏笑
[02:54.02]那有什么岁月静好
[02:57.34]时间总叫人神魂颠倒
[03:01.38]我丢失了夜里的骄傲
[03:05.04]在寂寞的角落给自己问好
[03:08.91]得与失已无关紧要
[03:12.73]给自己一个爱的拥抱
[03:17.78]就很好
[03:21.46]
[03:24.46]-- 谢谢欣赏 --
[03:36.63]
`;

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 = 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[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;

var image = document.getElementById("testImg"), 
    button = document.getElementById("btn");
    
if (image.classList && image && button) {
    button.onclick = function() {
        if (this.value == '.') {
            image.classList.remove('stop');
          this.value = '*';
        } else {
            image.classList.add('stop');
            this.value = '.';
        }
    };
}
img_border.onclick = () => MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause();
MusicPlayer.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');



ganguang.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>ganguang.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>ganguang.style.animationPlayState = 'paused');



</script >


<script>
let fs = true;
	fullscreen.onclick = () => {
		fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
		fs = !fs;
	};
</script>