亚伦影音工作室 发表于 2022-6-29 19:13

九十九步退一步 (DJ默涵版) - 魏佳艺[可控音画]

本帖最后由 亚伦影音工作室 于 2022-6-29 20:21 编辑 <br /><br /><div style="z-index: 27;width: 1200px; height: 625px; margin-top:30px; margin-left:-300px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(#)0 0px/100% 100%; text-align: center;">

<P id="picBtn" class=""style="width: 150px; height: 150px;position: absolute;top:440px; left:40px;background: url('http://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif') 0 0/100% 100%;z-index: 400;"></p>
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=210220570" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
<div class="img_border" id="aplay"><img class='photo'src="http://chuangshicdn.data.mvbox.cn/album/22/06/29/22062918314029952954.jpg" style="width: 710px; height: 440px;z-index: 66;position: absolute;top:50px; left:240px;-webkit-mask-image: radial-gradient(black 30% ,transparent 70%);"></div>


   <div class="items " style="width: 980px; height: 120px;z-index: 66;position: absolute;top:450px; left:120px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div></div>
</div>
<style type="text/css">
.container{width: 1200px;height: 625px;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/04/22030408532927019944.gif)0 0px/100% 100%;
    margin: 0;position: absolute;top:0px; left:0px;z-index: 5;}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;}
.container .btn{
    display: block;
    margin: 0;}
.container .lrc{
    width: 960px;
    height: 120px;
    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:0px; left:0px;z-index: 66;
    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: 70px;
    line-height: 70px;
font-family:悟空大字库;
    font-size: 40px;
    color: #000078;
    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: 40px;
    color: #ff0000;
    font-weight: bold}
/*动画*/
.container .img_border{display:inline-block;width:1200px;height:625px;margin:0px ;position: absolute;top:0px;left:0px;}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1200px; height: 625px;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213462674835656.gif)0 0/50%100%, url(http://chuangshicdn.data.mvbox.cn/album/22/03/04/22030408532927019944.gif)0 0px/100% 100%;
    z-index: 1;position: absolute;
   top:0px;
    left: 0px;
animation: rotating 5s linear infinite;}
@keyframes rotating {0%{
      transform: scale(1);opacity: 0; filter:hue-rotate(0deg)contrast(110%)brightness(100%);
    }

      5%{transform: scale(1);opacity: 1; filter:hue-rotate(360deg)contrast(120%)brightness(100%);
    }
100%{
      transform: scale(2);opacity: 1; filter:hue-rotate(0deg)contrast(110%)brightness(100%);
    }
}
</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 = `九十九步退一步 (DJ默涵版) - 魏佳艺
词：余云飞
曲：子荣
编曲：关剑
任何关系需要双方去维系
靠一方根本无法继续
我再也不要做舔狗了
我们好聚好散吧
我能走九十九步去爱你
也能后退一步就放弃
感情若隔着一颗心的距离
跨越不了就别浪费鼓励
对这段情做了个分析
维持现状不会有结局
一路为你撑伞我却淋雨
理所应当是你的逻辑
为这段情我已尽全力
你却不敌我万分之一
继续经营只会一败涂地
及时止损是我的转机
我能走九十九步去爱你
也能后退一步就放弃
任何关系需要双方去维系
靠一方根本无法继续
我能走九十九步去爱你
也能后退一步就放弃
感情若隔着一颗心的距离
跨越不了就别浪费鼓励
为这段情我已尽全力
你却不敌我万分之一
继续经营只会一败涂地
及时止损是我的转机
我能走九十九步去爱你
也能后退一步就放弃
任何关系需要双方去维系
靠一方根本无法继续
我能走九十九步去爱你
也能后退一步就放弃
感情若隔着一颗心的距离
跨越不了就别浪费鼓励
我能走九十九步去爱你
也能后退一步就放弃
任何关系需要双方去维系
靠一方根本无法继续
我能走九十九步去爱你
也能后退一步就放弃
感情若隔着一颗心的距离
跨越不了就别浪费鼓励
跨越不了就别浪费鼓励`;
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 = 70, lrc_ul_height = 50;
    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 language="javascript">

var mu = document.getElementById('MusicPlayer');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('http://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif')0 0/100% 100%") : (mu.pause(), btn.style.background="url('http://image.hnol.net/c/2022-06/29/16/202206291616388661-5769293.png')0 0/100% 100%");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('http://image.hnol.net/c/2022-06/29/16/202206291616388661-5769293.png')0 0/100% 100%";
})


</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="items";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

红影 发表于 2022-6-29 19:58

这个美人的场景还是变色的，真漂亮。歌曲也很好听。欣赏亚伦老师好帖{:4_187:}

绿叶清舟 发表于 2022-6-29 21:00

这个制作太漂亮了，谢谢亚伦欢迎常来{:4_199:}

马黑黑 发表于 2022-6-29 22:49

欣赏美帖
{:4_187:}
页: [1]
查看完整版本: 九十九步退一步 (DJ默涵版) - 魏佳艺[可控音画]