论坛 › 动画音画 › 新版孟姜女

有声有色 发表于 2022-8-6 13:27

新版孟姜女

本帖最后由 有声有色 于 2025-9-14 15:16 编辑 <br /><br /><div style="z-index: 127;width: 950px; height: 620px; margin-top:30px; margin-left:-150px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213462674835656.gif)0 0/40% 100%,url(https://pic1.imgdb.cn/item/667cf18cd9c307b7e906400d.png)0 0/100% 100%;text-align: center;">

<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://link.hhtjim.com/kw/2755971.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
      <div class="btn">
         <img src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png" id="playpause"style="position:absolute;top:-35px;left:35px;width:150px;height:150px;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: 50%;
height: 50%;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 5px #880000;
position: absolute;top:30px; left:250px;
filter:contrast(120%)brightness(100%);
animation: round 48s infinite;
opacity: 1;}
@keyframes round {0% {opacity:1;transform:perspective(700px) translate(-150%,-10%)scale(1)rotateX(0deg)rotateY(0deg);filter:hue-rotate(0deg)contrast(140%)brightness(100%);}

100% { opacity: 1;transform:perspective(700px) translate(200%,70%)scale(1)rotateX(0deg)rotateY(40deg);filter:hue-rotate(0deg)contrast(100%)brightness(100%);}
}

img:nth-child(1) {animation-delay: 42s;}
img:nth-child(2) {animation-delay: 36s;}
img:nth-child(3) {animation-delay: 30s;}
img:nth-child(4) {animation-delay: 24s;}
img:nth-child(5) {animation-delay: 18s;}
img:nth-child(6) {animation-delay: 12s;}
img:nth-child(7) {animation-delay: 6s;}
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.05s linear infinite;}
@keyframes rotating {
0%{opacity: 1;background: linear-gradient(6deg, 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(6deg, 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(6deg, 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 = `
春季里来是新春，
家家户户点红灯。
别人家夫妻团圆聚，
孟姜女丈夫去造长城。
夏季里来热难当，
蚊子叮在奴身上。
宁愿叮奴千口血，
莫叮我夫万杞良。
秋季里来菊花黄，
丈夫一去信渺茫。
终朝思夫千万遍，
深夜不宿我泪两行。
冬季里来雪花飞，
孟姜女千里来送寒衣，
途中受尽千般苦，
但愿夫妻要两相依。

`;
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="http://image.hnol.net/c/2022-05/16/14/20220516140228811-5769293.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-05/16/14/2022051614143711-5769293.png";
}, false);
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="items";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>

红影 发表于 2022-8-6 13:39

制作很漂亮，听不到音乐？

有声有色 发表于 2022-8-6 13:45

红影 发表于 2022-8-6 13:39
制作很漂亮，听不到音乐？

这个做的有歌词的 但是发上来没声音也没歌词，要找找原因了，

樵歌 发表于 2022-8-6 18:28

很好听{:4_190:}

红影 发表于 2022-8-6 21:33

有声有色 发表于 2022-8-6 13:45
这个做的有歌词的 但是发上来没声音也没歌词，要找找原因了，

酷我的音乐地址不给外链么，但是单独去听能听到的啊。

有声有色 发表于 2022-8-7 08:14

樵歌 发表于 2022-8-6 18:28
很好听

谢谢支持，声音有了，但是歌词还是没出来

有声有色 发表于 2022-8-7 08:17

红影 发表于 2022-8-6 21:33
酷我的音乐地址不给外链么，但是单独去听能听到的啊。

酷我通过外链软件有MP3网址

有声有色 发表于 2022-8-7 09:27

红影 发表于 2022-8-6 21:33
酷我的音乐地址不给外链么，但是单独去听能听到的啊。

昨晚想了想 总算把歌词显示出来了

红影 发表于 2022-8-7 22:08

有声有色 发表于 2022-8-7 08:17
酷我通过外链软件有MP3网址

可能我电脑原因，还是听不到，所以也看不到歌词了呢。

有声有色 发表于 2022-8-8 07:54

红影 发表于 2022-8-7 22:08
可能我电脑原因，还是听不到，所以也看不到歌词了呢。

我这里现在都能显示了

红影 发表于 2022-8-8 22:07

有声有色 发表于 2022-8-8 07:54
我这里现在都能显示了

我这里还是不行。

有声有色 发表于 2022-8-9 07:38

红影 发表于 2022-8-8 22:07
我这里还是不行。

？？？？？

红影 发表于 2022-8-9 16:59

有声有色 发表于 2022-8-9 07:38
？？？？？

我也不知道怎么回事，真有可能是我自己电脑的问题。

有声有色 发表于 2022-8-10 08:04

红影 发表于 2022-8-9 16:59
我也不知道怎么回事，真有可能是我自己电脑的问题。

看了这组代码有问题 我在研究一下

红影 发表于 2022-8-10 18:17

有声有色 发表于 2022-8-10 08:04
看了这组代码有问题 我在研究一下

不知道别人能不能听到，我这里好像不行。

有声有色 发表于 2022-8-11 08:00

红影 发表于 2022-8-10 18:17
不知道别人能不能听到，我这里好像不行。

在这版块里有个叫亚伦影音工作室，你去看看能听到他的音画声音吗

红影 发表于 2022-8-11 21:47

有声有色 发表于 2022-8-11 08:00
在这版块里有个叫亚伦影音工作室，你去看看能听到他的音画声音吗

能听到啊，不知道为什么你的帖子有的听不到。

查看完整版本: 新版孟姜女