论坛 › 动画音画 › 爱着你的人留不住你的心 - 天籁天

亚伦影音工作室 发表于 2022-6-26 11:27

爱着你的人留不住你的心 - 天籁天

本帖最后由 亚伦影音工作室 于 2022-6-26 18:38 编辑 <br /><br /><div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-230px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background: linear-gradient(0deg, #000080, #003300, #882222, #000000); text-align: center;">
<img class='photo'   style="background: url(http://pan.yinhuabbs.cn/view.php/fd3eebb55f6301c76f95daef38847cc3.jpg)0 0px/100% 100%;"/>
<img class='photo'style="background: url(http://pan.yinhuabbs.cn/view.php/9f36c2c4a7578f12771bb1ec3aca3c6c.jpg)0 0px/100% 100%;" />
<img class='photo' style="background:url(http://pan.yinhuabbs.cn/view.php/8f1d218c949ba1ff16176dd59838def4.jpg)0 0px/100% 100%;" />
<img class='photo'style="background: url(http://pan.yinhuabbs.cn/view.php/8be5d5378788c97ca6a23738512357c8.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(http://pan.yinhuabbs.cn/view.php/c7e550ef774514df459be10369c3c8f4.jpg)0 0px/100% 100%;"/>
<img class='photo'style="background: url(http://pan.yinhuabbs.cn/view.php/ba704446376d025e6be032b1ef64edf2.jpg)0 0px/100% 100%;"/>
<img class='photo'style="background: url(http://pan.yinhuabbs.cn/view.php/4f3248a04d05e0c3068e21094bcec59f.jpg)0 0px/100% 100%;" />
<img class='photo' style="background: url(http://pan.yinhuabbs.cn/view.php/49b91f240c75125f758dccd363794518.jpg)0 0px/100% 100%;" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=143359030" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
      <div class="btn">
         <im id="playpause"style="position:absolute;top:-10px;left:50px;width:960px;height:120px;z-index: 600;border-radius:50%;"/>
      </div>
<div class="img_border" id="aplay"></div>
   <div class="items " style="width: 980px; height: 120px;z-index: 500;position: absolute;top:0px; left:0px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div></div>
</div>
<style type="text/css">
.photo {width: 300px;
   height:600px;
position: absolute;top:0px; left:330px;
filter:contrast(150%)brightness(100%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {0% {
opacity: 0;
transform:translate(0%,0%)scale(0);}
8% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;
transform:translate(0%,0%)scale(1)rotate(-90deg);}

20% {
opacity: 0.4;
transform:translate(0%,0%)scale(3)rotate(-90deg);}
24% {
opacity: 0;
transform:translate(0%,0%)scale(3)rotate(-90deg);}


}
img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >

<style type="text/css">
.container{width: 1px;
    margin: 0;position: absolute;top:500px; left:-20px;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: 120px;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:-10px; left:50px;
    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: 0px;
    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:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:00px;}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;background:url(http://pan.yinhuabbs.cn/view.php/b0fd65945221475b15116623bcf16445.png)0 0/80%50%, url(http://pan.yinhuabbs.cn/view.php/a85ac24bdbb0e82f4478a2a9f06d148d.png)0 0px/80% 80%;
    z-index: 13;position: absolute;
   top:-500px;
    left: 0px;
animation: rotating 40s linear infinite;}
@keyframes rotating {0%{
      background-position: 0% 0;transform:translate(0%,10%)scale(1.2);
    }
    100%{
      background-position: -600% -600%;filter:hue-rotate(360deg);transform:translate(0%,-10%)scale(1);
    }
}
</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 lrc = `爱着你的人留不住你的心 - 天籁天
作词：陈红卫
作曲：王帅
编曲：DJcandy Mix
监制：杨优秀 马明
出品人：亚伦
制作人：亚伦
出品发行：亚伦影音
每当我望着天空怔怔出神
搞不懂你对我的爱是假是真
总感觉你的心就像飘荡的白云
随风自由来去转眼无痕
多次我走进回忆苦苦追问
想知道对我的情到底有几分
默默地盼着你捱过一冬又一春
依旧未能换来你的转身
爱着你的人却留不住你的心
这样的遭遇真的有点太残忍
都怪我太单纯错付了缘分
为你我关上爱别人的门
爱着你的人却留不住你的心
这样的结局真的叫人好心疼
也许就是命运喜欢捉弄人
就让我独自在人海浮沉
每当我望着天空怔怔出神
搞不懂你对我的爱是假是真
总感觉你的心就象飘荡的白云
随风自由来去转眼无痕
多次我走进回忆苦苦追问
想知道对我的情到底有几分
默默地盼着你捱过一冬又一春
依旧未能换来你的转身
爱着你的人却留不住你的心
这样的遭遇真的有点太残忍
都怪我太单纯错付了缘分
为你我关上爱别人的门
爱着你的人却留不住你的心
这样的结局真的叫人好心疼
也许就是命运喜欢捉弄人
就让我独自在人海浮沉
爱着你的人却留不住你的心
这样的遭遇真的有点太残忍
都怪我太单纯错付了缘分
为你我关上爱别人的门
爱着你的人却留不住你的心
这样的结局真的叫人好心疼
也许就是命运喜欢捉弄人
就让我独自在人海浮沉`;
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>
         var aud = document.getElementById("MusicPlayer");
var im = document.getElementById("playpause");
im.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}

</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-26 11:32

本帖最后由 亚伦影音工作室 于 2022-6-26 11:35 编辑

此js播放器功能：1 点击歌词音乐暂停，再次点击音乐开启。
                     2 点击歌词特效消失，再次点击特效和音乐同步显示。

提示：各位好友若音画有异常请及时反馈，谢谢！

红影 发表于 2022-6-26 13:12

的确，点击歌词音乐和特效都停了。这个做得真漂亮{:4_187:}

走过岁月 发表于 2022-6-26 13:14

很美的特效，制作真棒，赞赏 {:4_190:}

醉美水芙蓉 发表于 2022-6-26 15:04

小辣椒 发表于 2022-6-26 22:46

感谢精彩分享{:4_187:}

查看完整版本: 爱着你的人留不住你的心 - 天籁天