《一生一瞬》- 周深

杨帆发表于 2024-11-28 15:28

本帖最后由杨帆于 2024-11-28 16:18 编辑 <br /><br /><style>
#papa {
margin: 130px020pxcalc(50% - 781px);
background: url('https://pic.imgdb.cn/item/6747df64d0e0a243d4d83f53.png') no-repeat center/cover;
width: 1400px;
height: 760px;
box-shadow: 3px 3px 6px gray;
overflow: hidden;
position: relative;
display: grid;
place-items: center;
pointer-events: none;
z-index:1;
}
#btnFs {
position: absolute;
left: 20px;
top: 20px;
padding: 6px;
background: green;
color: white;
border: 2px solid white;
border-radius: 8px;
cursor: pointer;
pointer-events: auto;
z-index:10;
}
#tit {
position: absolute;
z-index: 4;
width:60px;
top:25%;
left: 2%;
font:400 2.6em/1em 华文隶书;
color: transparent;
background-image: linear-gradient(180deg, #fff,#00ff00,#fff000);
background-size: 100px 400px;border: 1px #000;
font-weight: bold;
writing-mode:vertical-rl;
-webkit-background-clip:text;
animation: wenzi 10s linear infinite alternate }
@keyframes wenzi { 0% { background-position: 0px -2500px; } 100% { opacity: 1;background-position: 0px -1000px; }
}
#vid1 {
position: absolute;
left:-180px;
top:-180px;
width: 130%;
height:180%;
object-fit: cover;
pointer-events: none;
opacity: 0.8;
-webkit-mask: radial-gradient(circle,silver,transparent,transparent);
}
#vid3 {
position: absolute;
left:-20px;
top:-50px;
width: 120%;
height:120%;
object-fit: cover;
pointer-events: none;
opacity: 0.8;
mix-blend-mode: screen;
}
#mdiv {
top:80px;
right:80px;
width: 58px;
height: 58px;
filter: drop-shadow(0 0 1px #8A2BE2);
position: absolute;
pointer-events: auto;
animation: rot 8s linear infinite var(--state);
cursor: pointer;
pointer-events: auto;
}
#mdiv > span {
position: absolute;
left: -60%;
top: -60%;
width: 90%;
height: 90%;
background: linear-gradient(75deg,#7CFC00,#ADFF2F,#32CD32, #FFD700);
border-radius: 95% 0%;
transform-origin: 100% 100%;
transform: rotate(var(--deg)) translateY(53px);
}
#mdiv > span:nth-of-type(1) { --deg: 0deg; }
#mdiv > span:nth-of-type(2) {--deg: 72deg;}
#mdiv > span:nth-of-type(3) { --deg: 144deg;}
#mdiv > span:nth-of-type(4) {--deg: 216deg;}
#mdiv > span:nth-of-type(5) {--deg: 288deg;}
@keyframes rot { to { transform: rotate(1turn); } }
#mdiv:hover { filter: drop-shadow(0 0 60px Gold); }
#lrc{left: 10%;top: 70%;}#lrcc {left: 90%;transform: translate(-102%);top: 80%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg,#EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 3em 华文新魏;color: #222222;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 -1px 0);;}
#lrcc::before,#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="tit">《一生一瞬》—— 周深</div>
<span id="btnFs"></span>
<div id="mdiv">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<video id="vid1" src="https://file.uhsea.com/2411/04eca4647b1ed2bc440625192eb4b963IK.mp4" autoplay loop muted></video>
<video id="vid3" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b86e6c5bf.mp4" autoplay loop muted></video>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<audio id="aud" src="https://file.uhsea.com/2411/029578756584a6a089e062e4e93654d1XF.mp3" autoplay loop></audio>
<span id="lrcStr" style="visibility: hidden;">

一生一瞬 (《七夜雪》电视剧雪落无憾主题曲) - 周深
词：舒望
曲：文舒音@听见时代
编曲：何运权@听见时代
制作人：廖正星@听见时代
和声：周深
吉他：何运权@听见时代
古筝：尚靖雅
笛子：丁晓逵
弦乐：国际首席爱乐乐团
周深人声录音师：徐威@52Hz Studio
周深人声配唱：徐威@52Hz Studio
周深人声录音棚：上海52Hz Studio
乐器录音棚：九紫天诚录音棚
乐器录音师：刘婉秋/董方昱
混音：赵靖BIG.J (SBMS)
特别鸣谢：周深工作室
音乐统筹：公祖怡@听见时代
营销统筹：李三木@听见时代
音乐总监：林乔@听见时代/廖正星@听见时代
监制：江陆艳/苏里/翟佳@听见时代
出品：上海辛迪加影视有限公司/听见时代
制作发行：听见时代
一生要闯过多少关
终究是情字最最难
人间的浩瀚我们如孤帆
飘摇着寻找岸
跋涉过了万水千山
又何惧命运的霜寒
若长夜寂然我便为灯盏
照破余生黯淡
是因是果是劫是缘是宿命纠缠
前尘如幻此生不堪不改毅然
觥筹几盏雪落几晚
前尘往事随夜色阑珊
一生一世一人一心一瞬的温暖
一点一滴一天一年往事片段
聚散悲欢人世万般
回首望来去风雪匆然也无憾
道别在最初的荒原
有缺憾才能算圆满
盛放或凋残雪如我一般
既无畏又灿烂
是因是果是劫是缘是宿命纠缠
前尘如幻此生不堪不改毅然
觥筹几盏雪落几晚
前尘往事随夜色阑珊
一生一世一人一心一瞬的温暖
一点一滴一天一年往事片段
聚散悲欢人世万般
回首望来去风雪匆然也无憾
回望也无憾
</span>
</div>
<script>
var mState = () => {
papa.style.setProperty('--state', ['running','paused'][+aud.paused]);aud.paused ?(vid1.pause(),vid3.pause()) :(vid1.play(), vid3.play());
mdiv.title = ['暂停', '播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
mdiv.onclick = () => aud.paused ? aud.play() : aud.pause();
mdiv.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
   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) => {
   lrca=lrcAr;
   lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
   let Y=String(mKey/2).indexOf(".");
   if (Y == -1)
{
   0==mKey&&(lrc.innerHTML=lrca);
   lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
   lrcc.dataset.lrc = "";
   lrc.style.setProperty('--motion', 'cover1');
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
   }
else
{
   lrc.innerHTML = lrcb;
   lrcc.dataset.lrc = lrca;
   lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
   lrcc.style.setProperty('--tt', time + 's');
   lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
   }
   mKey += 1;
};
/*函数：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mdiv.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mdiv.style.animationPlayState="running");
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
                     else continue;
            }
   }
});
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;
   };
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>
<script type="module">
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
qp.fs('papa','btnFs');
</script>

夕阳黄昏 发表于 2024-11-28 15:44

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

愤怒的葡萄 发表于 2024-11-28 15:47

周深的歌曲的确是非常好听的，很喜欢TA。

梦油发表于 2024-11-28 17:14

欣赏美曲，问候杨帆。

杨帆发表于 2024-11-28 17:59

夕阳黄昏发表于 2024-11-28 15:44

谢谢夕阳老师鼓励，祝开心{:4_191:}

杨帆发表于 2024-11-28 18:01

愤怒的葡萄发表于 2024-11-28 15:47
周深的歌曲的确是非常好听的，很喜欢TA。

谢谢葡萄友友鼓励，祝开心{:4_204:}

杨帆发表于 2024-11-28 18:01

梦油发表于 2024-11-28 17:14
欣赏美曲，问候杨帆。

谢谢梦油超版鼓励，祝开心{:4_191:}

愤怒的葡萄 发表于 2024-11-28 18:33

杨帆发表于 2024-11-28 18:01
谢谢葡萄友友鼓励，祝开心

葡萄也欢迎杨帆，祝你在花潮论坛玩得愉快。

红影发表于 2024-11-28 21:22

这个制作太美了，跟看大片似的。歌曲也好听。
非常棒的制作，给杨帆点赞{:4_199:}

红影发表于 2024-11-28 21:24

听听歌曲，赏赏美帖，这感觉真好{:4_187:}

杨帆发表于 2024-11-28 21:59

红影发表于 2024-11-28 21:22
这个制作太美了，跟看大片似的。歌曲也好听。
非常棒的制作，给杨帆点赞

问好影子，谢谢鼓励，祝福开心{:4_204:}

杨帆发表于 2024-11-28 22:01

红影发表于 2024-11-28 21:24
听听歌曲，赏赏美帖，这感觉真好

古装情感剧《七夜雪》由华策克顿集团旗下辛迪加影视、剧酷传播、爱奇艺联合出品，任海涛、梁胜权、李伟基执导，李沁、曾舜晞领衔主演。该剧影视音乐由听见时代定制，以“写意韵味，侠义柔情”为主题打造6首歌曲构建BE美学意境。

@红影主题曲《一生一瞬》由舒望作词，听见时代专属音乐人文舒音作曲，金牌制作廖正星担任制作人，周深演唱。旋律线条绵长柔和，勾勒出辽阔唯美的雪之境，周深清澈深情的声线如是画笔，在雪中绘画着男女主角相知但无法相守的爱情，以及剧中人在面对命运抉择时的勇敢与坚定。纵有风雪落，与你同路过，此生便无憾。

《七夜雪》根据沧月创作的同名小说改编，讲述了霍展白为友人之子求药，结识了药师谷谷主薛紫夜，各有执念的二人从争锋相对，到成为惺惺相惜的知己，却因各自背负的责任而难言爱意，最终天人永隔的故事。

梦油发表于 2024-11-29 14:19

杨帆发表于 2024-11-28 18:01
谢谢梦油超版鼓励，祝开心

杨帆朋友别客气。

红影发表于 2024-11-29 21:12

杨帆发表于 2024-11-28 21:59
问好影子，谢谢鼓励，祝福开心

客气了，应该谢谢您的好帖才是呢{:4_187:}

红影发表于 2024-11-29 21:15

杨帆发表于 2024-11-28 22:01
古装情感剧《七夜雪》由华策克顿集团旗下辛迪加影视、剧酷传播、爱奇艺联合出品，任海涛、梁胜权、李伟基 ...

还没看过这个电视剧呢，感谢杨帆的介绍，空了我也去看看{:4_187:}

小辣椒 发表于 2024-11-29 21:21

欣赏杨帆的精彩制作{:4_187:}

杨帆发表于 2024-11-30 00:24

小辣椒发表于 2024-11-29 21:21
欣赏杨帆的精彩制作

谢谢小辣椒支持与鼓励{:4_204:}

小辣椒 发表于 2024-11-30 20:16

杨帆发表于 2024-11-30 00:24
谢谢小辣椒支持与鼓励

杨帆不客气，一起开心玩{:4_187:}

页: [1]

花潮论坛's Archiver

《一生一瞬》- 周深