论坛 › 动画音画 › 学习代码音画《骆驼沙漠》

老谟深虑 发表于 2023-4-2 16:23

学习代码音画《骆驼沙漠》

本帖最后由 老谟深虑 于 2023-4-3 19:01 编辑 <br /><br />
<div style="z-index: 27;width: 1024px; height: 600px; margin-top:30px; margin-left:-210px;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/14/22031417263445440463.gif)0 0/20%20%,url(http://chuangshicdn.data.mvbox.cn/album/22/06/22/22062215105035713226.gif)0 0/100%100%; text-align: center;">
<img class='photo'src="https://pic.imgdb.cn/item/64104ebeebf10e5d5334eadb.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64104ebeebf10e5d5334eb57.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64104ebeebf10e5d5334eb8a.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64104ebeebf10e5d5334ebef.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64104ebeebf10e5d5334ec28.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64104ee7ebf10e5d53356d60.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64104ee8ebf10e5d53356dfa.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64104ee8ebf10e5d53357086.jpg" alt="" />


<div class="container">
   <audio autoplay="" class="audio" id="MusicPlayer" src="https://music.163.com/song/media/outer/url?id=486814412.mp3&type=convert_url&response=res" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="items1"style="transform: scale(0.6);position: absolute;top:-500px; left:700px;z-index: 70;">
<div class="img_border" id="aplay" style="width: 200px; height: 200px; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/13/22031313224507420082.gif)0 0/100%100%,url(https://pic.imgdb.cn/item/64104ebeebf10e5d5334ebef.jpg)-30px 0px/170% 100%;position: absolute;top:130px; left:-950px;z-index: 20;border-radius:50%;border:25px solid #800000; box-shadow: 0px 0px 2px 0.2px #eeeeee, 0px 0px 0px 45px #800000, 0px 0px 5px 46px #eeeeee"></div><P id="picBtn" class=""style="width: 400px; height: 400px;position: absolute;top:0px; left:-950px;background: url('https://s1.ax1x.com/2022/07/18/jo4wIH.png') 0 0/100% 100%;z-index: 20;"></p></div>

   <div class="items" >
<divclass="lrc">
      <ul id="ullrc">
         </ul>
      </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: 0;clip-path: polygon(0 50%, 50% 50%, 50% 0, 50% 0, 50% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 100%, 50% 50%, 0 50%);

-webkit-transform:translate(0%,0%)scale(1);}
2% {
opacity: 1;clip-path:polygon(0 50%, 50% 50%, 50% 0, 50% 0, 50% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 100%, 50% 50%, 0 50%);
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 0.8;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);

-webkit-transform:translate(0%,0%)scale(1);}
18% {
opacity: 0;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);

-webkit-transform:translate(0%,0%)scale(2);}
}



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:-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:-30px; 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: 80px;
    line-height: 90px;
font-family:悟空大字库;
    font-size: 0px;
    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;
    font-weight: bold;
}
/*光碟动画*/
.container .img_border{display:inline-block;width:400px;height:400px;margin:0px ;position: absolute;text-align: center;}
.container .img_border #aplay{ }
.container .z360z{ width:400px;height:400px;animation: rot 10s linear infinite;}@keyframes rot{0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);}
}
.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 language="javascript">

var mu = document.getElementById('MusicPlayer');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
      mu.paused ? (mu.play(), btn.style.background="url('https://s1.ax1x.com/2022/07/18/jo4wIH.png')0 0/100% 100%") : (mu.pause(), btn.style.background="url('http://pan.yinhuabbs.cn/view.php/cf946a6cf4e140cd29f4e757fd291bec.png')0 0/100% 100%");
}

mu.addEventListener("ended", function(){
      btn.style.background="url('http://pan.yinhuabbs.cn/view.php/cf946a6cf4e140cd29f4e757fd291bec.png')0 0/100% 100%";
})


</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>

小辣椒 发表于 2023-4-2 16:32

欣赏老谟深虑的精彩制作{:4_187:}

小辣椒 发表于 2023-4-2 16:33

非常漂亮的特效，图片转换流畅，就是歌词不同步

马黑黑 发表于 2023-4-2 19:26

欣赏美帖

梦缘 发表于 2023-4-2 19:34

很美的分享，感谢分享精彩！{:4_171:}

红影 发表于 2023-4-2 23:42

图片轮转很有特色。图片和播放器都很漂亮。欣赏老谟深虑好帖{:4_187:}

庶民 发表于 2023-4-3 04:25

真的好好漂亮，美好了心情。

老谟深虑 发表于 2023-4-3 19:04

小辣椒 发表于 2023-4-2 16:32
欣赏老谟深虑的精彩制作

       谢谢老师的关注和支持，晚上好！

老谟深虑 发表于 2023-4-3 19:05

小辣椒 发表于 2023-4-2 16:33
非常漂亮的特效，图片转换流畅，就是歌词不同步

       我修改了，歌词已同步。

老谟深虑 发表于 2023-4-3 19:06

马黑黑 发表于 2023-4-2 19:26
欣赏美帖

       谢谢老师的欣赏支持，晚上好！

老谟深虑 发表于 2023-4-3 19:07

梦缘 发表于 2023-4-2 19:34
很美的分享，感谢分享精彩！

       谢谢老师的分享支持，问好！

老谟深虑 发表于 2023-4-3 19:08

红影 发表于 2023-4-2 23:42
图片轮转很有特色。图片和播放器都很漂亮。欣赏老谟深虑好帖

      谢谢老师的欣赏和鼓励，问好！

老谟深虑 发表于 2023-4-3 19:09

庶民 发表于 2023-4-3 04:25
真的好好漂亮，美好了心情。

       谢谢老乡的支持赏评，晚上好！

马黑黑 发表于 2023-4-3 19:09

老谟深虑 发表于 2023-4-3 19:06
谢谢老师的欣赏支持，晚上好！

晚上好

老谟深虑 发表于 2023-4-3 19:11

马黑黑 发表于 2023-4-3 19:09
晚上好

       晚上好！向老师学习！

马黑黑 发表于 2023-4-3 19:11

老谟深虑 发表于 2023-4-3 19:11
晚上好！向老师学习！

客气了

红影 发表于 2023-4-3 21:52

老谟深虑 发表于 2023-4-3 19:08
谢谢老师的欣赏和鼓励，问好！

太客气，再赏老师好帖{:4_187:}

老谟深虑 发表于 2023-4-5 18:28

红影 发表于 2023-4-3 21:52
太客气，再赏老师好帖

      再次感谢老师赏评。

红影 发表于 2023-4-5 21:51

老谟深虑 发表于 2023-4-3 19:08
谢谢老师的欣赏和鼓励，问好！

太客气了，应该谢谢您带来的美帖{:4_187:}

查看完整版本: 学习代码音画《骆驼沙漠》