午老虎 发表于 2022-11-24 08:32

半个月亮爬上来

<div class="t_fsz">
<div style="z-index: 127;width: 1000px; height: 620px; margin-top:30px; margin-left:-30px;box-shadow: 0px 0px 0px 2px #cccccc,
0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background: url(https://s1.ax1x.com/2022/11/21/zlVcvV.jpg)0

0/40% 50%,url(http://tuku.link/imgs/2022/07/95a9798fd03648ba.png)0 0/100% 100%; text-align: center;">
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/2ca4fbdf745a24872f496ed9110efccb.jpg" alt="" />
<img class='photo'src="https://s4.ax1x.com/2022/02/24/bPbv8K.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/6f8329b18722c4537fa15b791c90588c.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/9a4b8bcd002ae1805be0b36ed3c0e2cb.jpg" alt="" />
<img class='photo'src="https://s4.ax1x.com/2022/02/24/bPbjC6.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/2e5fc2a1513b9d4eca62cc36e0325a6a.jpg" alt="" />
<img class='photo'src="http://pan.yinhuabbs.cn/view.php/fddd66c865fab99390c81124f3abb2f0.jpg" alt="" />
<img class='photo'src=http://tuku.link/imgs/2022/07/95a9798fd03648ba.p" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://url.amp3a.com/kuwo.php/56118322.mp3" controls loop

style="width: 0%; height: 0%;z-index: 1;"></audio>
      <div class="btn">
         <img src="http://www.yinhuabbs.cn/data/attachment/forum/202211/29/180133gcfdttyynztytekk.gif"

id="playpause"style="position:absolute;top:-35px;left:35px;width:150px;height:100px;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: 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: 1;clip-path:circle(33% at 0% 30%);
-webkit-transform:translate(0%,0%)scale(1);}

8% {
opacity: 1;clip-path:circle(33% at 50% 50%);
-webkit-transform:translate(0%,0%)}
10% {
opacity: 1;clip-path: circle(70.7% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
15% {
opacity: 0;clip-path: circle(70.7% at 50% 50%);
-webkit-transform:translate(0%,0%)scale(1);}
}
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:0px;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: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: 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:1100px;height:620px;margin:0px ;position: absolute;top:0px;left:00px;}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1100px; height: 620px;
    z-index: 13;position: absolute;
   top:-500px;
    left: 0px;
animation: rotating 0.5s linear infinite;}
@keyframes rotating {
0%{opacity: 1;background: linear-gradient(0deg, rgba(251, 81, 81, 0.33) 13%,rgba(106, 80, 240, 0.07) 47%,rgba(65, 185, 41, 0.42)

85%);}
50% {opacity: 1;background: linear-gradient(45deg, rgba(114, 251, 81, 0.33) 13%,rgba(240, 184, 80, 0.05) 47%,rgba(185, 41, 45,

0.42) 87%);}
100%{opacity: 1;background: linear-gradient(90deg, rgba(251, 81, 81, 0.33) 13%,rgba(80, 240, 215, 0.11) 47%,rgba(26, 77, 251,

0.42) 87%);}
}
</style>
<style type="text/css">.items{ animation: slider 0.26s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
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 type="text/javascript">
<font color="#ff0000" face="隶书" size="6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《半个月亮爬上来》黑鸭子组合
                </font><br />

("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

蓝魔 发表于 2022-11-24 23:47

欣赏一下，谢谢。

非常开心 发表于 2022-11-25 19:48

欣赏收藏老师新作 好看又好听

澜天 发表于 2022-11-25 20:46

我很喜欢梦之旅的歌
和声很好听

相约爱晚亭 发表于 2022-11-26 13:48

帖子很漂亮！欣赏！希望老师尊重LRC歌词原创，直接取用应标明原创出处。

午老虎 发表于 2022-11-26 15:57

相约爱晚亭 发表于 2022-11-26 13:48
帖子很漂亮！欣赏！希望老师尊重LRC歌词原创，直接取用应标明原创出处。

谢谢老师了

相约爱晚亭 发表于 2022-11-29 15:23

午老虎 发表于 2022-11-26 15:57
谢谢老师了

帖子中LRC歌词制作应改为相约爱晚亭，这才是尊重原创。

午老虎 发表于 2022-11-29 16:47

相约爱晚亭 发表于 2022-11-29 15:23
帖子中LRC歌词制作应改为相约爱晚亭，这才是尊重原创。
我 重新制作一个，不与你的相同了

相约爱晚亭 发表于 2022-11-29 23:03

午老虎 发表于 2022-11-29 16:47
我 重新制作一个，不与你的相同了

很好！支持原创！

午老虎 发表于 2022-12-5 17:00

蓝魔 发表于 2022-11-24 23:47
欣赏一下，谢谢。

谢谢老师了
页: [1] 2
查看完整版本: 半个月亮爬上来