论坛 › 欢乐水吧 › 太想念(DJCandy版)

醉美水芙蓉 发表于 2022-5-19 20:15

太想念(DJCandy版)

本帖最后由 醉美水芙蓉 于 2022-5-19 20:14 编辑 <br /><br /><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/19/034b9f4a6693be89ed2123295e22a36b.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="http://chuangshicdn.data.mvbox.cn/music/yc/22/05/19/22051920104211404995.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 = " 太想念(DJCandy版) - 彭筝 ";

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


<script >var lrc = `太想念(DJCandy版) - 彭筝
演唱：彭筝
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 = 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-19 20:25

制作漂亮，赞！{:4_199:}

醉美水芙蓉 发表于 2022-5-19 20:26

加林森 发表于 2022-5-19 20:25
制作漂亮，赞！

队长欣赏愉快！

加林森 发表于 2022-5-19 20:27

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

挺好的，都是大美女。

小辣椒 发表于 2022-5-19 20:58

水芙蓉这类制作不少的{:4_199:}

醉美水芙蓉 发表于 2022-5-19 21:00

小辣椒 发表于 2022-5-19 20:58
水芙蓉这类制作不少的

这个简单，谁都会，你的太难了，我笨没有学会！

红影 发表于 2022-5-19 21:56

这个好像和前面有一个帖子是相同模式的吧，那个《我是一条小河》{:4_187:}

马黑黑 发表于 2022-5-19 22:43

{:4_190:}

醉美水芙蓉 发表于 2022-5-20 07:04

红影 发表于 2022-5-19 21:56
这个好像和前面有一个帖子是相同模式的吧，那个《我是一条小河》

红影美女你说的对！

查看完整版本: 太想念(DJCandy版)