论坛 › 欢乐水吧 › 迟来的爱(新版) - 金润吉[可控]

亚伦影音工作室 发表于 2022-9-4 05:38

迟来的爱(新版) - 金润吉[可控]

本帖最后由 亚伦影音工作室 于 2022-9-4 05:38 编辑 <br /><br /><div style="z-index: 127;width: 1024px; height: 600px; 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/fe01c7ec8cdb2eb2a2536bc394e7a435.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;">
<div class="HT">
<divid="testImg" class="love">
</div>
<audio autoplay=""id="MusicPlayer"src="https://www.qqmc.com/mp3/music234134215.mp3" loop="" ></audio>
      <div class="btn">
   <divid="testImg"id="bf"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="img_border"><imgid="aplay"style="width: 100%; height: 100%;z-index: 150;background: url(http://image.hnol.net/c/2022-01/05/16/202201051650422421-5769293.png)0 0/50% 80%;z-index: 10;" ></div>

<div class="lrc">
       <div class="items"> <ul id="ullrc">
         </ul>
      </div></div>
</div>
</div></div>
<style type="text/css">
.love {margin: 0 auto;
    display: block;
    width: 1024px; height: 600px;box-shadow: 0px 0px 0px 1px #ffffff, 0px 0px 0px 8px #880000;
    background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3d7d6a01abc0c65cb3f9f619b509d39b.jpg) 0 0/100% 100%;
animation: heart-burst 46s infinite ;
}
.stop {
    animation-play-state: paused;
}
@keyframes heart-burst {
5% {opacity: 1;clip-path: circle(0 at 50% 100%);-webkit-transform:scale(1)}
10% {opacity: 1;clip-path: circle(100% at 50% 100%);-webkit-transform:scale(1);}
15% {opacity: 1;clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);}
20% {opacity: 1;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);}
25% {opacity: 1;transform: scale(1);clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%)}
35% {opacity: 1;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);}
40% {opacity: 1;clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);}
45% {opacity: 1;clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);}
50% {opacity: 1;clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);}
55% {opacity: 1;clip-path: polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%, 50% 0%);}
60% {opacity: 1;clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);}
65% {opacity: 1;clip-path: polygon(50% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);}
70% {opacity: 1;clip-path: polygon(50% 100%, 0% 0%, 0% 0%, 100% 0%, 100% 0%);}
75% {opacity: 1;clip-path: polygon(50% 100%, 50% 0%, 0% 0%, 100% 0%, 50% 0%);}
80% {opacity: 1;clip-path: circle(0 at 50% 50%);}
85% {opacity: 1;clip-path: circle(80% at 50% 50%);}
90% {opacity: 1;clip-path: circle(0 at 50% 50%);}
95% {opacity: 1;clip-path: circle(80% at 50% 50%);}
}
</style>
<style type="text/css">.items{ z-index: 1540;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 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 = '暂停';
      }
    };
}
</script>
<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:80px;
}
.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);
    display: block;position: absolute;top:480px; left:80px;z-index: 30;
    margin: 0 auto;
}
.container .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;

}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 45px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold;
}
/*动画*/
.img_border{display:inline-block;width:1024px;height:600px;margin:0px ;position: absolute;top:0px; left:0px;z-index: 10;}
.img_border #aplay{ }
.z360z{width: 1024px; height: 600px;
    z-index: 13;opacity: 1;position: absolute;
    margin-top:0px;
    left: 0px;
animation: rotating 40s linear infinite;}
@keyframes rotating {
    0%{
      background-position: 600% 0;
    }
    100%{
      background-position: 0 600%;filter:hue-rotate(360deg)
    }
}
</style>

<script>var lrc =`迟来的爱(新版) - 金润吉
作词：吕承明
作曲：刘明瑞
编曲：金润吉
制作人：亚伦
代码设计：亚伦
出品：亚伦影音工作室
一段情要埋藏多少年
一封信要迟来多少天
两颗心要承受多少痛苦的煎熬
才能够彼此完全明了
你应该会明白我的爱
虽然我从未向你坦白
多年以来默默对你深切的关怀
为什么你还不能明白
不愿放弃你的爱
这是我长久的期待
不能保留你的爱
那是对她无言的伤害
伤痛的心一片空白
如何面对那迟来的爱
RAP:
我知道一切都太迟了
明天你就要带着她
走进结婚礼堂
我羡慕她
同时也给你
我最深的祝福
你应该会明白我的爱
虽然我从未向你坦白
多年以来默默对你深切的关怀
为什么你还不能明白
不愿放弃你的爱
这是我长久的期待
不能保留你的爱
那是对她无言的伤害
伤痛的心一片空白
如何面对那迟来的爱
伤痛的心一片空白
如何面对那迟来的爱`;
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="播放";
                }
            }
      }
    </script>
<script type="text/javascript">
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-4 07:40

亚伦的帖子，镁铝帅锅好多。赞。

红影 发表于 2022-9-4 09:12

漂亮的图片轮播效果，给亚伦老师点赞{:4_199:}

梦缘 发表于 2022-9-4 11:15

新的播放器，好看好听，感谢老师分享！{:4_204:}

加林森 发表于 2022-9-4 17:00

漂亮的制作，字体还可以变色，挺好的！{:4_199:}

查看完整版本: 迟来的爱(新版) - 金润吉[可控]