江淑娜-又再梦见你
本帖最后由 焱鑫磊 于 2023-6-28 11:39 编辑 <br /><br /><style>#papa{margin: 100px -280px ; width: 1164px; height: 640px;background: lightgreen url('https://pic.imgdb.cn/item/64848d941ddac507cc564d89.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 11}
#jzg{ width: 500px;height: 400px;position: absolute; top:5%; left:5%; z-index:3}
#btn:hover #jzg {
opacity: 0.1; transition: 0.3s;}
#切换图{ width: 100%;height: 100%;position: absolute; top:0%; left:0%; opacity: 0;z-index:3}
#papa:hover #切换图 { opacity: 1; transition: 0.3s;}
#btn{z-index: 3;
position: absolute;top:35%; left:-5%;
width: 500px;
height: 500px;}
#mplayer {top:50%; left:42%;z-index: 4;
position: absolute;
width: 100px;
height: 100px;
cursor: pointer;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}
</style>
<style type="text/css">
#main {
position: absolute;
overflow: hidden;
width: 100%; z-index: 2;
min-height: 98vh;
perspective: 340px;}
#stars {
position: absolute;z-index: 2;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
border-radius:50%;
box-shadow: -238px 108px #f7f7f7, 193px -376px #f7f7f7, -1264px -60px #fafafa,
145px -443px #c9c9c9, -1440px 37px #f7f7f7, 262px -136px #cfcfcf,
212px 219px #e3e3e3, 319px 223px #c7c7c7, 1246px -51px #c9c9c9,
308px 26px #e0e0e0, 147px 229px #e6e6e6, -1041px 450px #d1d1d1,
671px 86px white, -921px 234px #f0f0f0, -957px 242px #e8e8e8,
1249px -285px #d1d1d1, 741px 434px #d9d9d9, -1030px 330px #ededed,
311px -475px #fcfcfc, -413px -105px #d4d4d4, 868px -435px #f7f7f7,
-790px 289px #dbdbdb, 202px 427px #fcfcfc, -22px -158px #c9c9c9,
-1294px -297px #cccccc, -63px 200px #f0f0f0, -592px -86px #f7f7f7,
-732px 366px white, -1426px -262px #e8e8e8, 475px -400px #c9c9c9,
-1442px -153px #f7f7f7, 1124px -219px #ededed, 701px 257px #f0f0f0,
36px -179px #ebebeb, -937px 480px #f7f7f7, -267px -418px #f2f2f2,
1467px 127px #cfcfcf, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,180px 430px #ffffff,
624px 275px #fafafa, -473px 150px #e6e6e6, -537px -348px #d4d4d4,
410px 455px #ebebeb, 497px -29px #cccccc, 416px -370px whitesmoke,
977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,-416px 370px whitesmoke,
-1049px 409px white, 959px 407px #c9c9c9, -1153px -168px #dedede,
-437px -216px #dbdbdb, -572px 420px #fcfcfc, -228px 78px #dbdbdb,
-925px 452px #cccccc, 244px 30px #c4c4c4, 453px -336px #dedede, -453px -336px #eedede,
993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #fcfcfc,
-170px -153px #c4c4c4, 987px -208px #d1d1d1, 596px 166px #fcfcfc,
-1362px -28px #c4c4c4, 1291px -106px #e3e3e3, -1128px 169px #ededed,
1056px 367px #ebebeb, 261px -128px #cccccc, 1017px 401px #cccccc,
1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3,
1481px 268px #d1d1d1, 832px -345px #cccccc, -863px 138px #f0f0f0,
-997px -412px #e3e3e3, -330px -260px #d9d9d9, 691px -39px #fcfcfc,
-468px -135px #d6d6d6, -535px 405px #e8e8e8, -1289px -284px #e3e3e3,
823px -225px #cccccc, -1172px -348px white, 505px -319px #ededed,
94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #f2f2f2,
1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white,
1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #fafafa,
205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #f0f0f0,-1104px 121px #fffcfc,
649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9,
-1405px 397px #cfcfcf, 30px -81px #e6e6e6;130px -130px #eeeeee;1130px -230px #cccccc;
animation: fly 2s linear infinite;
transform-style: preserve-3d;
}
#stars:before{
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}
#stars:before {
transform: translateZ(-300px);
animation: fade1 2s linear infinite;
}
#stars:after {
transform: translateZ(-600px);
animation: fade2 2s linear infinite;
}
@keyframes fly {
from {
transform: translateZ(0px);
}
to {
transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
opacity: 0.8;
}
to {
opacity: 1;
}
}
@keyframes fade2 {
from {
opacity: 0.2;
}
to {
opacity: 0.8;
}
}
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<audio id="MusicPlayer" src="https://i.mp3.wf/view.php/16d00774121016c5e3544f2f70fa2aef.mp3" loop autoplay></audio>
<div id="切换图"><iframe frameborder="0" height="100%" marginheight="0" marginwidth="0" scrolling="no" src="https://i.mp3.wf/view.php/54d69283f6cfbea134d5b03e9baea3ff.html" width="100%"></iframe></div>
<div id="main" >
<div id="stars"></div>
</div>
<div id="rotate-words">
<div><br />
<span></span></div>
<div><br />
<span></span></div>
<div><br />
<span></span></div>
<div><br />
<span></span></div>
<div><br />
<span></span></div>
<div><br />
<span></span></div>
</div>
<divid="btn"title="暂停/播放">
<img id="mplayer" src="https://pic.imgdb.cn/item/647b4ed4f024cca17360f93a.gif" alt="" />
<div id="jzg"><iframe frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="https://365.tf/disk/tf/1677432888.html" width="500"></iframe></div></div>
<div id="lrc" data-lrc="焱鑫磊博客">焱鑫磊博客</div>
</div>
<style>
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000);
position: absolute;
left: 50%;z-index: 5;
transform: translate(-50%);
top: 85%;
font:normal 3em 华文隶书;
color: #000078;
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>
<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 (MusicPlayer.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (MusicPlayer.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 = () => MusicPlayer.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
/*监听播放进度*/
MusicPlayer.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (MusicPlayer.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
MusicPlayer.addEventListener('pause', () => mState());/*监听暂停事件*/
MusicPlayer.addEventListener('play', () => mState());/*监听播放事件*/
MusicPlayer.addEventListener('seeked', () => calcKey());/*监听查询事件*/
mplayer.addEventListener('click', () => { MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause(); });
stars.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>stars.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>stars.style.animationPlayState = 'paused');
mplayer.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</script>
<style type="text/css">
#rotate-words {text-align:center;
position:absolute;z-index: 4;
max-width:800px;
left:0%;
margin:auto;
padding:20% 0;
font-size:3.5em;filter:drop-shadow(#000000 1px 1px 1px);
text-transform:uppercase;
color:#ff0000;
font-family: '华文隶书', sans-serif;
}
#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#fff000;
text-transform:lowercase;
opacity:0.8;
font-family: '华文隶书', sans-serif;
}
#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 36s linear 2 0s;
}
@keyframes rotate-word {0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#rotate-words div:nth-child(2) { animation-delay: 6s}
#rotate-words div:nth-child(3) { animation-delay: 12s}
#rotate-words div:nth-child(4) { animation-delay: 18s}
#rotate-words div:nth-child(5) { animation-delay: 24s}
#rotate-words div:nth-child(6) { animation-delay: 30s}
</style>
在爵士鼓小人的大鼓上加了个动态效果，这个有趣。欣赏焱鑫磊好帖{:4_199:} 背景用险峻的高山，这样加美女图有点怪呢，可能背景换一下更好点？{:4_173:} 红影 发表于 2023-6-10 22:19
在爵士鼓小人的大鼓上加了个动态效果，这个有趣。欣赏焱鑫磊好帖
红影晚上好！{:4_187:} 本帖最后由 焱鑫磊 于 2023-6-10 23:51 编辑
红影 发表于 2023-6-10 22:20
背景用险峻的高山，这样加美女图有点怪呢，可能背景换一下更好点？
好的，换个花朵吧！这组美女是淡色调，不理想。换了组深色图片！{:4_172:} 爵士鼓小人敲的大鼓，都击打在节拍上，做得真精准{:4_204:} 樵歌 发表于 2023-6-11 07:13
爵士鼓小人敲的大鼓，都击打在节拍上，做得真精准
樵歌早上好！{:4_187:} 焱鑫磊 发表于 2023-6-10 22:29
红影晚上好！
焱鑫磊的帖子总有自己的构思，这个很赞{:4_187:} 焱鑫磊 发表于 2023-6-10 22:44
好的，换个花朵吧！这组美女是淡色调，不理想。换了组深色图片！
嗯嗯，现在的背景漂亮。鼠标上去那敲鼓小人还能隐去呢，很棒的设计{:4_199:} 感谢分享，欣赏点赞！{:4_185:} 梦缘 发表于 2023-6-11 17:34
感谢分享，欣赏点赞！
问候梦缘好！{:4_187:}
页:
[1]