论坛 › 动画音画 › 杯杯敬自己-魏佳艺

亚伦影音工作室 发表于 2025-1-2 11:09

杯杯敬自己-魏佳艺

本帖最后由 亚伦影音工作室 于 2025-1-5 07:47 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 721px); background:#800 url(https://pic1.imgdb.cn/item/6775f952d0e0a243d4ed9e65.jpg)no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative;   }
#ppm{position: absolute; width: 100%; height: 100%; opacity:.4; z-index: 1;
background:url(https://pic.imgdb.cn/item/66a1ddcfd9c307b7e912a018.gif)no-repeat center/100% 100%; border-radius: 0px;mix-blend-mode: lighten;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 1;
background:url(https://pic.imgdb.cn/item/66af709cd9c307b7e9b9bc33.jpg)no-repeat center/100% 100%; border-radius: 0px;mix-blend-mode: lighten;
}
#but{left: 4px;bottom: 10px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;
      height: 50px;
             border-radius: 0%;cursor: pointer;}

#pic{position:absolute;top:25px; left:28px;background:#ccc;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:25px;
      height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px;}
#prog {position: absolute;z-index: 8;
      width: 82%;
      height: 2px;background:#ccc;
      cursor: pointer;
         bottom: 35px;
left:5%;
border-radius: 1px;}
#prog-bar {
            height: 100%;
            background: #FF0000;
            width: 0%;
      }

#tmsg {position: absolute;z-index: 8;
      font: normal 12px sans-serif;
      color: #ffffff;
         bottom: 28px;
      right: 70px;}
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom: 26px; cursor: pointer;right: 15px;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover;
</style>
<style>
#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 16;left: 50%;bottom: 80px;transform: translate(-50%);font:400 3.5em/1em 华文隶书;font-style:italic; color: #000080;white-space: pre;-webkit-background-clip: text;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);}
#lrc::before {position: absolute;content: attr(data-lrc);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); } }
</style>
<div id="papa">
<div id="ppm"></div>
<div id="ppcm" ></div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
<div id="but"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
<div id="prog" title="播放进度条"><div id="prog-bar"></div></div>
<div id="tmsg"></div>
<div data-lrc="" id="lrc"></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/c5/1d/53/c7c4d0ec97ac502a618f1f5a782a4e7e/audio.mp3" autoplay loop></audio>
<script >
but.onclick = () => aud.paused ? (aud.play(),picc.style.opacity= '0',pic.style.opacity = '1',ppcm.style.opacity= '0',ppm.style.opacity = '.4'): (aud.pause(),picc.style.opacity = '1',pic.style.opacity = '0',ppcm.style.opacity= '.4',ppm.style.opacity = '0');
aud.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);});
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;
      };

prog.onclick = (e) => { aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
var progBar = document.getElementById('prog-bar');
aud.addEventListener('timeupdate', () => {
          varpercent= (aud.currentTime / aud.duration) * 100;
            progBar.style.width = percent + '%';
      });

let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

</script >
<script >
(function() {
/*lrc*/
let lrcStr = `杯杯敬自己-魏佳艺
词：耀隆
曲：耀隆
编曲：王亚东
混音：王亚东
吉他：杨春
和声：高博深
时光如水东流去
留下岁月的痕迹
回首半生心酸史
只能挥泪道别离
历经多少的风雨
走过多少个四季
再多的苦藏心底
抹不去的是记忆
举起手中的酒杯
杯杯敬自己
回首往事已随风
飘零在梦里
举起手中的酒杯
杯杯敬自己
喝下去的是哀愁
放不下的 是 回忆
是回忆
时光如水东流去
留下岁月的痕迹
回首半生心酸史
只能挥泪道别离
历经多少的风雨
走过多少个四季
再多的苦藏心底
抹不去的是记忆
举起手中的酒杯
杯杯敬自己
回首往事已随风
飘零在梦里
举起手中的酒杯
杯杯敬自己
喝下去的是哀愁
放不下的 是 回忆
是回忆
举起手中的酒杯
杯杯敬自己
回首往事已随风
飘零在梦里
举起手中的酒杯
杯杯敬自己
喝下去的是哀愁
放不下的 是 回忆
是回忆
`;
/* mKey - mFlag ùaverAdd */
let mKey = 0, mFlag = true, averAdd = 0.3;

/* */
let 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)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/* lrc n*3 */
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

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

/*mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        showLrc(time);
};

/**/
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;
}

/* л*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));

/**/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/**/
aud.addEventListener('play', () => mState());/**/
aud.addEventListener('seeked', () => calcKey());/**/
let lrcAr = getLrcAr(lrcStr); /**/
})();
</script>

杨帆 发表于 2025-1-2 11:33

简约大气，赏心悦目，饕餮美餐，谢谢亚伦老师精彩分享{:4_191:}

小九 发表于 2025-1-2 12:45

进来听歌：）{:4_190:}{:4_204:}

红影 发表于 2025-1-2 20:28

又是个新的全屏和退出全屏符号，每一个都很别致呢。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2025-1-2 20:30

亚伦老师厉害，研究了这么多全屏符号{:4_187:}

秋思梦景 发表于 2025-1-3 08:09

问候老师好！精美音画佳作，精心制作分享。向您学习！祝您幸福安康！:handshake

小辣椒 发表于 2025-1-3 22:20

亚伦，最好出来那水墨动图和背景动图都可以一键停止{:4_173:}

小辣椒就可以玩了

亚伦影音工作室 发表于 2025-1-4 15:04

小辣椒 发表于 2025-1-3 22:20
亚伦，最好出来那水墨动图和背景动图都可以一键停止

小辣椒就可以玩了

试图用长图来控制，但解开动图帧数太多，做起来很麻烦，只好放弃。不过可以做个静态图来实现吧！

小辣椒 发表于 2025-1-4 21:47

亚伦影音工作室 发表于 2025-1-4 15:04
试图用长图来控制，但解开动图帧数太多，做起来很麻烦，只好放弃。不过可以做个静态图来实现吧！

可以的，但我动图做好的确实不少，都可以玩的，用长图来控制我感觉不能加小的效果上去，只能背景动图

亚伦影音工作室 发表于 2025-1-5 12:27

小辣椒 发表于 2025-1-4 21:47
可以的，但我动图做好的确实不少，都可以玩的，用长图来控制我感觉不能加小的效果上去，只能背景动图

只要是动图的帧不多不超20都可以做成长图，当然得用ps来制作长图，这个工程比较麻烦，所以你要酌情考虑。
我也不想这样，为了手机欣赏不得以！

小辣椒 发表于 2025-1-8 21:37

亚伦影音工作室 发表于 2025-1-5 12:27
只要是动图的帧不多不超20都可以做成长图，当然得用ps来制作长图，这个工程比较麻烦，所以你要酌情考虑。 ...

谢谢亚伦分享

亚伦的那种ps长图的制作小辣椒一般不会去做的，太花时间了，我就想秒做的，简单一点，速度一点的完成

查看完整版本: 杯杯敬自己-魏佳艺