论坛 › 欢乐水吧 › 情歌唱响在草原

醉美水芙蓉 发表于 2022-5-31 21:23

情歌唱响在草原

<div class="t_fsz">
<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:-200px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #008080; overflow: hidden;transform:rotate(0deg);background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/50%50%,linear-gradient(0deg, #000080, #003300, #880000, #00f000); text-align: center;">
<img class='photo'src="https://s1.ax1x.com/2022/05/30/X3i57T.png" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/228e32e04f05e4595cd69b58a4677697.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/a19ae2b4d7235801794753e24a6ecee0.jpg " alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/621daa74a539243e3d68c931dffc9388.jpg " alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/f00e773c1357d9fb26a630b53296ea27.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/2b9fcf52d1474bd955a1695b57e0f7c2.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/a7afc751e7c8cef86a6b7f5e51b9f123.jpg" alt="" />
<img class='photo'src="https://img-baofun.zhhainiao.com/fs/75a003dcd09dc30032c278b2ddfe87bb.jpg " alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src=" https://www.qqmc.com/up/kwlink.php?id=218908066&.mp3" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
      <div class="btn">
      <span id="bf"onclick="bf();"style="width: 980px; height: 120px;z-index: 300;position: absolute;top:-70px; left:80px;"></span>
      <span id="bf"onclick="rbf();"></span>
      </div>
<div class="img_border"><imgid="aplay"style="width: 100%; height: 100%;z-index: 110;clip-path: circle(50% at 50% 50%);background:url(http://pan.yinhuabbs.cn/view.php/a93202bcdcd7cc95412d1595f9ec0dba.png)0 0/100% 100%, url(https://img-baofun.zhhainiao.com/fs/c2cdb4cb10231e3ebf1adba625cc59f5.jpg)0px 0px/100% 100%;" ></div>
   <div class="items" >
<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(130%)brightness(100%);
animation: round 46s 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);
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;clip-path:polygon(75% 25%, 100% 50%, 75% 75%, 50% 100%, 25% 75%, 0 50%, 25% 25%, 50% 0);
-webkit-transform:translate(0%,0%)scale(1);}
15% {
opacity: 1;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);}

20% {
opacity: 0;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(2);}
}


img:nth-child(8) {animation-delay: 40s;}
img:nth-child(7) {animation-delay: 34s;}
img:nth-child(6) {animation-delay: 28s;}
img:nth-child(5) {animation-delay: 22s;}
img:nth-child(4) {animation-delay: 16s;}
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:-30px;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: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: 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:120px;height:120px;margin:0px ;position: absolute;top:-20px;left:870px;transform: scale(1,1);transform: rotateX(-45deg) rotateY(15deg) rotateZ(0deg);border-radius:50%;}
.container .img_border #aplay{display:block;border:2px solid #ffffff;border-radius:50%; }
.container .z360z{animation:rotating 10s linear infinite;}@keyframes rotating{to {transform: rotate(360deg);}}

</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 = ` 孟杨 - 情歌唱响在草原 (鬼步舞曲)
作词：康武军
作曲：康武军
编曲：康武军
后期：瀚海绅侯
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>
      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>

<br><br><br><br><br>

马黑黑 发表于 2022-5-31 21:27

精美的作品

醉美水芙蓉 发表于 2022-5-31 21:34

马黑黑 发表于 2022-5-31 21:27
精美的作品

黑黑老师晚上好！

红影 发表于 2022-5-31 21:44

制作很漂亮，给水芙蓉点赞。{:4_187:}
代码貌似有点小问题，论坛版面有点变形了呢。

马黑黑 发表于 2022-5-31 21:51

醉美水芙蓉 发表于 2022-5-31 21:34
黑黑老师晚上好！

晚上好，节日好

醉美水芙蓉 发表于 2022-5-31 21:58

马黑黑 发表于 2022-5-31 21:27
精美的作品

黑黑老师看看代码哪里出了问题？不会改了！@马黑黑

加林森 发表于 2022-5-31 22:19

水芙蓉节日快乐。提个建议，大草原你就表现大大草的图片好吗？

马黑黑 发表于 2022-5-31 22:37

醉美水芙蓉 发表于 2022-5-31 21:58
黑黑老师看看代码哪里出了问题？不会改了！@马黑黑

根据控制台给出的提示，没有什么问题

醉美水芙蓉 发表于 2022-6-1 06:43

加林森 发表于 2022-5-31 22:19
水芙蓉节日快乐。提个建议，大草原你就表现大大草的图片好吗？

队长说得对，偷懒做了一张图片！

加林森 发表于 2022-6-1 08:21

醉美水芙蓉 发表于 2022-6-1 06:43
队长说得对，偷懒做了一张图片！

嗯嗯

小辣椒 发表于 2022-6-1 18:28

代码没有错误，结束码你多加了不需要的。。。。

醉美水芙蓉 发表于 2022-6-1 20:49

小辣椒 发表于 2022-6-1 18:28
代码没有错误，结束码你多加了不需要的。。。。

谢谢辣椒美女！

查看完整版本: 情歌唱响在草原