论坛 › 欢乐水吧 › 南归雁

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

南归雁

本帖最后由 醉美水芙蓉 于 2022-7-17 18:43 编辑 <br /><br /><meta charset="utf-8">
<style>
.container0 {
margin: 50px -200px;;
width: 1024px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;
height: 620px;
border: 1px solid;
background: #333 url('http://pan.yinhuabbs.cn/view.php/044b174acb60712e6aa040353d2e42ac.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);}


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/15/j4Y2Oe.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/15/j4YgyD.jpg" alt="" />
<img class='photo'src=" https://s1.ax1x.com/2022/07/15/j4Y6SK.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/15/j4YsW6.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/15/j4YrJx.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/15/j4YDF1.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/15/j4Yww9.jpg" alt="" />
<img class='photo'src="https://s1.ax1x.com/2022/07/15/j4YtQU.jpg" alt="" />

<div class="container">
      <div class="btn">
      <span id="bf"onclick="bf();"style="width: 120px; height: 120px;z-index: 550;position: absolute;top:-60px; left:880px;"></span>
      <span id="bf"onclick="rbf();"></span>
      </div>
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=227540941&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="img_border"><img src="http://pan.yinhuabbs.cn/view.php/caef5d12b92eaa7fad771e288f5cb7c9.png" id="aplay"style="width: 100%; height: 100%;z-index: 550;" ></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:-70px; 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: 30px;
    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;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:120px;height:120px;margin:0px ;position: absolute;top:-60px; left:880px;z-index: 150;}
.container .img_border #aplay{ }
.container .z360z{-webkit-animation:rotating 10s linear infinite;animation:rotating 10s linear infinite}@-webkit-keyframes rotating{0% {transform: rotateX(0deg) rotateY(0deg)
rotateZ(0deg)scale(0.2);}
50% {transform: rotateX(0deg) rotateY(0deg) rotateZ(-30deg)scale(2.5);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)scale(2.5);}
}
.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>
      function rbf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            audio.currentTime = 0;
            audio.play();
            bf.innerText="";
      }

      function bf() {
            var audio = document.getElementById('MusicPlayer');
            var bf=document.getElementById("bf");
            if (audio !== null) {
                if (audio.paused) {
                  audio.play(); //audio.play();// 这个就是播放
                  bf.innerText="";
                } else {
                  audio.pause(); // 这个就是暂停
                  bf.innerText="";
                }
            }
      }
    </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-17 19:09

亚伦风格经久不衰。赞。

加林森 发表于 2022-7-17 19:17

都是美女显示啊。

绿叶清舟 发表于 2022-7-17 19:25

制作漂亮{:4_199:}

小辣椒 发表于 2022-7-17 19:55

这个音乐好像没有出来，我挖出来也是没有听到

https://www.qqmc.com/up/kwlink.php?id=227540941&.mp3

是不是我的网速慢？

红影 发表于 2022-7-17 20:44

山水间的美人，水芙蓉的制作真漂亮{:4_187:}

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

本帖最后由 醉美水芙蓉 于 2022-7-17 21:23 编辑

小辣椒 发表于 2022-7-17 19:55
这个音乐好像没有出来，我挖出来也是没有听到



好不容易，找了个可以在花潮播放的，从现在开始失效了！

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

马黑黑 发表于 2022-7-17 19:09
亚伦风格经久不衰。赞。

黑黑老师晚上好！

马黑黑 发表于 2022-7-17 21:24

醉美水芙蓉 发表于 2022-7-17 21:23
黑黑老师晚上好！

{:4_187:}

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

加林森 发表于 2022-7-17 19:17
都是美女显示啊。

队长晚上好！

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

红影 发表于 2022-7-17 20:44
山水间的美人，水芙蓉的制作真漂亮

谢谢红影美女欣赏支持！

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

绿叶清舟 发表于 2022-7-17 19:25
制作漂亮

谢谢清舟美女支持！

加林森 发表于 2022-7-17 21:29

醉美水芙蓉 发表于 2022-7-17 21:24
队长晚上好！

怎么没有音乐呢？

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

加林森 发表于 2022-7-17 21:29
怎么没有音乐呢？

一开始有的，现在开始失效了，好不容易找到一个可以在花潮播放的，又失效了！

加林森 发表于 2022-7-17 21:39

醉美水芙蓉 发表于 2022-7-17 21:33
一开始有的，现在开始失效了，好不容易找到一个可以在花潮播放的，又失效了！

不应该啊。是不是代码有什么问题了？

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

加林森 发表于 2022-7-17 21:39
不应该啊。是不是代码有什么问题了？

是歌曲外链今天开始失效了，我都用了好久了！

加林森 发表于 2022-7-17 21:53

醉美水芙蓉 发表于 2022-7-17 21:41
是歌曲外链今天开始失效了，我都用了好久了！

另外用一个吧。

红影 发表于 2022-7-18 16:41

醉美水芙蓉 发表于 2022-7-17 21:24
谢谢红影美女欣赏支持！

问好岁芙蓉，真是心灵手巧呢{:4_187:}

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

加林森 发表于 2022-7-17 21:29
怎么没有音乐呢？

队长今天有音乐了！

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

小辣椒 发表于 2022-7-17 19:55
这个音乐好像没有出来，我挖出来也是没有听到




辣椒美哦女今天终于有音乐了！

查看完整版本: 南归雁