论坛 › 动画音画 › 《思念天边的你》红蔷薇

焱鑫磊 发表于 2023-5-16 12:19

《思念天边的你》红蔷薇

本帖最后由 焱鑫磊 于 2023-5-16 12:51 编辑 <br /><br /><style>
.papa { left: -280px; MARGIN-TOP: 100px;width: 1164px; height: 640px; border-radius: 20px; background:url(https://pic2.imgdb.cn/item/6412e67aebf10e5d530a990b.gif)0 0/20%20%,url(https://pic2.imgdb.cn/item/64630bc20d2dde57777ee57b.jpg)0 0/100% 100%; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }

.papa::before, .papa::after { position: absolute;content: '';border-radius: inherit; background:url(https://pic2.imgdb.cn/item/6412e67aebf10e5d530a990b.gif)0 0/20%20%,url(https://pic2.imgdb.cn/item/64630bdb0d2dde57777f0543.jpg)0 0px/100% 100%;width: 100%; height: 100%; transition: all 2s linear;z-index: 10; }


.papa::before {clip-path: polygon(0 0, 100% 100%, 100% 0);transform: translate(0%,0%) rotate(0deg) scale(1);opacity: 1;}
.papa::after{clip-path: polygon(0 0, 100% 100%, 0 100%);transform: translate(0%,0%) rotate(0deg) scale(1); opacity: 1; }

.papa:hover::before {clip-path: polygon(0 0, 100% 100%, 100% 0);transform: translate(100%,0%) rotate(0deg) scale(1); opacity: 0; }
.papa:hover::after{clip-path: polygon(0 0, 100% 100%, 0 100%);transform: translate(0%,100%) rotate(0deg) scale(1);opacity: 0;}


</style>

<style type="text/css">.items{ animation: slider1 1s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(100%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(110%)brightness(100%);}}
</style>
<div class="papa">
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://pan.111t.net/view.php/bc04c063d9dc1c6986f7d69308eb00a8.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
      <div class="btn">
      <span id="bf"onclick="bf();"style="width: 120px; height: 120px;z-index: 300;position: absolute;top:-60px; left:880px;"></span>
      <span id="bf"onclick="rbf();"></span>
      </div>
<div class="items" >
<div class="img_border"><img src="https://pic2.imgdb.cn/item/6412faecebf10e5d5357f0ef.png" id="aplay"style="width: 80%; height: 80%;z-index: 110;" ></div></div>
   <div class="items" >
<divclass="lrc">
      <ul id="ullrc">
         </ul>
      </div>
</div>
</div>
<style type="text/css">
.container{width: 1px;height: 1px;
    margin: 0;position: absolute;top:530px; left:-30px;z-index: 100;
}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.container .btn{
    display: block;z-index: 300;
    margin: 0;
}
.container .lrc{
    width: 960px;
    height: 180px;z-index: 1;
    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:-70px; left:0px;
    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: 80px;
    line-height: 90px;
font-family:悟空大字库;
    font-size: 30px;
    color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    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;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:120px;height:120px;margin:0px ;position: absolute;top:-70px; left:920px;z-index: 150;}
.container .img_border #aplay{ }
.container .z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{0% {transform: rotateX(0deg) rotateY(0deg)
rotateZ(0deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-30deg)scale(2.5);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2.5);}
}
.audio{
    z-index: 1;
    bottom: 0;
    opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
    opacity: 0;
}
</style>

<script >var lrc = `《思念天边的你》红蔷薇
词：谢世超罗宝曲：谢世超
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 = 90;
    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 rbf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            audio.currentTime = 0;
            audio.play();
            bf.innerText="";
      }

      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>

亦是金 发表于 2023-5-16 17:00

问好！欣赏收藏学习了！{:4_187:}

醉美水芙蓉 发表于 2023-5-16 17:03

红影 发表于 2023-5-16 18:45

鼠标上去后画面会发生变化。暂停时播放器按钮也变小了。好听的歌，欣赏焱鑫磊好帖。{:4_187:}

一斛珠 发表于 2023-5-16 19:01

漂亮，手点还有变化

焱鑫磊 发表于 2023-5-16 22:15

亦是金 发表于 2023-5-16 17:00
问好！欣赏收藏学习了！

问候亦是金好！{:4_187:}

焱鑫磊 发表于 2023-5-16 22:16

醉美水芙蓉 发表于 2023-5-16 17:03
问好朋友！欣赏佳作！

朋友好！{:4_204:}

焱鑫磊 发表于 2023-5-16 22:16

红影 发表于 2023-5-16 18:45
鼠标上去后画面会发生变化。暂停时播放器按钮也变小了。好听的歌，欣赏焱鑫磊好帖。

问候红影好！{:4_187:}

焱鑫磊 发表于 2023-5-16 22:17

一斛珠 发表于 2023-5-16 19:01
漂亮，手点还有变化

问候一斛珠好！{:4_204:}

红影 发表于 2023-5-16 23:09

焱鑫磊 发表于 2023-5-16 22:16
问候红影好！

鼠标可以触动的，这个帖子很有特点{:4_187:}

梦缘 发表于 2023-5-17 11:00

制作精美，欣赏问好！{:4_204:}

焱鑫磊 发表于 2023-5-17 20:25

梦缘 发表于 2023-5-17 11:00
制作精美，欣赏问好！

问好梦缘！{:4_187:}

查看完整版本: 《思念天边的你》红蔷薇