《人这一生啊》猫儿（学习制作）
本帖最后由 焱鑫磊 于 2023-8-22 22:57 编辑 <br /><br /><style type="text/css">#papa {
width: 1200px;
height: 670px;
background: #000000 url('https://pic.imgdb.cn/item/64e32943661c6c8e54cfe079.jpg') no-repeat center/cover;
margin: 110px -300px ;
box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; display: grid;
place-items: center;
overflow: hidden;
position: relative;
z-index: 1;
}
#prog { position: absolute; bottom: 85%; width: 280px; height: 12px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px;left:70%; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; z-index: 999;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; font: normal 1.5em/0em serif;color:#ffffff; cursor: pointer; background: snow; left: var(--prg); }
#btnplay { position: absolute;bottom: 35px; font: normal 3em/0em serif;color:#ffffff; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }
#tu{position: absolute;top:0%; left:0%;z-index: 2;
width: 100%;
height: 100%;animation: round 60s linear infinite; }
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
40% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
60% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
80% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,0%);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(1)translate(0%,0%);
opacity:1}
}
#dt{position: absolute;top:0%; left:0%;
width: 100%;
height: 100%;z-index: 3; }
#mplayer {top:90%; left:45%;z-index: 6;
position: absolute;
width: 60px;
height: 60px;
overflow:hidden;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
position: absolute;z-index: 6;
left: 52%;
transform: translate(-50%);
top: 75%;
font:normal 3em 华文新魏;
font-weight:800;
color: #0000;
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{ 0% { width: 100%;transform:rotate(0deg)scale(0)}100% { width: 100%;transform:rotate(0deg)scale(1);filter:hue-rotate(360deg)}}
@keyframes cover2 { 0% { width: 100%;transform:rotate(0deg)scale(0)}100% { width: 100%;transform:rotate(0deg)scale(1);filter:hue-rotate(360deg)}}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:18%; left:76%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文隶书; opacity: 1; cursor: pointer; z-index: 1111}
#mpu {--ww: 100%;--hh: 180px;--pinpu: linear-gradient(to top,darkgreen,snow);position: absolute;bottom: 0px;left:0px;width: var(--ww);height: var(--hh);display: flex;justify-content: center;align-items: flex-end;cursor: pointer;z-index: 4; animation:rotat 6s linear infinite;}
@keyframes rotat{0%{filter:hue-rotate(360deg)}100%{filter:hue-rotate(0deg)}}
.mLine {position: relative;margin: 0 3px 2px 0;width: 6px;height: 18px;background: linear-gradient(0deg, #11F60A 79%,rgba(48, 235, 10, 0.01) 80%);transition: .35s;opacity: 1;}
.mLine::before { position: absolute; content: ''; width: 100%; height:2px; background: orange; top: -6px; }
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id='dt'><img id="testImg" src="https://xlaj.cn/bfq/20230820/GIF.gif" width="100%" height="100%"></div>
<div id='tu'><img src="https://pic.imgdb.cn/item/64e32943661c6c8e54cfe079.jpg" alt=""width="100%" height="100%"></div>
<div id="mpu" ></div>
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停"><div id="btn" >❊</div></span>
<span id="slider">✈</span>
</div>
<div id="screen">
<img id="particles" src="https://pic.imgdb.cn/item/643c06530d2dde5777131c12.png" style="visibility:hidden;"></div>
</div>
<audio id="aud" src="https://i.mp3.wf/view.php/c1c36565a54e58f28cc54a5d48c447f8.mp3" autoplay loop></audio>
<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `《人这一生啊》猫儿
词/曲：陈一龙
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); /*获得歌词数组*/
})();
tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script>
(function() {
(function(mkPlayer) {let defaults = {ypData: new Array(500).fill(0).map((v,k) => Math.floor(Math.random() * 200) + 10)};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);mpu.style.cssText += data.player_css;aud.loop = false;let total = Math.ceil(mpu.offsetWidth / 6), ppnum = 0;let mKey = 0, mFlag = true;for(j=0; j<total; j++) {let el = document.createElement('span');el.className = 'mLine';mpu.appendChild(el);}let lines = document.querySelectorAll('.mLine');let max = Math.max.apply(null,data.ypData);let divide = max/mpu.offsetHeight, coe = 20/total/2, plus;let update = () => lines.forEach((item,key) => {plus = (key < total/2 ? key : total - key) * coe * 10;item.style.setProperty('height', Math.random() * (data.ypData - 30) / divide + plus + 'px');});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('ended', () => { mKey = 0; aud.play(); });aud.addEventListener('timeupdate', () => {ppnum ++;if(ppnum >= data.ypData.length) ppnum = 0;update();for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});let mState = () => aud.paused ? lrc.style.setProperty('--state','paused') : lrc.style.setProperty('--state','running');let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;mKey += 1;mFlag = !mFlag;};};mkPlayer.HCPlayer = playCode;})(this);
let ypData = ;
HCPlayer({ypData: ypData,
player_css: '--ww: 100%; --pinpu: linear-gradient(to top,blue,lightblue); align-items: flex-end;',
});
})();
mpu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mpu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mpu.style.animationPlayState = 'paused');
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image= document.getElementById("testImg"),
button = document.getElementById("btn");
if (image&& button) {
button.onclick = function() {
if (this.value == '') {
image.play();
this.value = '.';
} else {
image.stop();
this.value = '';
}
};
}
</script>
制作很完美。欣赏焱鑫磊好帖{:4_187:} 这图图是小辣椒的吧{:4_173:} 红影 发表于 2023-8-22 23:18
制作很完美。欣赏焱鑫磊好帖
红影晚上好！{:4_187:} 红影 发表于 2023-8-22 23:19
这图图是小辣椒的吧
{:4_181:} 焱鑫磊 发表于 2023-8-23 01:53
红影晚上好！
问好焱鑫磊，都凌晨了还在啊，辛苦了{:4_187:} 焱鑫磊 发表于 2023-8-23 01:54
很漂亮。歌词同步做起来也挺不容易的。欣赏焱鑫磊好帖{:4_187:} 红影 发表于 2023-8-23 10:29
很漂亮。歌词同步做起来也挺不容易的。欣赏焱鑫磊好帖
红影最辛苦了，那么多网友，每篇必看必评太辛苦了。责任心很强的。{:4_178:} 焱鑫磊 发表于 2023-8-23 11:06
红影最辛苦了，那么多网友，每篇必看必评太辛苦了。责任心很强的。
咱们这人不多，大家都是朋友，所以看看挺好啊，要是真的人多道数不过来，还真没法一个个都看，毕竟一天只有24小时{:4_189:} 红影 发表于 2023-8-23 14:12
咱们这人不多，大家都是朋友，所以看看挺好啊，要是真的人多道数不过来，还真没法一个个都看，毕竟一天只 ...
{:4_181:} 焱鑫磊 发表于 2023-8-23 19:35
晚上好{:4_204:}
页:
[1]