《永不失联的爱》CoCo李玟王泽鹏

焱鑫磊 发表于 2023-7-10 04:54

本帖最后由焱鑫磊于 2023-7-10 04:56 编辑 <br /><br /> <style>
#papa {
margin: 110px -280px;
width: 1164px;
height: 655px;
background: url('https://pic.imgdb.cn/item/64ab1c111ddac507cc73341c.jpg') no-repeat center/cover;
box-shadow: 0px 0px 1px 2px #ffffff,0px 0px 5px 10px#ff66ff;overflow:hidden;border-radius:1%;
position: relative;
z-index: 1;overflow:hidden;
--state: paused;
}
css-doodle { position: absolute; }

.photo {width: 100%;
height: 100%;
position: absolute;z-index: 5;

top:0px; left:0px;-webkit-mask-image: radial-gradient(black 20% ,transparent 70%);

opacity: 0;

animation: round 90s linear infinite;}

@keyframes round{0% {opacity: 1;transform:translate(-100%,-100%)scale(0);}

4% {opacity: 1;transform:translate(0%,0%)scale(0.8)rotate(-360deg);}

5% {opacity: 1;transform:translate(0%,0%)scale(0.8)rotate(-360deg);}

7% {opacity: 1;transform: perspective(1300px) rotateY(70deg)scale(0.8)}

9% {opacity: 1;transform: perspective(1300px) rotateY(-70deg)scale(0.8)}

11% {opacity: 0;transform:translate(100%,100%) perspective(1300px)rotatex(-90deg) rotateY(-40deg)scale(3);}

}

img:nth-child(1) {animation-delay: 88s;}

img:nth-child(2) {animation-delay: 77s;}

img:nth-child(3) {animation-delay: 66s;}

img:nth-child(4) {animation-delay: 55s;}

img:nth-child(5) {animation-delay: 44s;}

img:nth-child(6) {animation-delay: 33s;}

img:nth-child(7) {animation-delay: 22s;}

img:nth-child(8) {animation-delay: 11s;}

.stop img:nth-child(1),

.stop img:nth-child(2),

.stop img:nth-child(3),

.stop img:nth-child(4),

.stop img:nth-child(5),

.stop img:nth-child(6),

.stop img:nth-child(7),

.stop img:nth-child(8){animation-play-state: paused;}

#canv {filter:hue-rotate(0deg)contrast(100%)brightness(100%);
position: absolute;
display: block;
height: 100%;
position: relative;
cursor: pointer;
z-index: 4;opacity: 1;
}
#vid { display: none; }

#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
position: absolute;z-index: 6;
left: 50%;
transform: translate(-50%);
top: 86%;
font:normal 3em 华文行楷;
color:#FF00CC;
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: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);

-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}

@keyframes cover1 { from { width: 0; } to { width: 0%; } }
@keyframes cover2 { from { width: 0; } to { width: 0%; } }

.wenzi { position: absolute; left: -1%; top: 18%; z-index: 10; color:#ff33ff; font: bold 20px/20px 'FangSong',serif;opacity: 1; }
#papa:hover #fullscreen { display:block ;}

</style>

<div id="papa">
   <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="testImg" >

<img class='photo'src="https://pic.imgdb.cn/item/64ab1bbe1ddac507cc730a74.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64ab1be31ddac507cc731dfb.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64ab1bfa1ddac507cc732825.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64ab1c351ddac507cc734704.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64ab1c4d1ddac507cc735319.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64ab1c631ddac507cc735e33.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64ab1c791ddac507cc736962.jpg" alt="" />
<img class='photo'src="https://pic.imgdb.cn/item/64ab1c8e1ddac507cc737530.jpg" alt="" />

</div>

<divstyle="width: 400px;height: 320px;overflow:hidden;margin: 3% 68%;position: absolute;" id="but">
<css-doodleid="mplayer">
   :doodle {
            @grid: 2 / 300px 60px;
         position: absolute;z-index: 40;
            color: var(--color);
         transform: scale(1);
            --prog: 0%; --size: 35px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color:#ff33ff; --state: paused;
   }
   /* 时间信息 : 左 */
   @nth(1) {
            @place: 25% 80%;
            :after { content: var(--ttmsg1); }
   }
   /* 控制器 */
   @nth(2) {
            @size: var(--size);
            @shape: clover 5;
            @place: 50% 35%;
            background: var(--color);
            animation: rot 6s infinite linear var(--state);
   }
   /* 时间信息 : 右 */
   @nth(3) {
            @place: 75% 80%;
            :after { content: var(--ttmsg2); }
   }
/* 进度条 */
   @nth(4) {
            @place: 50% 80%;
            @size: 100% 2px;
            background: #aaaaaa;
            display: grid;
            place-items: center start;
            :before {
                     content: '';
                     width: var(--prog);
                     height: 100%;
                     background: var(--color);
            }
   }
   @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>
<div class="wenzi">《永不失联的爱》CoCo李玟王泽鹏</div>

</div>

<canvas id="canv"></canvas>

<video id="vid" src="https://imgs-qn.51miz.com/preview/video/00/00/12/81/V-128171-DE5CB9F4.mp4" autoplay loop muted></video>
<audio id="aud" src="https://www.joy127.com/url/105955.mp3" autoplay loop></audio>

</div>

<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
ctx.drawImage(vid, 0, 0, ww, hh);
if(!vid.paused) {
requestAnimationFrame(loop);
return;
}
}
let mState = () => aud.paused ? ( mplayer.style.setProperty('--state', 'paused'), vid.pause()) : ( mplayer.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

</script>

<script>

(function() {
   let script = document.createElement('script');
   script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
   document.head.appendChild(script);
   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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   aud.addEventListener('play', mState, false);
   aud.addEventListener('pause', mState, false);
   aud.addEventListener('timeupdate', () => {
            mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
            mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
            mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
   });
   mplayer.onclick = (e) => {
            if(e.offsetX > 130 && e.offsetX < 170 && e.offsetY < 46) aud.paused ? aud.play() : aud.pause();
            if(e.offsetY > 46) aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
   }
})();

</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
《永不失联的爱》CoCo李玟王泽鹏
词：饶雪漫曲：周兴哲
LRC歌词制作：焱鑫磊
亲爱的你躲在哪里发呆
有什么事情还无法释怀
我们总把人生想得太坏
像旁人不容许我们的怪
每一片与众不同的云彩
都需要找到天空去存在
我们都习惯了原地徘徊
却无法习惯被依赖
你给我这一辈子都不想失联的爱
相信爱的征途就是星辰大海
美好剧情不会更改
是命运最好的安排
你是我这一辈子都不想失联的爱
相信爱的征途就是星辰大海
请快回来想听你说
说你还在
走过陪你看流星的天台
熬过失去你漫长的等待
好担心没人懂你的无奈
离开我谁还把你当小孩
我猜你一定也会想念我
也怕我失落在茫茫人海
没关系只要你肯回头望
会发现我一直都在
你给我这一辈子都不想失联的爱
你的每条讯息都是心跳节拍
每秒都想拥你入怀
全世界你最可爱
你是我这一辈子都不想失联的爱
就算你的呼吸远在千山之外
请你相信我给的爱
值得你爱

`;

/*变量：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'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.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;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script>
var image = document.getElementById("testImg"),
button = document.getElementById("but");

if (image.classList && image && button) {
button.onclick = function() {
   if (this.value == '.') {
         image.classList.remove('stop');
      this.value = '*';
   } else {
         image.classList.add('stop');
         this.value = '.';
   }
};
}

</script>

红影发表于 2023-7-10 09:46

这歌真好听。没怎么注意李玟，听到她去世了，感觉很吃惊，非常可惜的一个人。
焱鑫磊的制作真漂亮。欣赏点赞{:4_187:}

路人甲 发表于 2023-7-10 10:06

古风与现代相结合，动静相宜，欣赏美贴 {:4_187:}

焱鑫磊 发表于 2023-7-10 21:01

红影发表于 2023-7-10 09:46
这歌真好听。没怎么注意李玟，听到她去世了，感觉很吃惊，非常可惜的一个人。
焱鑫磊的制作真漂亮。欣赏点 ...

问候红影好！{:4_187:}

焱鑫磊 发表于 2023-7-10 21:01

路人甲发表于 2023-7-10 10:06
古风与现代相结合，动静相宜，欣赏美贴

问好路人甲！{:4_204:}

红影发表于 2023-7-10 22:08

焱鑫磊发表于 2023-7-10 21:01
问候红影好！

问好焱鑫磊，晚上好{:4_187:}

一朵梅 发表于 2023-7-11 21:41

李玟～多好的艺人哪～

焱鑫磊 发表于 2023-7-12 02:49

一朵梅发表于 2023-7-11 21:41
李玟～多好的艺人哪～

问好一朵梅！{:4_187:}

页: [1]

花潮论坛's Archiver

《永不失联的爱》CoCo李玟 王泽鹏

《永不失联的爱》CoCo李玟王泽鹏