学习亚伦老师代码，试帖《同窗情缘》 — 高音敏子
<div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2229531">
<style>
#papa {
margin: 50px -150px;
width: 1250px;
height: 750px;
background:url(https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/wbj01.png) no-repeat center/100% 100%;
position: relative;
overflow: hidden;
border-radius:2%;
z-index: 12345;
}
#cndpt{
margin: 0px 0px ;
z-index: 10;
mix-blend-mode: lighten;
cursor: pointer;
position:relative;
width: 1200px;
height: 700px;
transform: rotatez(0deg)rotateX(0deg);
background: url(yanhua01.gif)no-repeat center/100% 100%;
}
#enopg{
position: relative;
width: 1200px;
height: 700px;
background: url(https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/wbj01.png) no-repeat center/100% 100%;
display:none;
}
#vid1{
width: 1200px;
height: 0px;
z-index: 1;
position:absolute;
top:20px;
left:20px;
object-fit: cover;
pointer-events: none;
}
.vid{
width: 1200px;
height: 700px;
z-index: 2;
position:absolute;
top:25px;
left:8px;
border-radius: 20px;
border: 2px solid #000;
opacity: 0;
object-fit: cover;
pointer-events: none;
animation: round 100s linear infinite ;
}
@keyframes round {
0% {opacity: 0;}
4% {opacity: 1;}
10% {opacity: 1;}
15% {opacity: 0;}
}
.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {animation-delay: 0s;}
.stop .vid:nth-child(1),
.stop .vid:nth-child(2),
.stop .vid:nth-child(3),
.stop .vid:nth-child(4),
.stop .vid:nth-child(5),
.stop .vid:nth-child(6),
.stop .vid:nth-child(7),
.stop .vid:nth-child(8),
.stop .vid:nth-child(9),
.stop .vid:nth-child(10){animation-play-state: paused;}
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: #880000;
position: absolute;z-index: 6;
left: 45%;
transform: translate(-50%);
top: 85%;
font:normal 3em 华文新魏;
color: #000;
-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: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
</style>
<style type="text/css">
#baiBox {
margin: auto;
width: 700px;
text-align: center;
font-family:华文新魏;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: absolute;width: 500px;height: 50px;top: 50px;LEFT: -80px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/
</style>
<div id="papa">
<div id="cndpt">
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:42px;">《 同 学 情 缘 》</span>
<span style="color:#658cf0;"><span style="font-size:28px;">— 高音敏子</span></div>
</div>
<div style="position: absolute;width: 500px;height: 50px;top:660px;LEFT: 1000px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:25px;">亦是金在线音乐</span></span></span></p></div>
<video id="vid1" src="https://video-qn.51miz.com/preview/video/00/00/13/28/V-132837-83C10220.mp" loop muted autoplay=""></video>
<div id="testImg">
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/63/99/V-639948-38AC82F1.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/63/22/V-632296-7EA2265B.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/63/47/V-634747-097DB6C8.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/32/V-643253-B7852209.mov" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/65/18/V-651863-1B7237AD.mov" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/36/V-643653-414E72B0.mov" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/63/81/V-638160-13827965.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/67/V-646753-4DAE5BCA.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/17/56/V-175699-1B7AE314.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/17/57/V-175700-3AC49C86.mp4" loop muted autoplay=""></video>
</div>
<div data-lrc="《 小 鲜 肉 》" id="lrc">《 同 窗 情 缘 》 — 高音敏子</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1351254680.mp3" autoplay loop></audio>
<script >
(function() {
const vids = document.querySelectorAll('.vid');
var mState = () => {
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.onplaying = aud.onpause = () => mState();
})();
varimgElement= document.getElementById('enopg');
cndpt.onclick = () => {aud.paused ? (aud.play(),imgElement .style.display = 'none',vid1.play()) : (aud.pause(),imgElement.style.display = 'block',vid1.pause())};
</script >
<script >
var image = document.getElementById("testImg");
let mState = () => aud.paused ? image.classList.add('stop'):image.classList.remove('stop');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script >
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `《 同 窗 情 缘 》 — 高音敏子
词：王 杉 | 曲：高音敏子
编曲: 敏子音乐
演唱：高音敏子
歌词编辑：亦是金
. . . . . .
熟悉又陌生啊你的模样
岁月的沧桑写在了脸上
记忆的风雨敲打着寒窗
美丽的曾经一生不能忘
少年的懵懂啊梦也痴狂
如今的我们已儿孙满堂
那段同学情悄悄心头藏
甜蜜的故事依然在徜徉
啊喊声老同学热泪在流淌
多少个日夜梦中两相望
啊问声老同学你们还好吗
何日能相会我们欢聚一堂
啊我的老同学相悖是堵墙
尽管远他乡有事常来往
啊祝愿老同学事事都如意
道声祝福祝你一路阳光
. . . . . .
少年的懵懂啊梦也痴狂
如今的我们已儿孙满堂
那段同学情悄悄心头藏
甜蜜的故事依然在徜徉
啊喊声老同学热泪在流淌
多少个日夜梦中两相望
啊问声老同学你们还好吗
何日能相会我们欢聚一堂
啊我的老同学相悖是堵墙
尽管远他乡有事常来往
啊祝愿老同学事事都如意
道声祝福祝你一路阳光
啊喊声老同学热泪在流淌
多少个日夜梦中两相望
啊问声老同学你们还好吗
何日能相会我们欢聚一堂
啊我的老同学相悖是堵墙
尽管远他乡有事常来往
啊祝愿老同学事事都如意
道声祝福祝你一路阳光
聚也依依散也依依
他日相见再续衷肠
- 谢谢欣赏 -
`;
/*变量 ：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')) : (lrc.style.setProperty('--state','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>
</td></tr></table>
<DIV style="HEIGHT: 50px">
视频背景制作漂亮{:5_150:} 感谢亦是金老师分享{:5_124:}
页:
[1]