论坛 › 欢乐水吧 › 人生的列车

醉美水芙蓉 发表于 2022-10-6 21:36

人生的列车

本帖最后由 醉美水芙蓉 于 2022-10-6 21:36 编辑 <br /><br /><div style="z-index: 27;width: 1024px; height: 600px; margin-top:30px; margin-left:-220px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,url(http://chuangshicdn.data.mvbox.cn/album/22/06/22/22062215105035713226.gif)0 0/100%100%; text-align: center;">
<img class='photo'src="https://s1.ax1x.com/2022/10/06/x1bt0I.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/06/x1bYnA.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/06/x1b86H.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/06/x1b31e.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/06/x1b1pD.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/06/x1bQfO.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/06/x1bMtK.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/10/06/x1bnTx.jpg" alt="" />


<div class="container">
   <audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=238942813&.mp3&type=convert_url&response=res" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="items1"style="transform: scale(0.6);position: absolute;top:-500px; left:700px;z-index: 70;">
<div class="img_border" id="aplay" style="width: 200px; height: 200px; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313224507420082.gif)0 0/100%100%,url(https://img-baofun.zhhainiao.com/fs/506465753f8985a68964e9e93d2a8141.jpg)-30px 0px/170% 100%;position: absolute;top:130px; left:-950px;z-index: 20;border-radius:50%;border:25px solid #800000; box-shadow: 0px 0px 2px 0.2px #eeeeee, 0px 0px 0px 45px #800000, 0px 0px 5px 46px #eeeeee"></div><P id="picBtn" class=""style="width: 400px; height: 400px;position: absolute;top:0px; left:-950px;background: url('https://s1.ax1x.com/2022/07/18/jo4wIH.png') 0 0/100% 100%;z-index: 20;"></p></div>

   <div class="items" >
<divclass="lrc">
      <ul id="ullrc">
         </ul>
      </div>
</div>
</div>

<style type="text/css">
.photo {width: 100%;
height: 100%;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 5px #880000;
position: absolute;top:0px; left:0px;
filter:hue-rotate(0deg)contrast(120%)brightness(100%);
animation: round 32s infinite;
opacity: 0;}
@keyframes round {0% {
opacity: 0;clip-path: polygon(0 50%, 50% 50%, 50% 0, 50% 0, 50% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 100%, 50% 50%, 0 50%);

-webkit-transform:translate(0%,0%)scale(1);}
2% {
opacity: 1;clip-path:polygon(0 50%, 50% 50%, 50% 0, 50% 0, 50% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 100%, 50% 50%, 0 50%);
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 0.8;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);

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

-webkit-transform:translate(0%,0%)scale(2);}
}



img:nth-child(1) {animation-delay: 28s;}
img:nth-child(2) {animation-delay: 24s;}
img:nth-child(3) {animation-delay: 20s;}
img:nth-child(4) {animation-delay: 16s;}
img:nth-child(5) {animation-delay: 12s;}
img:nth-child(6) {animation-delay: 8s;}
img:nth-child(7) {animation-delay: 4s;}
img:nth-child(8) {animation-delay: 0s;}
</style >
<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;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:400px;height:400px;margin:0px ;position: absolute;text-align: center;}
.container .img_border #aplay{ }
.container .z360z{ width:400px;height:400px;animation: rot 10s linear infinite;}@keyframes rot{0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);}
}
.audio{
    z-index: 1;
    bottom: 0;
    opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
    opacity: 0;
}
</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 = `蔷薇团长 - 人生的列车 (DJ默涵)
作词：张凤敏
作曲：刘艺新
编曲：DJ 默涵
合声：凌菲
制作人：笑天
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');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://s1.ax1x.com/2022/07/18/jo4wIH.png')0 0/100% 100%") : (mu.pause(), btn.style.background="url('http://pan.yinhuabbs.cn/view.php/cf946a6cf4e140cd29f4e757fd291bec.png')0 0/100% 100%");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('http://pan.yinhuabbs.cn/view.php/cf946a6cf4e140cd29f4e757fd291bec.png')0 0/100% 100%";
})


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

闲言不语 发表于 2022-10-6 21:56

制作的好美！{:4_199:}

醉美水芙蓉 发表于 2022-10-6 21:56

闲言不语 发表于 2022-10-6 21:56
制作的好美！

不语老师晚上好！

闲言不语 发表于 2022-10-6 21:58

这源文件很大吗，用的千兆光纤，评分都卡顿

闲言不语 发表于 2022-10-6 21:59

醉美水芙蓉 发表于 2022-10-6 21:56
不语老师晚上好！

美女晚上好

红影 发表于 2022-10-6 22:14

漂亮，水芙蓉的帖子都好美的呢{:4_187:}

醉美水芙蓉 发表于 2022-10-6 22:46

闲言不语 发表于 2022-10-6 21:58
这源文件很大吗，用的千兆光纤，评分都卡顿

是的！特效有点多！

醉美水芙蓉 发表于 2022-10-6 22:47

红影 发表于 2022-10-6 22:14
漂亮，水芙蓉的帖子都好美的呢

红影美女晚上好！

马黑黑 发表于 2022-10-6 23:15

欣赏佳作

红影 发表于 2022-10-6 23:39

醉美水芙蓉 发表于 2022-10-6 22:47
红影美女晚上好！

这个制作真漂亮，水芙蓉美女很赞{:4_187:}

加林森 发表于 2022-10-7 00:08

挺好的。

醉美水芙蓉 发表于 2022-10-7 06:58

加林森 发表于 2022-10-7 00:08
挺好的。

问候队长！早上好！

加林森 发表于 2022-10-7 10:02

醉美水芙蓉 发表于 2022-10-7 06:58
问候队长！早上好！

水芙蓉上午好！

醉美水芙蓉 发表于 2022-10-7 22:24

马黑黑 发表于 2022-10-6 23:15
欣赏佳作

谢谢黑黑老师光临！

马黑黑 发表于 2022-10-7 22:39

醉美水芙蓉 发表于 2022-10-7 22:24
谢谢黑黑老师光临！

{:4_190:}

小辣椒 发表于 2022-10-7 23:38

美女，你这个我打开好卡，是不是图片很大？

小辣椒 发表于 2022-10-7 23:40

下载看了，图片不大啊，不晓得为什么了

刷新几次现在好了

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

查看完整版本: 人生的列车