雾里看花，花迷人 ，聪明的人都知道！时尚字幕
本帖最后由 亚伦影音工作室 于 2024-9-15 10:20 编辑 <br /><br /><style>#papa{margin: 10px -270px ; width: 1164px; height: 640px;background: lightgreen url('https://365.tf/disk/tf/1677639112.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#papa #fullscreen { display:block ;position: absolute;top:5%; left:80%;color:#FF0000; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书;}
#papa:hover #fullscreen { position: absolute;opacity: 1; cursor: pointer; z-index: 11}
#btn #架子鼓{ width: 500px;height: 400px;position: absolute; top:5%; left:5%; z-index:1}
#btn:hover #架子鼓 { opacity: 0; transition: 0.3s;}
#papa #切换图{ width: 100%;height: 100%;position: absolute; top:0%; left:0%; opacity: 0;transform:translate(0%,0%)scale(.8);z-index:3}
#papa:hover #切换图 { opacity: 1; transition: 1s;transform:translate(0%,0%)scale(1.1);}
#btn{z-index: 6;
position: absolute;top:30%; left:-5%;
width: 500px;
height: 500px;}
#mplayer {top:50%; left:42%;z-index: 7;
position: absolute;
width: 100px;
height: 100px;
cursor: pointer;
animation: spin 10s infinite linear;
animation-play-state: paused;
}
@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://www.qqmc.com/up/kwlink.php?id=82048802&.mp3" loop autoplay></audio>
<div id="切换图"><iframe frameborder="0" height="100%" marginheight="0" marginwidth="0" scrolling="no" src="https://365.tf/disk/tf/1677669120.html" width="100%"></iframe></div>
<div id="main" >
<div id="stars"></div>
</div>
<div id="rotate-words">
<div>爱情像彩虹（DJ何鹏版）<br />
<span>(DJ版) -刘子祥</span></div>
<div>词：刘子祥<br />
<span>曲：王贺祺</span></div>
<div>编曲：DJ何鹏<br />
<span>和声：天籁天</span></div>
<div>出品：亚伦影音工作室<br />
<span>Produced by: Aaron Studios</span></div>
<div>代码设计：亚伦<br />
<span>版权属本人所有</span></div>
<div>出品时间：2023.03<br />
<span>二零二三.零三</span></div>
</div>
<divid="btn"title="暂停/播放">
<img id="mplayer" src="https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png" alt="" />
<div id="架子鼓"><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: 7;
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 = `
爱情像彩虹（DJ何鹏版） (DJ版) - 刘子祥
词：刘子祥
曲：王贺祺
编曲：DJ何鹏
和声：天籁天
（未经许可,不得翻唱或使用）
听见窗外天空阵阵雷声
望着街上行人脚步匆匆
想你熟悉又陌生的笑容
孤单的我不知何去何从
心中的感觉有谁能读懂
思念化成灰烟雨已朦胧
回忆那往事点点如雨声
一声一声把我的心刺痛
都说雨后天空会出现彩虹
却未曾说它转瞬成空
你说我们今生是最美的爱情
却忘了它也会让人心痛
都说爱情就像雨后的彩虹
是心中一盏不灭的灯
你说我们的爱相守一世一生
而你像彩虹却无影无踪
心中的感觉有谁能读懂
思念化成灰烟雨已朦胧
回忆那往事点点如雨声
一声一声把我的心刺痛
都说雨后天空会出现彩虹
却未曾说它转瞬成空
你说我们今生是最美的爱情
却忘了它也会让人心痛
都说爱情就像雨后的彩虹
是心中一盏不灭的灯
你说我们的爱相守一世一生
而你像彩虹却无影无踪
都说雨后天空会出现彩虹
却未曾说它转瞬成空
你说我们今生是最美的爱情
却忘了它也会让人心痛
都说爱情就像雨后的彩虹
是心中一盏不灭的灯
你说我们的爱相守一世一生
而你像彩虹却无影无踪
`;
/*变量 ：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');
MusicPlayer.onerror = () => {
if(MusicPlayer.error.code === 4) MusicPlayer.src = 'https://ea-sycdn.kuwo.cn/54d7d8d25792e585f56e8c0db1c00fb1/64055768/resource/n2/88/52/3161463295.mp3';
}
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 1 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>
欣赏精彩制作，点赞。 手机欣赏不知道咋了有重音，请高手们指导！ 醉美水芙蓉 发表于 2023-3-1 07:04
我没有重音！只是看不见图片！
鼠标特效。 又是代码乐队，漂亮。鼠标移动上去，就有洋娃娃一样的美人轮播，真棒。欣赏亚伦老师精美好帖{:4_199:} 欣赏精美制作！{:4_204:} 欣赏亚伦的精彩制作{:4_199:} 亚伦影音工作室 发表于 2023-3-1 06:58
手机欣赏不知道咋了有重音，请高手们指导！
看了你的代码，估计有溢出码 架子鼓也是用了按钮性质的作用 小辣椒 发表于 2023-3-1 21:08
看了你的代码，估计有溢出码
电脑欣赏正常！ 亚伦影音工作室 发表于 2023-3-1 21:42
电脑欣赏正常！
你说手机有重音？ 美妙 亚伦影音工作室 发表于 2023-3-1 06:58
手机欣赏不知道咋了有重音，请高手们指导！
手机切换模式时会有你所说的现象。这是手机浏览器问题。 亚伦影音工作室 发表于 2023-3-1 21:42
电脑欣赏正常！
我手机试了是有重音，但我换其他人的手机好像没有了 小辣椒 发表于 2023-3-1 21:54
我手机试了是有重音，但我换其他人的手机好像没有了
我再看看是啥原因，可能是代码有重复的地方吧！ 亚伦影音工作室 发表于 2023-3-2 07:01
我再看看是啥原因，可能是代码有重复的地方吧！
我用同款手机试了别的浏览器除不能自动播放，是正常的，问题可能是浏览器问题！ 精美制作，欣赏问好！{:4_204:} {:4_199:}{:4_199:} 来看看亚伦老师！{:4_176:}
页:
[1]
2