测试东篱老师贴子

显示全部楼层 · 发表于 2023-8-25 22:31

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由醉美水芙蓉于 2023-8-25 22:48 编辑

全屏观赏

晚秋

💞 🍁

🎸

红影 · 发表于 2023-8-25 22:39

还是有问题呢，他这个1400的宽度，这样发出来也只有九百多点，发不出来原大小。不知道原因在哪

显示全部楼层 · 发表于 2023-8-25 22:32

本帖最后由醉美水芙蓉于 2023-8-25 22:49 编辑

<style>
#papa{margin: 150px -400px ;width: 1400px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;
height: 800px;border: 1px solid;background: #333 url('https://pic.imgdb.cn/item/64e7528b661c6c8e54bb5f34.jpg') no-repeat center/cover; position: relative;z-index: 12345;}
:root { --state: running; --prg: 0%; --delay: 0s; }
.mydiv { width: 100%; height: 100%; overflow: hidden; z-index: 10; display: grid; place-items: center; position: relative; }
.heart { position: absolute; font: normal 30px sans-serif; animation: up 5s var(--delay) infinite var(--state); }
.heart:nth-of-type(2) { --delay: -2.5s; }
#mplayer { position: absolute; bottom: 0%; width: 900px; height: 40px; background: linear-gradient(to right,red var(--prg),#FFFFFF 0) repeat-x 0 50% / 100% 2px; }
#mplayer::before, #mplayer::after { position: absolute; top: 28%; font-size: 14px; }
#mplayer::before { content: attr(data-cu); left: -50px;color: #FFFFFF; }
#mplayer::after { content: attr(data-du); right: -50px;color: #FFFFFF; }
#btnplay { position: absolute; left: calc(var(--prg) - 15px); bottom: 24px; font: normal 3em/0em serif; cursor: pointer; animation: swing 2s infinite linear var(--state); color:#ffFFFF;}
@keyframes swing {from { transform: rotate(0deg) skew(0deg); } to { transform: rotate(0deg) skew(0deg); } }
@keyframes up { 0% { opacity: 0; transform: rotate(0deg) translateY(0px); } 75% { opacity: 1; transform: rotate(-10deg) translateY(-300px); } 100% { opacity: 0; transform: rotate(-60deg) translateY(0px); } }
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #880000)no-repeat center/cover;
position: absolute;
left: 50%;z-index: 20;
transform: translate(-50%);
top: 83%;
font:normal 1.6em 华文隶书;
color: #0000;
white-space: pre;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px 0);
}
#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%;letter-spacing: 15px; color:#000090; }100% { width: 350%; letter-spacing: 0px;color:#ff0000; } }
@keyframes cover2 { 0% { width: 0%;letter-spacing: 0px; color:#00ff00; }100% { width: 350%; letter-spacing: 15px;color:#ff0000; } }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 1.6em 华文隶书; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id='papa'>
<span id="fullscreen">全屏观赏</span>
<div id="lrc" data-lrc=" 晚秋"> 晚秋</div>
<div class="mydiv">
<span class="heart">💞</span>
<span class="heart">🍁</span>
<div id="main" >
<div id="stars"></div>
</div>
<div id="mplayer" data-cu="00:00" data-du="00:00" title="调节进度">
<div id="btnplay" title="暂停/播放">🎸</div>
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2069412859.mp3" loop autoplay></audio>
</div>
<script>
(function() {
let root = document.querySelector(':root');
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 = () => root.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { root.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); mplayer.dataset.cu = toMin(aud.currentTime); mplayer.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
mplayer.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / mplayer.offsetWidth;
})();
(function() {
/*原始lrc歌词*/
let lrcStr = `
[00:00.000] 作词 : 九思
[00:00.250] 作曲 : 九思
[00:00.500] 编曲 : 九思
[00:00.750]举起酒杯敬往后
[00:03.900]但愿余生再无忧
[00:07.320]至那前尘往事已经难回首
[00:12.960]细数一生几个秋
[00:15.900]千滋百味品尝够
[00:20.070]不枉美好人世这一游
[00:25.350]举起酒杯敬往后
[00:28.320]时光匆匆不停留
[00:32.340]不怕起起落落再从头
[00:37.680]昨夜的伤挥挥手
[00:40.770]未来的路还要走
[00:44.160]生死以外都是小事别犯愁
[00:49.980]举起酒杯敬往后
[00:52.980]好好活着已足够
[00:56.940]命里该有该无不强求
[01:02.250]错过的人别念旧
[01:05.400]人间不过幅蜃楼
[01:08.850]几十年后终究化为乌有
`;
/*变量：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[j] = parseFloat((ar[j+1][0] - ar[j][0]).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar[key][2] = item > aver ? aver : item;
});
return ar;
};
/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = [60,1,0.001];
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[z] * calcRule[z];
ar[0] = [parseFloat(sec.toFixed(2)), geci];
lrcAr.push(ar[0]);
}
}
}
}
lrcAr.sort((a,b)=> a[0] - b[0]);
return(lrcTime(lrcAr));
};
/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr[mKey][1];
lrc.dataset.lrc = lrcAr[mKey][1];
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[j][0]) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr[mKey][2] - (aud.currentTime - lrcAr[mKey][0]);
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[j][0]) {
cKey = j;
if (mKey === j) showLrc(lrcAr[j][2]);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ?aud.play() : aud.pause(); });
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
stars.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>stars.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>stars.style.animationPlayState = 'paused');
</script>
<style>
#main {
position: relative;
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 #fff000, 193px -376px #ff0000, -1264px -60px #fff000,145px -443px #fff000, -1440px 37px #fff000, 262px -136px #fff000, 212px 219px #fff000, 319px 223px #fff000, 1246px -51px #c9c9c9,308px 26px #fff000, 147px 229px #fff000, -1041px 450px #fff000, 671px 86px white, -921px 234px #fff000, -957px 242px #fff000, 1249px -285px #fff000, 741px 434px #fff000, -1030px 330px #00f000, 311px -475px #fcfcfc, -413px -105px #ff0000, 868px -435px #f7f7f7, -790px 289px #ff0000, 202px 427px #fcfcfc, -22px -158px #ff0000, -1294px -297px #cccccc, -63px 200px #ff0000, -592px -86px #f7f7f7, -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #ff0000, -1442px -153px #00ff00, 1124px -219px #ededed, 701px 257px #ff0000, 36px -179px #ff0000, -937px 480px #f7f7f7, -267px -418px #00ff00, 1467px 127px #ff0000, -1128px 274px #d1d1d1, -180px 430px #e0e0e0,180px 430px #ffffff, 624px 275px #ff0000, -473px 150px #e6e6e6, -537px -348px #d4d4d4, 410px 455px #ff0000, 497px -29px #cccccc, 416px -370px whitesmoke, 977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,-416px 370px whitesmoke, -1049px 409px white, 959px 407px #ff0000, -1153px -168px #dedede, -437px -216px #dbdbdb, -572px 420px #ff0000, -228px 78px #ff0000, -925px 452px #ccffcc, 244px 30px #ff0000, 453px -336px #fff000, -453px -336px #ff0000, 993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #000078, -170px -153px #fff000, 987px -208px #00ff00, 596px 166px #fcfcfc, -1362px -28px #ff0000, 1291px -106px #e3e3e3, -1128px 169px #ededed, 1056px 367px #ebebeb, 261px -128px #ff0000, 1017px 401px #cccccc, 1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3, 1481px 268px #00ff00, 832px -345px #000090, -863px 138px #00ff00, -997px -412px #e3e3e3, -330px -260px #ffff00, 691px -39px #fcfcfc, -468px -135px #ff0000, -535px 405px #e8e8e8, -1289px -284px #e3e3e3, 823px -225px #00ff00, -1172px -348px white, 505px -319px #ff0000, 94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #e2f2f2, 1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white, 1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #00f000, 205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #00ff00,-1104px 121px #fffcfc, 649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9, -1405px 397px #cfcfcf, 30px -81px #ff0000;130px -130px #eeeeee,1130px -230px #00ff00,-1000px -1550px 30px 0px #ff0000,500px -350px 100px 0px #00ff00;
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.9;
}
to {
opacity: 1;
}
}
@keyframes fade2 {
from {
opacity: 0.2;
}
to {
opacity: 0.9;
}
}
</style>

复制代码

马黑黑 · 发表于 2023-8-25 23:08

很不错

显示全部楼层 · 发表于 2023-8-26 06:23

红影发表于 2023-8-25 22:39
还是有问题呢，他这个1400的宽度，这样发出来也只有九百多点，发不出来原大小。不知道原因在哪

现在差不多好了吧！

显示全部楼层 · 发表于 2023-8-26 06:24

马黑黑发表于 2023-8-25 23:08
很不错

老师早上好！

马黑黑 · 发表于 2023-8-26 07:52

醉美水芙蓉发表于 2023-8-26 06:24
老师早上好！

东篱闲人 · 发表于 2023-8-26 08:47

还是芙蓉有耐心。。。

东篱闲人 · 发表于 2023-8-26 08:47

辛苦了。。。

东篱闲人 · 发表于 2023-8-26 08:48

好像那个音乐进度有点不动了。。。

红影 · 发表于 2023-8-26 11:47

醉美水芙蓉发表于 2023-8-26 06:23
现在差不多好了吧！

现在好了，水芙蓉是调了什么内容啊，我也去找过原因，没找到呢。

显示全部楼层 · 发表于 2023-8-26 11:58

东篱闲人发表于 2023-8-26 08:48
好像那个音乐进度有点不动了。。。

我手机看在动的！

显示全部楼层 · 发表于 2023-8-26 12:05

红影发表于 2023-8-26 11:47
现在好了，水芙蓉是调了什么内容啊，我也去找过原因，没找到呢。

没有使用他的代码，我自己重新编辑了！

红影 · 发表于 2023-8-26 12:18

醉美水芙蓉发表于 2023-8-26 12:05
没有使用他的代码，我自己重新编辑了！

原来是这样啊

[灌水] 测试东篱老师贴子

请马上登录，朋友们都在花潮里等着你哦：）

评分

浏览过的版块

花潮美女

虎

龙

狗

猪

多彩人生

星月交辉

海样胸怀

火热情怀

优雅迷人

神秘浪漫

缤纷心情

草莓情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

相遇之美

一往情深

花好月圆

心香一瓣

紫色情节

飞龙在天

金剪刀

天籁妙音

妙笔生花

风雨同行

我心永远

天长地久

幸福快乐

绚丽缤纷

喜乐安康

中秋征文

周年庆

指尖上的流年

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

花潮管理

花潮帅哥

鼠

牛

兔

蛇

马

羊

猴

鸡

奔放热烈

春风拂面

鹰傲苍穹

王者至尊

大将风范

音画大师

共看流星

侠骨柔肠

心想事成

开朗大方

男儿情怀

生财有道

宁静致远

逍遥自在

妙趣横生

花潮贵宾