论坛 › 欢乐水吧 › 一生的飞翔

醉美水芙蓉 发表于 2022-7-18 21:17

一生的飞翔

本帖最后由 醉美水芙蓉 于 2022-7-18 21:44 编辑 <br /><br /><style>
.container0 {
margin: 50px -210PX;
width: 1024px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;
height: 620px;
border: 1px solid;
background: #333 url('https://s1.ax1x.com/2022/07/18/joIh2n.jpg') no-repeat center/cover; overflow: hidden;
position: relative;
}

.photo {
position: absolute;top:0px; left:0px;
width: 100%;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000;
height: 100%;transform:perspective(00px); background:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
   url("");
background-size: 0, cover;
box-sizing: border-box;preserve-3d;
animation: round 32s infinite;
opacity: 0;
}
@keyframes round {
0% {opacity: 1;transform: translateX(-503px)translateY(-100px) rotate(130deg) rotateY(-50deg) rotateX(100deg) scale(0.2);filter:hue-rotate(360deg)}


8% {opacity: 1;transform: perspective(600px) rotateY(45deg)scale(0.6)}
15% {opacity: 1;transform: perspective(600px) rotateY(-45deg)scale(0.6)}
18% {opacity: 0;transform: perspective(600px) rotateY(0deg)scale(1.8)}
}

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>


<div class="container0">
<img class='photo'src=" https://s1.ax1x.com/2022/07/18/joIvx1.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/18/joIbaF.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/18/joIHVU.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/18/joIj2R.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/18/joIXG9.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/18/joIIK0.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/18/joITbT.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/18/joIorV.jpg " alt="" />

<div class="container">
   
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=651042&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="items1"style="transform: scale(.55);position: absolute;top:-130px; left:750px;z-index: 70;">
<div class="img_border" id="aplay" style="width: 150px; height: 150px;background: url(https://s1.ax1x.com/2022/07/18/joIorV.jpg)-30px 0px/160% 100%;position: absolute;top:70px; left:40px;z-index: 20;border-radius:50%;border:85px solid #800000; box-shadow: 0px 0px 5px #ffffff;"></div><P id="picBtn" class=""style="width: 450px; height: 450px;position: absolute;top:-30px; left:0px;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">
.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:0px;
    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 = `齐旦布 - 一生的飞翔
作词：余启翔
作曲：绍兵
编曲：引子
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('https://s1.ax1x.com/2022/07/18/jo4rRI.png')0 0/100% 100%");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('https://s1.ax1x.com/2022/07/18/jo4rRI.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-7-18 21:38

真是考我电脑啊。水芙蓉高产啊。{:4_190:}

醉美水芙蓉 发表于 2022-7-18 21:44

加林森 发表于 2022-7-18 21:38
真是考我电脑啊。水芙蓉高产啊。

队长能够看到吗？

马黑黑 发表于 2022-7-18 21:50

看看要飞去哪里

加林森 发表于 2022-7-18 21:52

醉美水芙蓉 发表于 2022-7-18 21:44
队长能够看到吗？

可以看见的。

醉美水芙蓉 发表于 2022-7-18 22:06

马黑黑 发表于 2022-7-18 21:50
看看要飞去哪里

飞到花潮跟黑黑老师学代码呀！哈哈！

马黑黑 发表于 2022-7-18 22:20

醉美水芙蓉 发表于 2022-7-18 22:06
飞到花潮跟黑黑老师学代码呀！哈哈！

{:5_108:}

红影 发表于 2022-7-18 22:23

美人们笑吟吟的，水芙蓉的制作真漂亮{:4_199:}

醉美水芙蓉 发表于 2022-7-19 06:34

红影 发表于 2022-7-18 22:23
美人们笑吟吟的，水芙蓉的制作真漂亮

红影美女早上好！

浣溪沙 发表于 2022-7-19 07:57

醉美水芙蓉好制作{:4_199:}{:4_199:}{:4_199:}

樵歌 发表于 2022-7-19 09:59

风景绝美，菇凉绝美，歌声绝美，创作绝美！

樵歌 发表于 2022-7-19 10:01

醉美水芙蓉 发表于 2022-7-18 22:06
飞到花潮跟黑黑老师学代码呀！哈哈！

回得真好，一下子把黑黑美翻了{:4_358:}

醉美水芙蓉 发表于 2022-7-19 11:44

浣溪沙 发表于 2022-7-19 07:57
醉美水芙蓉好制作

谢谢朋友支持！

醉美水芙蓉 发表于 2022-7-19 11:44

樵歌 发表于 2022-7-19 09:59
风景绝美，菇凉绝美，歌声绝美，创作绝美！

谢谢樵歌欣赏支持！

红影 发表于 2022-7-19 17:28

醉美水芙蓉 发表于 2022-7-19 06:34
红影美女早上好！

水芙蓉那么早啊，今天外出了，回复迟了。问声下午好{:4_204:}

樵歌 发表于 2022-7-19 22:02

醉美水芙蓉 发表于 2022-7-19 11:44
谢谢樵歌欣赏支持！

美的享受呢{:4_174:}

查看完整版本: 一生的飞翔