《我有一个家》 - 林妙可（试试手机版） - 音乐沙龙 - 花潮论坛

亦是金 发表于 2025-3-14 14:22

《我有一个家》 - 林妙可（试试手机版）

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1891512">
<style>
#papa {
margin: 80px100px;
width: 400px;
height: 680px;
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: 400px;
height: 670px;
transform: rotatez(0deg)rotateX(0deg);
background: url(yanhua01.gi)no-repeat center/100% 100%;
}

#enopg{
position: relative;
width: 400px;
height: 670px;
background: url(https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/wbj01.png) no-repeat center/100% 100%;
display:none;
}

#vid1{
width: 450px;
height: 0px;
z-index: -1;
position:absolute;
top:20px;
left:20px;
object-fit: cover;
pointer-events: none;
}
.vid{
width: 380px;
height: 670px;
z-index: -2;
position:absolute;
top:0px;
left:0px;
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;}

css-doodle { position: absolute; }

#pic { position: absolute; left: 3%; top: 35%;width: 0px; height: 460px;filter:contrast(120%)brightness(100%);-webkit-mask-image: radial-gradient(black 60% ,transparent 70%);}

#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 1.8em 华文新魏;
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>

<style type="text/css">

#baiBox {
   margin: auto;
   width: 700px;
   text-align: center;
   font-family:华文新魏;
   font-size: 2.5rem;
   font-weight: bold;
   color: #f73dfa;
   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: 250px;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) }
#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:0px;">《水墨徽州》</span>
<span style="color:#1e5bf6;"><span style="font-size:0px;"> - 胡蜜丹</span></div>

</div>

<div style="position: absolute;width: 800px;height: 60px;top:15px;LEFT: 240px;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)">
<p><span style="color:#ff0000;"><span style="font-family:华文新魏;"><span style="font-size:48px;"> </span></span></span></p></div>

<div style="position: absolute;width: 300px;height: 30px;top:35px;LEFT: 830px;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)">
<p><span style="color:#2020fa;"><span style="font-family:华文新魏;"><span style="font-size:26px;"></span></span></span></p></div>

<div style="position: absolute;width: 300px;height: 30px;top:630px;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:24px;">亦是金在线音乐</span></span></span></p></div>

<video id="vid1" src="https://video-qn.51miz.com/preview\/video\/00\/00\/12\/15\/V-121574-23A34A21.mp4" loop muted autoplay=""></video>

<div id="testImg">
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/58/79/V-zip-cpmhys3773e-0A1C5920.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/58/79/V-zip-cpmhys3772e-55E4777D.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/58/79/V-zip-cpmhys3774e-99871135.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/58/79/V-zip-cpmhys3777e-4A61F278.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/58/79/V-zip-cpmhys3778e-E980AE01.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/59/92/V-zip-cpmhys3781e-6A81ADFB.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/58/79/V-zip-cpmhys3782e-EB755AAC.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/58/79/V-zip-cpmhys3784e-B92994CA.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/58/79/V-zip-cpmhys3785e-0626B79B.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/58/79/V-zip-cpmhys3786e-4B7D9C07.mp4" loop muted autoplay=""></video>
</div>

<img id="pic" src="https://cccimg.com/view.php/7916f5f309be5b48d0c5f43743205fa9.png" alt="" />
<div id="lrc" data-lrc=""> </div>

<div id="mplayer">

<css-doodle grid="6" id="">
:doodle {
@size: 0px;
@shape: circle;
left: 6%;
top: 75%;
cursor: pointer;
z-index: 2;
   background: url(https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/anniu11xg1.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>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1448212730.mp3" autoplay loop></audio>

</div>

<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 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: -220px;font:normal 2.1em 华文楷体;',
   });
</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'),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>

<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 >

<style type="text/css">
#outLayer {}
#btText {
z-index:1;
left: 320px;
position:absolute;
top:10px;
-webkit-background-clip:text;
width:100%;
-webkit-text-fill-color:transparent;
margin:32px auto;
-webkit-text-stroke: 1px rgb(0,71,171);
background-image:url(https://z4a.net/images/2024/01/02/bianse04.gif);
font:bold2.0em华文隶书;
letter-spacing:5px;<!-字母间距：5px；
   line-height:25px<!-行间距：25px
}</style>
<span>
<div id="btText">
<div>我</div><div>有</div><div>一</div><div>个</div><div>家</div>
</style>

</td></tr></table>

<DIV style="HEIGHT: 50px">

红影发表于 2025-3-14 14:37

温馨的家庭生活的动画，好听的童声演唱，欣赏亦是金老师好帖{:4_187:}

红影发表于 2025-3-14 14:38

歌曲里明明唱的是三口之家，图片里的是四口呢{:4_173:}

红影发表于 2025-3-14 14:40

貌似居中还能再调整一下呢{:4_204:}

亦是金 发表于 2025-3-14 14:44

红影发表于 2025-3-14 14:37
温馨的家庭生活的动画，好听的童声演唱，欣赏亦是金老师好帖

问好红影！{:4_187:}

亦是金 发表于 2025-3-14 14:47

红影发表于 2025-3-14 14:38
歌曲里明明唱的是三口之家，图片里的是四口呢

响应国家号召，再添了一个！{:4_170:}

亦是金 发表于 2025-3-14 14:49

红影发表于 2025-3-14 14:40
貌似居中还能再调整一下呢

为了在手机上能看见，帖子只能定位这里了！{:4_203:}

亦是金 发表于 2025-3-14 15:01

@小辣椒@冬天的雨来看看这个帖子在手机上能看见吗？{:4_205:}

流水光阴 发表于 2025-3-14 16:21

问好老师，欣赏了

流水光阴 发表于 2025-3-14 16:22

好听的歌曲，温馨的家

流水光阴 发表于 2025-3-14 16:22

感谢分享

梦油发表于 2025-3-14 16:51

很好的一位可爱的小歌手。

亦是金 发表于 2025-3-14 17:07

流水光阴发表于 2025-3-14 16:21
问好老师，欣赏了

问好！谢谢欣赏！{:4_190:}

亦是金 发表于 2025-3-14 17:08

流水光阴发表于 2025-3-14 16:22
好听的歌曲，温馨的家

谢谢点赞！{:4_190:}

亦是金 发表于 2025-3-14 17:08

流水光阴发表于 2025-3-14 16:22
感谢分享

祝欣赏愉快！{:4_190:}

亦是金 发表于 2025-3-14 17:09

梦油发表于 2025-3-14 16:51
很好的一位可爱的小歌手。

问好老师！谢谢欣赏！{:4_190:}

梦江南 发表于 2025-3-14 17:26

欣赏老师好制作。

红影发表于 2025-3-14 19:58

亦是金发表于 2025-3-14 14:44
问好红影！

问好亦是金老师，晚上好{:4_187:}

红影发表于 2025-3-14 19:59

亦是金发表于 2025-3-14 14:47
响应国家号召，再添了一个！

看得笑，亦是金老师真幽默{:4_173:}

红影发表于 2025-3-14 20:00

亦是金发表于 2025-3-14 14:49
为了在手机上能看见，帖子只能定位这里了！

哦，是为了测试手机效果啊{:4_187:}

页: [1] 2

花潮论坛's Archiver

《我有一个家》 - 林妙可（试试手机版）