论坛 › 欢乐水吧 › 你不懂

醉美水芙蓉 发表于 2022-5-31 20:42

你不懂

<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(http://bbs.cnzv.cc/pan/qun91530683/2022/05/17/5300d5161ab6e9a5e15f0309e38e4b9f.jpg)0 0/100%100%,linear-gradient(0deg, #000080, #003300, #800000, #000060);text-align: center;">

<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=219857382&.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
      <div class="btn">
         <img src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png" id="playpause"style="position:absolute;top:-35px;left:35px;width:150px;height:150px;z-index: 600;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);"/>
      </div>
<div class="img_border" id="aplay"></div>
   <div class="bs" style="z-index: 500;position: absolute;top:0px; left:0px;">
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div></div></div>
<div id="txtBox" class="bs"style="margin: auto;color: #fff000;font-family:华文隶书;font-size: 1.5em;position: absolute;left: 60px;top: 10px; width: 900px;text-align: center;"></div>
</div>


<style type="text/css">
.container{width: 1px;height: 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;
    margin: 0;}
.container .lrc{
    width: 960px;
    height: 130px;
    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:70px;
    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: 60px;
    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;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
    font-size: 48px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;
    z-index: 13;position: absolute;
   top:-500px;opacity: 1;
    left: 20px;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%, url(http://image.hnol.net/c/2022-01/05/16/202201051650422421-5769293.png)0 0px/50% 70%;
animation: rotating 50s linear infinite;}
@keyframes rotating {
    0%{
      background-position: 600% 0;
    }
    100%{
      background-position: 0 600%;filter:hue-rotate(360deg)
    }
}
</style>
<style type="text/css">.bs{animation: slider0 0.26s linear infinite ;position: absolute;top:-20px; left:0px;z-index: 1000;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 8px #CD6600) drop-shadow(0px 0px 8px #CD6600)drop-shadow(0px 0px 8px #CD6600)brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 8px #000090)drop-shadow(0px 0px 8px #000090)drop-shadow(0px 0px 8px #000090)brightness(100%);}}
</style>
<script language="javascript">
var txtBox = document.getElementById("txtBox");
var idx = 0;
var str = " 《你不懂 (DJ默涵版)》玄鸟传说";

setInterval(function(){
      txtBox.innerHTML = str.substring(0, idx) + "➽➣";
      idx += 1;
      if(idx > str.length) idx = 0;
}, 300);
</script>


<script >var lrc =`玄鸟传说 - 你不懂 (DJ默涵版)
作词：玄鸟传说超人
作曲：玄鸟传说超人
编混：王亚东
DJ制作: 默涵
出品人：玄鸟传说超人
发行：北京玄鸟传说文化传媒有限公司
或许彼此都曾有埋怨
却还没舍得在记忆里除名
你不懂你根本不会懂
有些爱只能藏在心中
或许留恋美好的过往
到最后才发现已落得一场空
有时听到一首歌就会感动
莫名的被其中的歌词戳中
不同的年纪不同的故事
我们又如何忘记里面的主人翁
在一起的日子曾海誓山盟
爱了就由熟悉变成陌生
不同的选择不同的坚持
所有的这一切又有谁会懂
你不懂你可能不会懂
有些爱只能藏在心中
或许彼此都曾有埋怨
却还没舍得在记忆里除名
你不懂你根本不会懂
有些情好像是一场梦
或许留恋美好的过往
到最后才发现已落得一场空
在一起的日子曾海誓山盟
不爱了就由熟悉变成陌生
不同的选择不同的坚持
所有的这一切又有谁会懂
你不懂你可能不会懂
有些爱只能藏在心中
或许彼此都曾有埋怨
却还没舍得在记忆里除名
你不懂你根本不会懂
有些情好像是一场梦
或许留恋美好的过往
到最后才发现已落得一场空
你不懂你可能不会懂
有些爱只能藏在心中
或许彼此都曾有埋怨
却还没舍得在记忆里除名
你不懂你根本不会懂
有些情好像是一场梦
或许留恋美好的过往
到最后才发现已落得一场空
谢谢欣赏！`;
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 = 60, lrc_ul_height = 60;
    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 img = document.getElementById("playpause");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png";
}, false);

</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="txtBox";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

红影 发表于 2022-5-31 20:50

真漂亮的制作。欣赏水芙蓉好帖{:4_187:}

加林森 发表于 2022-5-31 20:50

好听好看。赞！{:4_199:}

来看你 发表于 2022-5-31 20:53

很好看{:4_204:}

醉美水芙蓉 发表于 2022-5-31 20:56

红影 发表于 2022-5-31 20:50
真漂亮的制作。欣赏水芙蓉好帖

红影美女晚上好！

醉美水芙蓉 发表于 2022-5-31 20:56

加林森 发表于 2022-5-31 20:50
好听好看。赞！

队长欣赏愉快！

醉美水芙蓉 发表于 2022-5-31 20:56

来看你 发表于 2022-5-31 20:53
很好看

谢谢美女欣赏支持！

加林森 发表于 2022-5-31 20:58

醉美水芙蓉 发表于 2022-5-31 20:56
队长欣赏愉快！

不客气的。六一节快乐！

梦油 发表于 2022-5-31 21:29

欣赏佳作，问候芙蓉。

醉美水芙蓉 发表于 2022-5-31 21:35

梦油 发表于 2022-5-31 21:29
欣赏佳作，问候芙蓉。

问候梦油老师！

马黑黑 发表于 2022-5-31 21:55

不懂我就问问是什么{:4_170:}

梦油 发表于 2022-6-1 09:35

醉美水芙蓉 发表于 2022-5-31 21:35
问候梦油老师！

祝醉美水芙蓉朋友容似儿童心不老,天天快乐无烦恼。

小辣椒 发表于 2022-6-1 17:55

欣赏水芙蓉的精美制作{:4_199:}

醉美水芙蓉 发表于 2022-6-1 20:50

小辣椒 发表于 2022-6-1 17:55
欣赏水芙蓉的精美制作

谢谢小辣椒支持！

查看完整版本: 你不懂