论坛首页 › 特效动画 › 结果2024 【独家动画设计】

亚伦影音工作室 发表于 4 天前

结果2024 【独家动画设计】

本帖最后由 亚伦影音工作室 于 2025-4-23 11:11 编辑 <br /><br /><style>
#bj{position: relative;width: 1286px;height: 720px;MARGIN-LEFT:-220px;margin-top:0px;;overflow:hidden;background:#337700 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/af5b11e74f65bec51c4b7bf7c3cbc5d3.jpg)no-repeat center / cover;border-radius: 0px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 6px #227700; --state:paused;}

#papa{position: absolute;width: 100%;height: 100%;MARGIN-LEFT:0px;margin-top:0px;background:#500000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/70efa2f2acb5f765dae907ecdda2e9ea.jpg)no-repeat center / cover;}

#tu{position: absolute;top:-20%; left:40%;
        width: 100%;opacity:0;animation: round 30s linear infinite var(--state);
        height: 100%;}
#tu img{width: 45%;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);
        }

@keyframes round{
0% {
-webkit-transform:rotate(0deg)scale(3)translate(-100%,50%);
opacity:0}


10% {
-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0deg)scale(1)translate(-20%,0%);
opacity:1}
25% {
-webkit-transform:rotate(0deg)scale(3)translate(-20%,-50%);
opacity:0}
}
#tu:nth-child(5) {
animation-delay: 24s;
}
#tu:nth-child(4) {
animation-delay: 18s;
}
#tu:nth-child(3) {
animation-delay: 12s;
}
#tu:nth-child(2) {
animation-delay: 6s;
}
#tu:nth-child(1) {
animation-delay: 0s;
}

#tuu{position: absolute;top:-20%; left:10%;
        width: 100%;opacity:0;
        height: 100%;animation: roud 30s linear infinite var(--state); }
#tuu img{width: 45%;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);
        }

@keyframes roud{
0% {
-webkit-transform:rotate(0)scale(3)translate(100%,-50%);
opacity:0}

10% {
-webkit-transform:rotate(0)scale(1)translate(40%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0deg)scale(1)translate(40%,0%);
opacity:1}
25% {
-webkit-transform:rotate(0deg)scale(3)translate(100%,50%);
opacity:0}
}
#tuu:nth-child(5) {
animation-delay: 24s;
}
#tuu:nth-child(4) {
animation-delay: 18s;
}
#tuu:nth-child(3) {
animation-delay: 12s;
}
#tuu:nth-child(2) {
animation-delay: 6s;
}
#tuu:nth-child(1) {
animation-delay: 0s;
}


#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 70%;font:300 2.8em 华文隶书;color:#227700;white-space:pre;-webkit-background-clip:text;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);z-index: 6;display: none;cursor: pointer;}
#geci::before{position: absolute;content: attr(data-geci);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#mplayer { position: absolute; text-align: center; top: 80%;transform: translate(-50%); left: 50%;z-index: 60;color:#ffffff;}
.hide{display: none;}
#mplayer::before {position: absolute;content: attr(data-tt);left: 0;bottom: 25px;width: 100%;text-align-last: justify;}
#mprog { width: 400px;height: 2px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay {position: relative;width: 60px; height: 60px; cursor: pointer; animation: rotating 6s infinite linear var(--state);margin: 10px 0px;border-radius: 50px;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 4px #227700;}
@keyframes rotating { to { transform: rotate(360deg); } }
.playbtn, .pausebtn,#world,#zs,#bjqh{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 12px;
border: none;
cursor: pointer;margin: 8px 5px;left: 66%;
}

</style>

<style>
#dhgc{position:absolute;width: 540px;
    height: 450px;z-index: 6;
   border: 0px solid white;cursor: pointer;
    overflow: hidden;margin: 8% 10px;
}

.lrc {position:absolute;width: 100%;
    height: 100%;
   border: 0px solid white;
    margin: 0px 0px;
}

.lrc #ul {width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0}
.lrc #ul li {
font:300 1.2em 微软雅黑;
    color: #ccc;
   
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;
    height: 50px;
    line-height: 35px;
}

.lrc #ulli.active{   font:450 1.6em 微软雅黑;
    color: #fff;
text-align: center; filter:drop-shadow(#000 1px 1px 0px);
}
</style>


<div id="bj">
<div id="papa"></div>
<div>
<div id="tu"><imgsrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/af88d3ebc26990fa46a8bef2389764af.jpg" alt=""></div>
<div id="tu"><img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/aefd686a5b78263b9ab764d9753291df.jpg" alt=""></div>
<div id="tu"><img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/ebd0c67297babb8869b0a8ab817fd23f.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/37377230b6d62b773644f004d9a8ed99.jpg" alt=""></div>
<div id="tu"><imgsrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/a5bd8052afde8b0540fef76ffd84130a.jpg" alt=""></div>
</div>

<div>
<div id="tuu"><imgsrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/4f0db7fb0f199756a77c3481dde9a8db.jpeg" alt=""></div>
<div id="tuu"><img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/2645f1df96d370719ea5d58a1e67b9fe.jpg" alt=""></div>
<div id="tuu"><img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/3469faafd319cb4c426e420ccf9680b2.jpg" alt=""></div>
<div id="tuu"><imgsrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/c737d5d520bfd44290130f09766ac3c8.jpg" alt=""></div>
<div id="tuu"><imgsrc="https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/431690d8817de7a317bab7bb1b41f63d.jpg" alt=""></div>
</div>
<div id="mplayer" data-tt="00:00 00:00" >
<img id="btnplay" src="https://img1.kuwo.cn/star/albumcover/500/s4s92/84/1990683531.jpg" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="50" step="any" value="0" title="调节进度" />
</div>
      <audio id="audio" src="https://s2.ananas.chaoxing.com/sv-w9/audio/74/11/b6/38fe0125da548d8eada4888a59d59dd1/audio.mp3" loop autoplay></audio>
   <div id="geci"></div>
<div id="dhgc"><div class="lrc" >
      <ul id="ul">
      </ul>
    </div>
</div>
<button class="playbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
    <button class="pausebtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<button id="world" onclick="btn3()"title="播放器模式">播放器隐藏</button>
<button id="bjqh" onclick="btn4()"title="背景模式">背景TWO</button>
<buttonid="zs"onclick="btnClick()"title="屏展模式" >屏展模式</button>
<div id="全屏"></div><div id="退出" ></div>
</div>
<script>
let lrc = `结果2024
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：亚伦影音
因为舍不得 所以我哭了
我没有勇气 忍住不哭泣
眼看失去你 我无能为力
我们之间 不再有关系
流着眼泪听着歌
我连呼吸都是痛的
也许再过几个光阴
才能把你忘了
冷战对决无休过
我们之间不快乐
也许我们深爱对方
才要求的更多
你说你爱我 却要离开我
留下我一个 该怎么生活
我们的爱呢 已经不在了
松开我的手 你不再回头
因为舍不得 所以我哭了
我没有勇气 忍住不哭泣
眼看失去你 我无能为力
我们之间 不再有关系
冷战对决无休过
我们之间不快乐
也许我们深爱对方
才要求的更多
你说你爱我 却要离开我
留下我一个 该怎么生活
我们的爱呢 已经不在了
松开我的手 你不再回头
因为舍不得 所以我哭了
我没有勇气 忍住不哭泣
眼看失去你 我无能为力
我们之间 不再有关系
你说你爱我 却要离开我
留下我一个 该怎么生活
我们的爱呢 已经不在了
松开我的手 你不再回头
因为舍不得 所以我哭了
我没有勇气 忍住不哭泣
眼看失去你 我无能为力
我们之间 不再有关系
`;
audio.addEventListener("seeked", myFunction)
audio.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;

function lrcTime (ar) {
      let tmpAr = [];
      for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
      }
      let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1));
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};
function getLrcAr(str) {
      str = str.trim();
      let lines = [], lrcAr = [];
      let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
      if(!str.match(reg)) return;
      lines = str.replace(reg,'$1-{}-$2').split('\n');
      for(k = 0; k < lines.length; k ++) {
                lrcAr = [];
                for(j = 0; j < 3; j ++) {
                        let tmpAr = lines.split('-{}-');
                        lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
                }
      }
      return lrcTime(lrcAr);
};
function toSecs (lrcTime){
      let reg = /\d{2,}/g;
      let ar = lrcTime.match(reg);
      return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};

function showLrc(time){
      let name = mFlag ? 'cover1' : 'cover2';
      geci.innerHTML = lrcAr;
      geci.dataset.geci = lrcAr;
      geci.style.setProperty('--motion', name);
      geci.style.setProperty('--tt', time + 's');
      geci.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

function myFunction(){
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (audio.currentTime - lrcAr);
      showLrc(time);
};

function mylrc() {
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
}

audio.addEventListener('play', playing,false);
audio.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>
<script>
var mseek = false;
var mState = () => audio.paused ?
( bj.style.setProperty('--state', 'paused'),btnplay.title = '点击播放' ) :
( bj.style.setProperty('--state', 'running'),btnplay.title = '点击暂停' );

let toMin = (val) => {
      if (!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 60),
      sec = parseFloat(val % 60);
      if (min < 10) min = '0' + min;
      if (sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}
audio.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = audio.currentTime / audio.duration * mprog.max;
mplayer.dataset.tt = toMin(audio.currentTime) + ' ' + toMin(audio.duration);
});
audio.addEventListener('pause', () => mState());
audio.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => audio.currentTime = audio.currentTime = mprog.value / mprog.max * audio.duration;
dhgc.onclick =geci.onclick =btnplay.onclick = () => audio.paused ? (audio.play()) : (audio.pause());</script>

<script>
// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
    audio: document.querySelector("#audio"),
    ul: document.querySelector("#ul"),
    container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
    var lrcData = lrcArr.split(']');
    var lrcTime = lrcData.substring(1);
    var obj = {
      time: parseTime(lrcTime),
      word: lrcData
    }
    result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
    lrcTimeArr = lrcTime.split(":")
    return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
    let Time = doms.audio.currentTime;
    for (let i = 0; i < result.length; i++) {
      if (result.time > Time) {
            return i - 1;
      }
    }
}
// 创建歌词列表
function createElements() {
    let frag = document.createDocumentFragment(); // 文档片段
    for (let i = 0; i < result.length; i++) {
      let li = document.createElement("li");
      li.innerText = result.word;
      frag.appendChild(li);
    }
    doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
    let index = getIndex();
    // 计算滚动距离
    let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
    if (offset < minOffset) {
      offset = minOffset;
    };
    if (offset > maxOffset) {
      offset = maxOffset;
    };
    // 滚动
    doms.ul.style.transform = `translateY(-${offset}px)`;
    // 清除之前的active
    let li = doms.ul.querySelector(".active")
    if (li) {
      li.classList.remove("active");
    }
    // 为当前所唱到的歌词添加active
    li = doms.ul.children;
    if (li) {
      li.classList.add("active");
    }
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
</script>


<script>
      function btn1() {
            
            document.getElementById('geci').style.display = 'block';
            document.getElementById('dhgc').style.display = 'none';
      }

      function btn2() {
         document.getElementById('geci').style.display = 'none';
            document.getElementById('dhgc').style.display = 'block';
      }

function btn3(){
                        var img=document.getElementById("mplayer");

                        if(document.getElementById("world").innerHTML=="播放器隐藏"){
                                mplayer.className="hide";
                                document.getElementById("world").innerHTML="显示播放器";
                        }else{
                                mplayer.className="";
                                document.getElementById("world").innerHTML="播放器隐藏";
                        }
                }

   function btn4(){
                        var img=document.getElementById("papa");

                        if(document.getElementById("bjqh").innerHTML=="背景TWO"){
                                papa.className="hide";
                                document.getElementById("bjqh").innerHTML="背景ONE";
                        }else{
                                papa.className="";
                                document.getElementById("bjqh").innerHTML="背景TWO";
                        }
                }

function btnClick() {
            var zs= document.getElementById("zs");
            if (this.isFullscreen()) {
            全屏.style.opacity= '1'; 退出.style.opacity = '0';
                zs.style.cursor="ne-resize";
                exitFullScreen();
            } else {
         全屏.style.opacity= '0'; 退出.style.opacity = '1';
            zs.style.cursor="se-resize";
zs.style.visibility='visible';
                        if (zs.requestFullscreen) {
               bj.requestFullscreen();
                } else if (zs.webkitRequestFullScreen) {
                   zs.webkitRequestFullScreen();
                } else if (zs.mozRequestFullScreen) {
                bj.mozRequestFullScreen();
                } else if ( zs.msRequestFullscreen) {
                  zs.msRequestFullscreen();
                }

            }
      }
      // 退出全屏
      function exitFullScreen() {
            let exitFullScreen = document.exitFullScreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
            if (exitFullScreen) {
                exitFullScreen.call(document);
            }
      }
      // 判断是否全屏
      function isFullscreen() {
            return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
      }

        </script>

klxf 发表于 4 天前

独具匠心，独树一帜，独有特色，恭喜亚伦老师屡创新高:)

醉美水芙蓉 发表于 4 天前

欣赏亚伦老师的精彩！

醉美水芙蓉 发表于 4 天前

精彩的播放器制作,画画很美,曲调旋律优美,美了醉了.......

醉美水芙蓉 发表于 4 天前

风景这里独好,在这里停留,驻足,欣赏,流连忘返......

查看完整版本: 结果2024 【独家动画设计】