论坛 › 欢乐水吧 › 泉水不断歌不休

醉美水芙蓉 发表于 2022-5-22 09:13

泉水不断歌不休

本帖最后由 醉美水芙蓉 于 2022-5-22 09:13 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f"<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: linear-gradient(0deg, #000080, #003300, #222222, #000000); text-align: center;">
<img class='photo'   style="background: url(https://www.tupianzj.com/uploads/220215/37-220215143T6136.jpg)0 0px/100% 250%;"/>
<img class='photo'style="background: url( )0 0px/16.7% 50%;" />
<img class='photo' style="background:url(https://www.tupianzj.com/uploads/220210/37-220210092322320.jpg)0 0px/33.3% 100%;" />
<img class='photo'style="background: url(https://www.tupianzj.com/uploads/211117/37-21111F92P3930.jpg )0 0px/100% 300%;" />
<img class='photo' style="background: url(https://www.tupianzj.com/uploads/211101/37-211101095630945.jpg )0 0px/33.3% 100%;"/>
<img class='photo'style="background: url(https://www.tupianzj.com/uploads/210721/37-210H11000342R.jpg )0 0px/100% 250%;"/>
<img class='photo'style="background: url(https://www.tupianzj.com/uploads/210624/37-2106241G135339.jpg )0 0px/16.7% 50%;" />
<img class='photo' style="background: url(https://www.tupianzj.com/uploads/210615/37-210615105540X4.jpg )0 0px/100% 250%;" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=215214083&.mp3" controls loop style="width: 0%;

height: 0%;z-index: 1;"></audio>
      <div class="btn">
      <img src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png"

id="playpause"style="position:absolute;top:33px;left:35px;width:40px;height:40px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);z-index: 600;"/>
      
      </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: 1000px;
height: 600px;
position: absolute;top:0px; left:0px;
filter:contrast(150%)brightness(80%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {0% {
opacity: 0;clip-path:polygon(50% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 50%, 0 50%, 50% 50%, 50% 0);
-webkit-transform:translate(0%,0%)scale(1);}
2% {
opacity: 1;
clip-path:polygon(50% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 50%, 0 50%, 50% 50%, 50% 0);}

10% {
opacity: 1;background-position: 0% -150%;clip-path: polygon(75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%, 50% 0);
}
15% {
opacity: 1;background-position: 0% -150%;clip-path: polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
}

20% {
opacity: 0;background-position: 0% -150%;clip-path:polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0);
-webkit-transform:translate(0%,0%)scale(1);}
}

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;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;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:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/10%10%, url(http://pan.yinhuabbs.cn/view.php/39a2729dcebff184040ec8067dae2925.png)0 0px/100% 100%;z-index: 13;position: absolute;
   top:-500px;
    left: 0px;
animation: rotating 0.022s linear infinite;}
@keyframes rotating {0% {opacity: 0;transform: scale(1);}
50% {opacity: 0.5;transform: scale(1);filter:hue-rotate(360deg)contrast(150%);}
51% {opacity: 0.6;transform:scale(1.8);}
52% {opacity: 0;transform:scale(1);filter:hue-rotate(0deg)contrast(100%)brightness(850%);}}
</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 = `云朵、韩冰 - 泉水不断歌不休
作词：魏庆凤
作曲：韩冰
编曲：韩冰
制作人：韩冰、韩嘉楠
巴乌：韩冰
口弦：韩冰
水节奏：韩冰
古筝：丁雪儿
和音：韩冰、韩嘉楠、张燕
录音：韩冰
混音：周晓明
录音棚：梦飞船studio
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 = 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 img = document.getElementById("playpause");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/35b530b3868a28afe2b97da37543395f.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png";
}, false);

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

马黑黑 发表于 2022-5-22 09:27

分用完了，木有分给了。赞个。

醉美水芙蓉 发表于 2022-5-22 09:33

马黑黑 发表于 2022-5-22 09:27
分用完了，木有分给了。赞个。

加不加分无所谓！只要每天开心就好！

马黑黑 发表于 2022-5-22 09:41

醉美水芙蓉 发表于 2022-5-22 09:33
加不加分无所谓！只要每天开心就好！

天天开心

红影 发表于 2022-5-22 11:03

水芙蓉的图片轮转方式和歌词同步制作真棒，很赞{:4_199:}

加林森 发表于 2022-5-22 11:07

没有分了，无法加分了。
水芙蓉制作得真漂亮，赞！

醉美水芙蓉 发表于 2022-5-22 12:12

红影 发表于 2022-5-22 11:03
水芙蓉的图片轮转方式和歌词同步制作真棒，很赞

谢谢红影美女精彩点评！

醉美水芙蓉 发表于 2022-5-22 12:12

加林森 发表于 2022-5-22 11:07
没有分了，无法加分了。
水芙蓉制作得真漂亮，赞！

加分无所谓！只要每天开心就好！

加林森 发表于 2022-5-22 12:15

醉美水芙蓉 发表于 2022-5-22 12:12
加分无所谓！只要每天开心就好！

好的好的，你开心就行！

查看完整版本: 泉水不断歌不休