论坛 › 动画音画 › 《烙馍情》演唱/葛冬梅

翁奕童苑 发表于 2022-7-2 09:43

《烙馍情》演唱/葛冬梅

本帖最后由 翁奕童苑 于 2022-7-2 15:26 编辑 <br /><br /><p></p>


<div style="z-index: 127;width: 960px; height: 600px; margin-top:20px; margin-left:-180px;box-shadow: 0px 0px 0px 2px #ffff00, 0px 0px 5px 8px #0000c6; overflow: hidden;border-radius:6%;transform:rotate(0deg);background: url(https://www.z4a.net/images/2022/06/23/dcdd2c9a-6fa7-4e69-857c-5c9a547c1d17-0-75322a96-e84e-4e03-b539-678fa5e7fe03.jpg)0 0/100%100%,linear-gradient(80deg, #000080, #003300, #ff0000, #00f000); text-align: center;">
<img class='photo'src="https://www.z4a.net/images/2022/07/02/10f044271412f1023.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/07/02/2e6dc2e0b79d7d832.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/07/02/4f2e275c8d643e7d6.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/07/02/56c11b3822c5ad152.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/07/02/62943591dd567cc49.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/07/02/781ad7ad742420f52.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/07/02/8ea28b263b77fdeec.jpg" alt="" />
<img class='photo'src="https://www.z4a.net/images/2022/07/02/3ec91a725dda03f69.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/up/kwlink.php?id=46673774" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
      <div class="btn">
       <img src="https://www.z4a.net/images/2022/06/23/123.gif" id="playpause" style="position:absolute;top: -20px;left:850px;width:100px;height:100px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0) drop-shadow(#000000 0 -1px0);z-index: 300;"/>
<div style="position: absolute; width: 513px; height: 136px; z-index: 2; left: -50px; top: -480px" id="layer3">
        <p align="center"><strong><font face="宋体" size="6" face="翁奕童苑" color="#ff0000">《烙馍情》</font></strong></p>
        <p align="center"><strong><font face="宋体" size="4" color="#ffffff">演唱/葛冬梅 编辑/翁奕童苑</font></strong></div>      
      </div>
<div class="img_border" id="aplay"></div>
   <div class="items" style="width: 980px; height: 120px;z-index: 200;position: absolute;top:0px; left:0px;">
<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 48s infinite;
opacity: 0;}
@keyframes round {6% {
    opacity: 1;}
10% {
opacity: 1;transform:translate(0%,0%)scale(1);
}
25% {
opacity: 0;transform:translate(0%,0%)scale(3);
}

}

img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
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:-20px;z-index: 50;}
.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: 200;
    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:50px;
    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: 42px;
    color: #ff0000;
    font-weight: }

/*光碟动画*/

.container .img_border #aplay{display:block; }


</style>

<script >var lrc = `《烙馍情》
词/孟庆武 曲/黄成功
演唱/葛冬梅
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>
         var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
        if (aud.paused) {
                aud.play();
        } else {
                aud.pause();
        }
}
aud.addEventListener("play", function (e) {
img.src="https://www.z4a.net/images/2022/06/23/123.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="https://www.z4a.net/images/2022/06/23/456.png";
}, false);

</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>
<div>&nbsp;</div>

翁奕童苑 发表于 2022-7-2 15:20

谢谢鼓励！

樵歌 发表于 2022-7-2 16:22

这馍馍看着就香。{:4_199:}

翁奕童苑 发表于 2022-7-2 16:55

樵歌 发表于 2022-7-2 16:22
这馍馍看着就香。

谢谢鼓励！

大猫咪 发表于 2022-7-7 20:22

欣赏学习童苑朋友好制作！真棒！{:4_204:}看得猫想吃{:4_189:} 问好！

{:4_204:}{:4_190:}

翁奕童苑 发表于 2022-7-7 20:48

大猫咪 发表于 2022-7-7 20:22
欣赏学习童苑朋友好制作！真棒！看得猫想吃   问好！

谢谢鼓励！

走过岁月 发表于 2022-7-8 13:53

欣赏支持

翁奕童苑 发表于 2022-7-8 13:54

走过岁月 发表于 2022-7-8 13:53
欣赏支持

谢谢鼓励！

查看完整版本: 《烙馍情》演唱/葛冬梅