我心化蝶千年 - 安静

亚伦影音工作室

亚伦影音工作室

• <div id="papa">
  <div  class="lrc">
          <ul id="ullrc">
           </ul>
  </div>
  <div  id="tx">
  
  <div  id="plane"> </div>
  <div  id="plane0"> </div>
  <div id="midground" ></div>
  
  
  <div id="img_border" ></div>
  
  </div></div>
  <audio id="aud" src="https://aimg8.dlssyht.cn/u/0/ueditor/file/0/0/1671432093430388.mp3" loop autoplay></audio>
  
  <style>
  #papa { margin: 30px 30px ; width: 1164px; height: 640px; background:url(https://img-baofun.zhhainiao.com ... 7f281e5f1f050ed.jpg)0px 0px/100% 100%; box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10; overflow:hidden;}
  
  
  .lrc{
      width: 960px;
      height: 125px;
      overflow: hidden;
      display: block;position: absolute;top:500px; left:10px;z-index: 3;
      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;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);
  font-family:悟空大字库;
      font-size: 40px;
      color: #000078;transform: translate(20%,0%);
      font-weight: normal;
      transition: .3s all ease;/*一定要加上不然看着突兀*/
      list-style-type: none;
      text-align: center;
      display: block;
      width: 100%;
      margin: 0 auto;
  }
  /*动态歌词样式*/
  .lrc #ullrc li.active{
      font-size: 40px;color: #ff0000;
    transform: translate(-20%,0%);
      font-weight: normal;-webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       
     background-image:linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#FEFFFF 62%,#36F4B1 75%);
       background-position: -800px 0;
       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);
       -webkit-animation:loop 5s linear 1;
  }
  @-webkit-keyframes loop{
       0%{background-position: -800px 0;}
       100%{background-position: -0 0;}
  }
       
  #tx { position: absolute;
          top: 0px;
          left: 0px;z-index: 2;
          width: 1164px;
          height: 620px;
          animation: tx 2s linear infinite;
          cursor: pointer;}
  
  @keyframes tx {from {filter: hue-rotate(0deg);
          }
  to {filter:hue-rotate(360deg)contrast(100%)brightness(120%);}
  }
  #midground{width: 1164px;height: 620px;position: absolute;
          top: 0px;
          left: 0px;z-index: 2;
      opacity: 1;background: url("https://pic.imgdb.cn/item/639ffe7bb1fccdcd36293272.png")0 0/10% 10%;
  animation: cc 3s linear infinite;
  }
  @keyframes cc  {0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(1);filter:hue-rotate(0deg)}
  90% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(2);filter:hue-rotate(360deg)}
  100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)scale(1);opacity: 0.4;}
  }
  
  #plane {position: absolute;left: -150px;top: 180px;width: 1164px;height: 620px; offset-distance: 0;
  offset-path: path("M0 20 Q 100 400, 500 200 T1164 100");background: url("https://pic.imgdb.cn/item/639ffe1fb1fccdcd3628bd35.png")0 0/50% 100%;
  animation: move 10s linear infinite;}
  #plane0 {position: absolute;left: -450px;top: 200px;width: 1164px;height: 620px;offset-distance: 0;
  offset-path: path("M0 20 Q 100 400, 500 200 T1164 100");background: url("https://pic.imgdb.cn/item/639ffe1fb1fccdcd3628bd35.png")0 0/50% 100%;
  animation: move0 10s linear infinite;}
  @keyframes move { to { offset-distance: 100%;} }
  @keyframes move0 { to { offset-distance: 100%;} }
  #img_border{display:inline-block;width:150px;height:150px;position: absolute;top:460px; left:900px;z-index: 6; transition: .3s all ease;animation:rotating 10s linear infinite;background:url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)0px 0px/100% 100%;border-radius:0%;}
  @keyframes rotating  {
  0%{transform: rotate(-360deg);}
  100%{transform: rotate(0deg);}
  }
  </style>
  
  <script >var lrc = `[00:00]我心化蝶千年 - 安静
  [00:06]词：蓝月
  [00:12]曲：安静
  [00:18]编曲：于洋
  [00:25]后期：大卫
  [00:31]我是你千年之前的擦肩
  [00:37]想你的思绪时刻缠绕在心尖
  [00:44]我只为你牵动灵魂深处的腼腆
  [00:51]让真爱在云海中不断显现
  [00:58]我是你菩提树下的誓言
  [01:05]恋你的情愫时刻跌宕在心间
  [01:12]我只为你弹拨梦里梦外的缠绵
  [01:19]让真情在天地间百回千转
  [01:25]虽然我无法触摸你的脸
  [01:32]一颗爱你的心已化蝶千年
  [01:39]尽管你已经不记得前世情缘
  [01:46]我会陪伴你身边千年不变
  [02:20]我是你菩提树下的誓言
  [02:27]恋你的情愫时刻跌宕在心间
  [02:34]我只为你弹拨梦里梦外的缠绵
  [02:41]让真情在天地间百回千转
  [02:47]虽然我无法触摸你的脸
  [02:55]一颗爱你的心已化蝶千年
  [03:01]尽管你已经不记得前世情缘
  [03:08]我会陪伴你身边千年不变
  [03:15]虽然我无法依偎你的肩
  [03:22]一颗恋你的心已化蝶千年
  [03:29]尽管你已经不记得昔日之恋
  [03:36]我会守护你身边直到永远
  [03:43]我会守护你身边直到永远
  `;
  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 = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
          if (lrcArray[index].seconds > time) {
              return index - 1;
          }
      }
  }
  $("aud").ontimeupdate = setPosition;
  plane.style.animationPlayState = aud.paused ? 'paused' : 'running';
  aud.addEventListener('playing', () => plane.style.animationPlayState = 'running');
  aud.addEventListener('pause', () => plane.style.animationPlayState = 'paused');
  
  plane0.style.animationPlayState = aud.paused ? 'paused' : 'running';
  aud.addEventListener('playing', () => plane0.style.animationPlayState = 'running');
  aud.addEventListener('pause', () => plane0.style.animationPlayState = 'paused');
  
  midground.style.animationPlayState = aud.paused ? 'paused' : 'running';
  aud.addEventListener('playing', () => midground.style.animationPlayState = 'running');
  aud.addEventListener('pause', () => midground.style.animationPlayState = 'paused');
  
  tx.style.animationPlayState = aud.paused ? 'paused' : 'running';
  aud.addEventListener('playing', () =>tx.style.animationPlayState = 'running');
  aud.addEventListener('pause', () =>tx.style.animationPlayState = 'paused');
  
  img_border.onclick = () => aud.paused ? aud.play() : aud.pause();
  aud.addEventListener('playing', () => img_border.style.animationPlayState = 'running');
  aud.addEventListener('pause', () => img_border.style.animationPlayState = 'paused');
  </script>
  

梦缘

很漂亮的帖，感谢老师的代码分享！

红影

歌词和播放器按钮变色很漂亮，人物变色有点吓人。欣赏亚伦老师好帖

小辣椒

这个界面移动的人物太大了