论坛 › 欢乐水吧 › 如愿 电影《我和我的父辈》主题曲

红影 发表于 2023-7-28 19:20

如愿 电影《我和我的父辈》主题曲

<style>
:root { --state: running; --prg: 0%; --delay: 0s; }
.mydiv { margin: 80px 0 0 calc(50% - 593px); width: 1024px; height: 576px; background: #333 url('https://s1.ax1x.com/2023/07/28/pCz7Z6O.jpg'); box-shadow: 0 0 8px #000; overflow: hidden; z-index: 0; display: grid; place-items: center; position: relative; }
.gecikuang { position: absolute; left:-140px;top: 46px; width: 1000px; height: 50px; }
#mplayer { position: absolute; left:220px;bottom: 120px; width: 260px; height: 40px; background: linear-gradient(to right,red var(--prg),#eee 0) repeat-x 0 50% / 100% 2px; }
#mplayer::before, #mplayer::after { position: absolute; top: 20%; font-size: 18px; color: gold; }
#mplayer::before { content: attr(data-cu); left: -60px; }
#mplayer::after { content: attr(data-du); right: -60px; }
#btnplay { position: absolute; left: calc(var(--prg) - 20px); bottom: 12px;transform-origin: 10% 100%; font: normal 40px sans-serif; cursor: pointer; animation: swing 1s linear infinitealternate var(--state); }
#lrc { position: absolute; top: 0px; left: 50%; transform: translate(-50%); font: bold 2.4em serif; color: hsla(55,100%,87%,.85); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px rgba(0,0,0,.95)); --motion: cover2; --tt: 5s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(60,100%,50%,.35),hsla(0,100%,67%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
.vid { position: absolute;left: 0px;bottom:0px; width: 640px; height: 520px; object-fit: cover; opacity: 0.5; mix-blend-mode: lighten; clip-path: inset(50% 0 0% 0); }
.flyBox { --w: 220px; width: var(--w); overflow: hidden; color: gold; position: absolute; left:240px;bottom: 100px; }
.flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 10s linear infinite; }
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}
@keyframes swing { from { transform: rotate(2deg) skew(-5deg); } to { transform: rotate(-2deg) skew(5deg); } }
@keyframes up { 0% { opacity: 0; transform: rotate(0deg) translateY(0px); } 75% { opacity: 1; transform: rotate(-10deg) translateY(-300px); } 100% { opacity: 0; transform: rotate(-60deg) translateY(0px); } }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div class="mydiv">
<video class="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/90/5b4cd0d177954_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="gecikuang">
   <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div></div>
    <div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
            <div id="btnplay" title="暂停/播放">&#127793;</div>
    </div>
    <div class="flyBox"><div>电影《我和我的父辈》主题曲</div></div>
    <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2023/04/03/c51ae3b26d5934f3a59e488fbac05b8d.mp3" loop autoplay></audio>
</div>

<script>
(function() {
    let root = document.querySelector(':root');
    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 ? (root.style.setProperty('--state','paused'), lrc.style.setProperty('--state','paused')) : (root.style.setProperty('--state','running'), lrc.style.setProperty('--state','running'));
    aud.addEventListener('pause', mState, false);
    aud.addEventListener('play', mState, false);
    aud.addEventListener('timeupdate', () => {
      root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
      mplayer.dataset.cu = toMin(aud.currentTime);
      mplayer.dataset.du = toMin(aud.duration);
    });
   let mKey = 0, mFlag = true, slip = 0.2;
        let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
       let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
      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);};
        aud.addEventListener('seeked', () => calcKey());
        aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr + slip) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
    btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
    mplayer.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
})();
</script>

红影 发表于 2023-7-28 19:21

学习黑黑的符号在进度条上的代码。谢谢黑黑的代码{:4_187:}

红影 发表于 2023-7-28 19:23

便用那小绿叶象征着被父辈呵护的孩子们吧。不知道为什么，听到这歌就想到父亲，非常感触。
上周就做好的帖子，本想留着自己没事就听听，看看今天帖子少，当灌水吧{:4_173:}

红影 发表于 2023-7-28 19:26

来自网络：
《如愿》作为电影《我和我的父辈》的主题推广曲，这首歌的含义主要是想表达父母那一辈为了让自己的后代能够免遭贫穷、饥饿的侵袭不惜外出打工赚钱，每天每日每夜的赚钱养育我们，只是为了让我们有出息，而父母一辈子为之奋斗的梦想在我们这一辈得以实现。

歌曲如愿表达的意思，就是希望所有的东西都能够像自己所想的，那样到最后的时候一定能够过得更加的幸福，在这个世界之中，每个人都有了它的不同的诉求，只有将这些东西完成之后，整个人才会变得更快乐，这一切的东西才会体现出它的价值和意义。

红影 发表于 2023-7-28 19:33

其实，是去酷美传歌，想着八一建军节快到了，几首喜欢的军歌可以去传一下，然后做个贺帖。论坛里当过兵的人还不少呢。
结果无意中遇到这首歌，一听就被深深感动了。

上海朝阳 发表于 2023-7-28 20:26

影姑娘唱的吗，好听。

红影 发表于 2023-7-28 20:36

上海朝阳 发表于 2023-7-28 20:26
影姑娘唱的吗，好听。

王菲唱的啊，我怎么可能{:4_173:}

小辣椒 发表于 2023-7-28 20:52

亲爱的，这个小巧玲珑，精致的制作{:4_199:}

红影 发表于 2023-7-28 22:21

小辣椒 发表于 2023-7-28 20:52
亲爱的，这个小巧玲珑，精致的制作

谢谢亲爱的。听到这首歌特别喜欢，赶紧做了个。正好学习一下代码{:4_173:}

醉美水芙蓉 发表于 2023-7-28 22:39

红影 发表于 2023-7-28 23:13

醉美水芙蓉 发表于 2023-7-28 22:39
很有意义的贴子！

谢谢水芙蓉美女鼓励{:4_187:}

千羽 发表于 2023-7-29 15:40

很有感染力的音乐和画面{:4_187:}

千羽 发表于 2023-7-29 15:42

那个摇摇晃晃的小春芽播放器挺可爱的{:4_173:}{:4_187:}

花飞飞 发表于 2023-7-29 19:16

如愿也有周深版的，很喜欢的一首歌{:4_187:}

花飞飞 发表于 2023-7-29 19:18

图片处理的很有气势，如火般热烈……
进度条下方加了一行循环滚动的字，更增加了电影般的画面感
影子太厉害了！{:4_199:}

红影 发表于 2023-7-29 22:25

千羽 发表于 2023-7-29 15:40
很有感染力的音乐和画面

谢谢羽儿，被这首歌深深吸引，忍不住就想做个帖子{:4_173:}

红影 发表于 2023-7-29 22:25

千羽 发表于 2023-7-29 15:42
那个摇摇晃晃的小春芽播放器挺可爱的

跟黑黑学的去找了个表情符号做播放器按钮{:4_173:}

千羽 发表于 2023-7-29 22:26

红影 发表于 2023-7-29 22:25
谢谢羽儿，被这首歌深深吸引，忍不住就想做个帖子

影儿成功了，做得挺好的{:4_187:}

红影 发表于 2023-7-29 22:27

花飞飞 发表于 2023-7-29 19:16
如愿也有周深版的，很喜欢的一首歌

是的，听到这首歌就想起和爸爸的那些过往岁月，第一次听的时候忍不住落泪，也不知道为什么。

红影 发表于 2023-7-29 22:29

花飞飞 发表于 2023-7-29 19:18
图片处理的很有气势，如火般热烈……
进度条下方加了一行循环滚动的字，更增加了电影般的画面感
影子太厉 ...

找了个图图剪切一下就贴在背景图里了，边缘处理得不好，不会PS，只是凭感觉弄。
不厉害啊，只是很想多听几遍这首歌。

查看完整版本: 如愿 电影《我和我的父辈》主题曲