论坛 › 欢乐水吧 › 孤独的夜流着伤心的泪-于洋

亚伦影音工作室 发表于 2022-9-3 22:02

孤独的夜流着伤心的泪-于洋

<div style="z-index: 127;width: 1024px; height: 630px; margin-top:50px; margin-left:-230px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/af1f6f65228488767ec4f2718340b966.jpg)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000);text-align: center;">
<div class="HT">


<div   id="testImg" class="mm"><img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0a772d16efb03750e3fc8ab7772b76b2.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d5c72ae294d6e45d0be6a322886f2dd4.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/59e56d89ac14bffb9c139c1330f7bb39.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/02ed51985170a4b9db3f8e70cadb9396.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f2a53a1e6e81b4cd7c41058d2ebd578d.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d386798031aea2db88aea1629093d931.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/35bde4351de72d52a856e23ff870c139.jpg" /> <img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e7b1740a58222e4e2693de343c7e4b9e.jpg" /> </div>
<audio autoplay=""id="MusicPlayer"src="https://www.qqmc.com/mp3/music234865038.mp3" loop="" ></audio>
<div class="img_border" ><img id="aplay" style="width: 1024px; height: 630px;"></div>

      <div class="btn">
   <div   id="testImg" onclick="bf()"> <input type="button"id="testBtn"value="暂停"style="width: 100px; height: 40px;border-radius: 0%;color: #000000;font-size:20px;font-weight:bold;border:1px solid #000000;"> </div>
</div>

<div class="lrc">
<ul id="ullrc">
         </ul>
      </div></div>
</div>

<style type="text/css">

.mm img{width:500px;
                height: 320px;
                position: absolute;
                left:0px;
                    top:0px;z-index: 10;
                box-shadow:0px 0px 0px 2px #000000, 0px 0px 0px 6px #88aaaa;
filter:contrast(130%)brightness(100%);
                border-radius: 0px;
            }
             .mm img:nth-child(1){
                transform:rotateX(0deg) translateZ(800px);}
            .mm img:nth-child(2){
                transform:rotateX(45deg) translateZ(800px);}
            .mm img:nth-child(3){
                transform: rotateX(90deg) translatez(800px);}
            .mm img:nth-child(4){
               transform: rotateX(135deg) translatez(800px);
            }
            .mm img:nth-child(5){
               transform: rotateX(180deg) translatez(800px);
            }
            .mm img:nth-child(6){
               transform: rotateX(225deg) translatez(800px);
            }
            .mm img:nth-child(7){
                transform: rotateX(270deg) translatez(800px);
            }
            .mm img:nth-child(8){
                transform: rotateX(315deg) translatez(800px);
            }
            



         .mm img:nth-child(1):stop{transform:scale(2);
               }
            .mm img:nth-child(2):stop{
               
            }
            .mm img:nth-child(3):stop{transform:scale(2);
               
            }
            .mm img:nth-child(4):stop{
               
            }
            .mm img:nth-child(5):stop{transform:scale(2);
               
            }
            .mm img:nth-child(6):stop{
            }
            .mm img:nth-child(7):stop{transform:scale(2);
               
            }
            .mm img:nth-child(8):stop{
               
            }
         
         .stop{
            animation-play-state:paused;transform:scale(2);
               }
            .mm{
                margin: 0px auto;
                width: 500px;
                height: 320px;
                transform-style: preserve-3d;
                animation-name: animate;
                animation-duration: 150s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;

                position: relative;
            }
            @keyframes animate{
               0% {
                  transform:rotateX(-150deg) rotateZ(35deg) rotateX(-360deg);
                }
                25% {
                  transform:rotateX(150deg) rotateZ(-35deg) rotateX(0deg);
                }
50% {
                  transform:rotateX(150deg) rotateZ(35deg) rotateX(360deg);
                }
75% {
                  transform:rotateX(-150deg) rotateZ(-35deg) rotateX(0deg);
                }
100% {
                  transform:rotateX(-150deg) rotateZ(35deg) rotateX(-360deg);
                }

            }
</style>

<style type="text/css">
.HT{
    width: 1000px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.btn{
    display: block;z-index: 300;
    margin: 0px 0px;position: absolute;top:540px; left:20px;
}
.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 -1px0);
    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;-webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-color: red;
   background-image:linear-gradient(50deg, #fff000, #ff0000, #000000, #00f000);
   background-repeat:no-repeat;
   background-position: -800px 0;
   -webkit-animation:loop 3s linear infinite;

}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 45px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold;
}

@-webkit-keyframes loop{
   0%{background-position: -800px 0;}
   100%{background-position: -0 0;}
}

/*mv动画*/
.img_border{display:inline-block;width:1024px;height:630px;position: absolute;top:0px; left:0px;z-index: 14;}
.img_border #aplay{border:0px solid #cccccc;border-radius:0%; transition: .3s all ease;/*一定要加上不然看着突兀*/ }
.z360z{animation:rotating 8s linear infinite;
}@keyframes rotating{
0% {opacity: 1;background: linear-gradient(45deg, rgba(250, 7, 7, 0.43) 6%,rgba(44, 202, 48, 0.07) 51%,rgba(3, 8, 248, 0.47) 87%);}
20% {opacity: 1;background: linear-gradient(90deg, rgba(250, 7, 7, 0.43) 6%,rgba(44, 202, 48, 0.07) 51%,rgba(3, 8, 248, 0.47) 87%);}
40% {opacity: 1;background: linear-gradient(135deg, rgba(250, 7, 7, 0.43) 6%,rgba(44, 202, 48, 0.07) 51%,rgba(3, 8, 248, 0.47) 87%);}
60% {opacity: 1;background: linear-gradient(180deg, rgba(250, 7, 7, 0.43) 6%,rgba(44, 202, 48, 0.07) 51%,rgba(3, 8, 248, 0.47) 87%);}
80% {opacity: 1;background: linear-gradient(225deg, rgba(250, 7, 7, 0.43) 6%,rgba(44, 202, 48, 0.07) 51%,rgba(3, 8, 248, 0.47) 87%);}
100% {opacity: 1;background: linear-gradient(270deg, rgba(250, 7, 7, 0.43) 6%,rgba(44, 202, 48, 0.07) 51%,rgba(3, 8, 248, 0.47) 87%);}
}

</style>

<script>var lrc =`孤独的夜流着伤心的泪-于洋
作词: 苏晓
作曲：林沛勇
编曲: 刘景晖
混音工程师：大狗
和声：钟摆柳
吉他：李俊
监制：去阳弟
策划：方文
独家代码：亚伦影音
出品：亚伦影音
夜深了一个人偷偷买醉
这么多年感情无力挽回
做什么好像都是我不对
直到现在你还执迷不悔
当初不该对你掏心掏肺
可能是我自己太过愚昧
往事只能一个人去体会
只剩下卑微来收拾结尾
孤独的夜流着伤心的泪
而你亲手把相思熬成灰
我越是靠近你越是后退
再坚固的爱终究会变味
孤独的夜流着伤心的泪
深夜只能靠酒精来麻醉
可是眼泪止不住的下坠
这段感情就这样被浪费
当初不该对你掏心掏肺
可能是我自己太过愚昧
往事只能一个人去体会
只剩下卑微来收拾结尾
孤独的夜流着伤心的泪
而你亲手把相思熬成灰
我越是靠近你越是后退
再坚固的爱终究会变味
孤独的夜流着伤心的泪
深夜只能靠酒精来麻醉
可是眼泪止不住的下坠
这段感情就这样被浪费
孤独的夜流着伤心的泪
而你亲手把相思熬成灰
我越是靠近你越是后退
再坚固的爱终究会变味
孤独的夜流着伤心的泪
深夜只能靠酒精来麻醉
可是眼泪止不住的下坠
这段感情就这样被浪费`;
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 = 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.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>
         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 image = document.getElementById("testImg"),
    button = document.getElementById("testBtn");
   
if (image.classList && image && button) {
    button.onclick = function() {
      if (this.value == '暂停') {
            image.classList.add('stop');
            this.value = '播放';
      } else {
            image.classList.remove('stop');
            this.value = '暂停';
      }
    };
}
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()

{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

梦缘 发表于 2022-9-3 22:03

跳动的图片，好看的播放器，欣赏问好！{:4_204:}

红影 发表于 2022-9-3 22:25

这是那个走马灯的图片轮转换了个转动方向吧，很漂亮。欣赏亚伦老师好帖{:4_187:}

马黑黑 发表于 2022-9-3 22:37

亚伦精彩连连。赞。

青青子衿 发表于 2022-9-3 23:55

咱看眼晕了啊。。。高手，赞一个~！{:4_204:}

查看完整版本: 孤独的夜流着伤心的泪-于洋