偷偷学做一个《一路生花 - 温奕心》落地有声
本帖最后由 亚伦影音工作室 于 2023-5-13 11:22 编辑 <br /><br /><style>#papa {
margin: 80px -260px;
width: 1124px;
height: 620px;
background: url('https://file.moyublog.com/d/file/2023-01-19/99bde159dd364a0d1a2c61c6c664c912.jpg') no-repeat center/cover;
box-shadow: 0 0 0px #000;
position: relative;
z-index: 1;overflow:hidden;
--state: paused;
}
css-doodle { position: absolute; }
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
position: absolute;z-index: 4;
left: 50%;
transform: translate(-50%);
top: 90%;
font:normal 3em 华文行楷;
color: #055306;
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: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div id="papa">
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<css-doodle grid="6" id="mplayer">
:doodle {
@size: 120px;
@shape: circle;
right: 60px;
top: 60px;
cursor: pointer;
z-index: 2;
background: url(https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png)0 0/100% 100%;
animation: rot 6s infinite linear forwards var(--state);
}
@keyframes rot { to { transform: rotate(360deg);filter:hue-rotate(360deg)} }
</css-doodle>
<css-doodle grid="20">
:doodle {
@size: 100% 100%;
}
position: absolute;
left: @r(150)%;
top: -20%;
:after {
position: absolute;
content: '@p(•,❄,❄,•,❊,❄,•,•)';
color: #FFffff;
font-size: @r(2, 35)px;
}
animation: fall @r(25,50)s @r(-20, 20)s infinite var(--state);
@keyframes fall {
0% {top: -20%; transform: rotate(0deg)scale(0.2);}
100% {top: 98%;transform: rotate(@p(180, 360)deg)scale(1.2); }
}
</css-doodle>
<audio id="aud" src="https://www.qqmc.com/mp3/music162582615.mp3" autoplay loop></audio>
</div>
<script>
(function(){
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);
let mState = () => aud.paused ? ( papa.style.setProperty('--state', 'paused')) : ( papa.style.setProperty('--state', 'running'));
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', () => calcKey());
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow;background: black; border: 0px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 90%; left: 20px;font:normal 2.1em 华文隶书;',
});
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
一路生花 - 温奕心
词：宋普照
曲：张博文
编曲：李师珏
录音：田亮
和声：张修峰
特别鸣谢：郑浩纳豆
艺人统筹：冼嘉欣
推广策划：杨俊浩/Xray/赵若海
统筹：颖儿
联合『酷狗音乐人 • 星曜计划』
SP：繁星互娱
海上的晚霞像年少的画
铺在天空等海鸥衔走它
遥远的帆任风浪拍打
为梦再痛也不会害怕
远走的风沙去谁的天涯
春天可曾在哪里见过他
时间的手抚过了脸颊
他们谁都沉默不说话
我希望许过的愿望一路生花
护送那时的梦抵挡过风沙
指尖的樱花如诗写谁的韶华
疯狂的热爱夹带着文雅
我希望许过的愿望一路生花
将那雨中的人藏在屋檐下
岁月在冲刷逆流沧桑的喧哗
安静的夜晚你在想谁吗
远走的风沙去谁的天涯
春天可曾在哪里见过他
时间的手抚过了脸颊
他们谁都沉默不说话
我希望许过的愿望一路生花
护送那时的梦抵挡过风沙
指尖的樱花如诗写谁的韶华
疯狂的热爱夹带着文雅
我希望许过的愿望一路生花
将那雨中的人藏在屋檐下
岁月在冲刷逆流沧桑的喧哗
安静的夜晚你在想谁吗
我希望许过的愿望一路生花
护送那时的梦抵挡过风沙
指尖的樱花如诗写谁的韶华
疯狂的热爱夹带着文雅
我希望许过的愿望一路生花
将那雨中的人藏在屋檐下
岁月在冲刷逆流沧桑的喧哗
安静的夜晚你在想谁吗
安静的夜晚你在想谁吗
`;
/*变量 ：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); /*获得歌词数组*/
})();
</script>
问好亚伦！欣赏美帖,{:4_190:}学习了！ 这个做得漂亮，花瓣遇到下面变得越大。这样清净的画面加花朵特别好看。欣赏亚伦老师好帖{:4_199:} 制作漂亮，欣赏点赞！{:4_187:}
欣赏老师佳作！{:4_187:} 亚伦，这个制作非常漂亮，为什么要偷偷学啊{:4_203:} 我哭。。。。
写了许多的，手一滑，全部没有了 亚伦会动脑筋，也是代码基础比较好，制作了许多漂亮的播放器，可以轻松修改黑黑的源码，亚伦也是和难难一样的代码高手了，不用偷偷学啊，大胆运用黑黑的源码，自己二次制作漂亮的播放器{:4_199:} 小辣椒 发表于 2023-5-12 23:14
亚伦会动脑筋，也是代码基础比较好，制作了许多漂亮的播放器，可以轻松修改黑黑的源码，亚伦也是和难难一样 ...
辣椒过奖了，马黑才是真正高手，我是他的学生。 亚伦影音工作室 发表于 2023-5-13 01:00
辣椒过奖了，马黑才是真正高手，我是他的学生。
亚伦客气了，你和难难都应该算代码高手的，黑黑老师不是一般的代码高手了，黑黑已经是顶级代码黑客的{:4_170:}
再说黑黑老师本来就是编程教授的，早已经桃李满天下了。
页:
[1]