论坛 › 欢乐水吧 › 我是一条小河

醉美水芙蓉 发表于 2022-5-17 20:25

我是一条小河

本帖最后由 醉美水芙蓉 于 2022-5-17 20:30 编辑 <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/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="http://music.163.com/song/media/outer/url?id=238405.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: 0px;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 = " 《我是一条小河》郭欢";

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


<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 = 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-17 20:29

水芙蓉制作得真漂亮。可以再向左边移一点，摆正更加好看。

醉美水芙蓉 发表于 2022-5-17 20:30

加林森 发表于 2022-5-17 20:29
水芙蓉制作得真漂亮。可以再向左边移一点，摆正更加好看。

队长看见歌词同步吗？

加林森 发表于 2022-5-17 20:34

醉美水芙蓉 发表于 2022-5-17 20:30
队长看见歌词同步吗？

是同步的。你制作得真漂亮。现在摆正了就好多了。

大猫咪 发表于 2022-5-17 20:43

制作真漂亮，歌也好听！氺芙蓉真棒！

{:4_204:}{:4_199:}

醉美水芙蓉 发表于 2022-5-17 20:47

大猫咪 发表于 2022-5-17 20:43
制作真漂亮，歌也好听！氺芙蓉真棒！

可惜这个论坛只能听网易的！有点限制！

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

醉美水芙蓉 发表于 2022-5-17 20:47
可惜这个论坛只能听网易的！有点限制！

另外的也可以听见的啊，我发的几个歌曲都是从不同的地方找来的。

红影 发表于 2022-5-17 21:00

漂亮的制作，水芙蓉真棒{:4_187:}

醉美水芙蓉 发表于 2022-5-17 21:06

红影 发表于 2022-5-17 21:00
漂亮的制作，水芙蓉真棒

你的那个歌词同步我还没有制作出来呢？

醉美水芙蓉 发表于 2022-5-18 06:59

加林森 发表于 2022-5-17 20:50
另外的也可以听见的啊，我发的几个歌曲都是从不同的地方找来的。

队长给我介绍几个网站歌曲呗！

加林森 发表于 2022-5-18 08:42

醉美水芙蓉 发表于 2022-5-18 06:59
队长给我介绍几个网站歌曲呗！

好的。

加林森 发表于 2022-5-18 08:43

醉美水芙蓉 发表于 2022-5-18 06:59
队长给我介绍几个网站歌曲呗！

酷美网盘 免费下载 支持外链
https://www.kumeiwp.com/

joy127乐链网 - 免费上传音乐外链,免费生成背景音乐,微信活动音乐上传 - JOY127乐链网
https://www.joy127.com/

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

加林森 发表于 2022-5-18 08:43
酷美网盘 免费下载 支持外链
https://www.kumeiwp.com/



谢谢队长分享！

加林森 发表于 2022-5-18 20:44

醉美水芙蓉 发表于 2022-5-18 20:42
谢谢队长分享！

嗯嗯，你收到了我就放心了。

梦油 发表于 2022-5-18 20:54

醉美水芙蓉朋友出手不凡啊。

醉美水芙蓉 发表于 2022-5-18 21:09

梦油 发表于 2022-5-18 20:54
醉美水芙蓉朋友出手不凡啊。

梦油老师晚上好！瞎玩玩的！论坛高手众多，有点惭愧！

梦油 发表于 2022-5-19 11:07

醉美水芙蓉 发表于 2022-5-18 21:09
梦油老师晚上好！瞎玩玩的！论坛高手众多，有点惭愧！
醉美水芙蓉朋友早上好！你不就是高人吗。

查看完整版本: 我是一条小河