亚伦影音工作室 发表于 2025-4-5 20:40

动画设计

本帖最后由 亚伦影音工作室 于 2025-5-14 22:08 编辑 <br /><br /><style>
#papa {margin: 10px -300px;
        width: 1286px;
        height: 720px;
        background:#333 url('https://pic1.imgdb.cn/item/6824a1fc58cb8da5c8f1b5a2.jpg')0 0/100%;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;--state: paused;
}

.lrc { font-family:华文隶书;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);position: absolute;z-index: 5;
        width:100%;
        height:180px;color:#ff0000;
        top: 620px;
        left: 20px;
        text-align:center;
        pointer-events: none;
        overflow:hidden;
        }
#img_border{display:inline-block;width:120px;height:120px;position: absolute;margin: 580px 20px ;
border:2px solid #cccccc;border-radius:50%;animation:rotating 10s linear infinite var(--state); z-index: 100;}
@keyframes rotating{0% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
100% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}
}
#mpicd { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height: 100%;background: url('https://pic1.imgdb.cn/item/67f11e350ba3d5a1d7edcf6e.png')0 0/40%;
        animation: flyd 30s linear infinite var(--state);mix-blend-mode: lighten;
        opacity: 1;
}
#mpiccd { position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;z-index: 1;
        height:100%;background: url('https://pic1.imgdb.cn/item/67f11e350ba3d5a1d7edcf6e.png')0 0/40%;
        animation: totd 30s linear infinite var(--state);mix-blend-mode: lighten;
        opacity: 1;
}

@keyframes flyd {0%{transform:translate(2%,0%)scale(0.5)perspective(255px) rotateY(-60deg);
      background-position: -100% -200%;opacity: 1;
    }

    100%{opacity: 1;
      background-position: 600% 200%;
    }

}
@keyframes totd { 0%{background-position: 100% 200%;opacity: 1;
       transform:translate(-2%,0%)scale(0.5)perspective(255px) rotateY(60deg);
    }

    100%{opacity: 1;
      background-position: -600% -200%;
    }

}

</style>

<div id="papa">
<divid="mpicd"></div>
<divid="mpiccd"></div>
<div ><img id="img_border"src="http://image.hnol.net/c/2022-01/08/11/20220108115931931-5769293.jpg" ></div>
<div class="lrc"> <div   class="words">亚伦影音</div></div>
</div>
<audio src="https://upfile.mp3.wf/view.php/01675b82b74baef51dd657222fbaeb4c.m4a" loop autoplay id="aud"></audio>

<textarea id="txt" style="display: none;">手心有你
歌手：石大侠
作词：马健涛
作曲：马健涛
编曲：马健涛   
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
谢谢你一直的包容我
没有丢下我
谢谢你一直的爱着我
原谅我的过错
感谢上苍把你赐给我
温暖了我心窝
当我哭泣难过的时候
你会紧紧抱着我
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
LRC编辑：小辣椒
谢谢你一直的包容我
没有丢下我
谢谢你一直的爱着我
原谅我的过错
感谢上苍把你赐给我
温暖了我心窝
当我哭泣难过的时候
你会紧紧抱着我
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
让我留在你身边多一天
让我爱你每天多一点
让我今生与你做伴
让我亲吻你的脸蛋
我在梦到你的夜里流泪
双手捧着你的相片
你是我放不下的人
我要把你捧在我手心
我要把你捧在我手心
谢谢欣赏
</textarea>

<script>
    var num = 0;
   var myMusic = document.getElementById("aud"); //通过ID   获取audio
    var words = document.getElementsByClassName("words");
    var mark = true; //布尔值 true真 false假
var txt = document.getElementById("txt");
    var lrc = txt.value.split("[");
    // console.log(txt.value);

    var html = "";
    //循环遍历 出歌词
    for (var i = 0; i < lrc.length; i++) {
      var lrcArrly = lrc.split("]");
      var time = lrcArrly.split(".");
      //console.log(lrc)   //分割时分,秒

      var times = time.split(":");
      //console.log(times)   //分割时,分

      var ms = times * 60 + times * 1; //分钟转换为秒× 60 times 是秒数,×1 表示 string转换为int类型

      //   console.log(ms);
      //    console.log(lrcArrly);   // 歌词

      if (lrcArrly) { //判断是否存在 存在进入
            html += "<pid=" + ms + "title=[" + lrc + ">" + lrcArrly + "</P>";

      }
      words.innerHTML = html;
      //    console.log(words.innerHTML);
    };
    //获取所有的p标签
    var Ps = document.getElementsByTagName("p");
    //aidio监听播放进度                   发生变化,就触发函数
    aud.addEventListener("timeupdate", function() {
      // 输出时间变换:console.log(this.currentTime);      1.300000
      console.log(this.currentTime);
      var currentTimes = parseInt(this.currentTime); //取整
      console.log(currentTimes);
      if (document.getElementById(currentTimes)) {

            //当前的 该颜色,非当前就改为以前颜色
            for (var i = 0; i < Ps.length; i++) {
                Ps.style.color = "";
                Ps.style.fontSize = "0";
            }
            document.getElementById(currentTimes).style.color = "#FF0000";
            document.getElementById(currentTimes).style.fontSize = "40px";

            if (Ps.id == currentTimes) {
                words.style.top = 0 * num + "px";
if (num >= 58) {
                  num = 0;
                }
                num++;
            }
      }
    });

img_border.onclick = () => aud.paused ?(aud.play()):(aud.pause());
mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.onplaying = aud.onpause = () => mState();
</script>

小辣椒 发表于 2025-4-5 21:42

动画设计，是什么意思？

小辣椒 发表于 2025-4-5 21:44

建议亚纶把你的构思顺便写一下

小辣椒 发表于 2025-4-5 21:46

哦，才发现你是发的黑黑教程专版

红影 发表于 2025-4-6 08:12

这个动图设计真漂亮，还是两种不同的图图呢，很有立体感。{:4_187:}

红影 发表于 2025-4-6 08:13

欣赏亚伦老师好帖{:4_199:}
页: [1]
查看完整版本: 动画设计