论坛 › 动画音画 › 端午安康

梦江南 发表于 2024-6-8 18:43

端午安康

<div style="z-index: 127;width: 1000px; height: 600px; margin-top:50px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #0000FF, 0px 0px 0px 15px #0000FF; overflow: hidden;transform:
rotate(0deg);background:url(https://pic.imgdb.cn/item/66559ccbd9c307b7e9b1ea2a.gif)0 0/100% 100%;text-align: center;">

<div class="container">
   <audio autoplay="" class="audio" id="MusicPlayer" src="https://link.hhtjim.com/kw/214710904.mp3&type=convert_url&response=res" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>

   <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:500px; left:-30px;z-index: 550;
}
.container #MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.container .btn{
    display: block;
    margin: 0;
}
.container .lrc{
    width: 960px;
    height: 180px;z-index: 550;
    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:-30px; left:80px;
    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: 0px;
    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;
    font-weight: bold;
}

</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>

<style type="text/css">.items1{ animation: slider1 1s linear infinite ;}
@keyframes slider1 {from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(80%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);}}
</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 = 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 language="javascript">

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



</script>

梦江南 发表于 2024-6-8 18:46

提前祝朋友们端午阖家安康，万事如意！

醉美水芙蓉 发表于 2024-6-8 18:58

起个网名好难 发表于 2024-6-8 19:29

https://p8.itc.cn/q_70/images03/20200615/4ddb5b65c6f44f8aba3d40622eb09753.gif

红影 发表于 2024-6-8 20:21

清爽漂亮，欣赏梦江南好帖。借帖同祝大家端午安康{:4_177:}

梦油 发表于 2024-6-8 20:21

祝朋友们阖家团聚、幸福安康。

樵歌 发表于 2024-6-8 21:39

向端雅致上档次！

小辣椒 发表于 2024-6-8 23:10

谢谢梦江南，同样的祝福送给你~~

端午安康！

梦江南 发表于 2024-6-9 08:58

醉美水芙蓉 发表于 2024-6-8 18:58
欣赏友友的精彩动图！

谢谢醉美水芙蓉友沙发支持，祝端午安康！{:4_204:}

梦江南 发表于 2024-6-9 08:59

起个网名好难 发表于 2024-6-8 19:29


谢谢老师可爱图图支持，祝端午安康！{:4_204:}

梦江南 发表于 2024-6-9 09:01

红影 发表于 2024-6-8 20:21
清爽漂亮，欣赏梦江南好帖。借帖同祝大家端午安康

谢谢影子加精支持鼓励，祝端午安康！{:4_204:}

梦江南 发表于 2024-6-9 09:02

梦油 发表于 2024-6-8 20:21
祝朋友们阖家团聚、幸福安康。

谢谢梦油老师支持，祝端午安康！{:4_204:}

梦江南 发表于 2024-6-9 09:03

樵歌 发表于 2024-6-8 21:39
向端雅致上档次！

谢谢樵歌老师支持，祝端午安康！{:4_204:}

梦江南 发表于 2024-6-9 09:04

小辣椒 发表于 2024-6-8 23:10
谢谢梦江南，同样的祝福送给你~~

端午安康！

谢谢小辣椒老师支持，祝端午安康！{:4_204:}

红影 发表于 2024-6-9 13:04

梦江南 发表于 2024-6-9 09:01
谢谢影子加精支持鼓励，祝端午安康！

谢谢，同祝端午安康{:4_187:}

梦江南 发表于 2024-6-9 14:07

红影 发表于 2024-6-9 13:04
谢谢，同祝端午安康

转眼又到端午节，放松去度小长假，轻轻松松展笑脸，快乐度过美无边。工作辛劳暂忘掉，养足精神备明天，事事顺心美梦圆，幸福之花永不谢。{:4_204:}

梦油 发表于 2024-6-9 15:58

梦江南 发表于 2024-6-9 09:02
谢谢梦油老师支持，祝端午安康！

梦江南朋友不客气。

红影 发表于 2024-6-9 19:05

梦江南 发表于 2024-6-9 14:07
转眼又到端午节，放松去度小长假，轻轻松松展笑脸，快乐度过美无边。工作辛劳暂忘掉，养足精神备明天，事 ...

梦江南很诗意，谢谢美好祝福{:4_187:}

小辣椒 发表于 2024-6-9 20:45

梦江南 发表于 2024-6-9 09:04
谢谢小辣椒老师支持，祝端午安康！

别客气啊，叫小辣椒就可以了，大家一起学习的

樵歌 发表于 2024-6-9 21:32

梦江南 发表于 2024-6-9 09:03
谢谢樵歌老师支持，祝端午安康！

端午安康！
上面打错了，是高雅哈。

查看完整版本: 端午安康