星战（学习黑师西班牙斗牛士老唱片播放效果）
<style>#papa {
margin:-80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://pic.imgdb.cn/item/642c21606ea21b9a9e964ef9.gif') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
.faguang {
background: transparent;
width: 300px;
height: 200px;
line-height: 900px; /* 单行文本重置居中: 与height值相等 */
color: #fff;
font-size: 6em;
text-align: center;
text-shadow: 0 0 10px#FF7F50, 0 0 20px #FF7F50, 0 0 40px #FF7F50;
}
#lrc {
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(20, 70%, 50%, .65));
position: absolute;
top: 550px;
left:20px;
font: bold 2em sans-serif;
color: snow;
white-space: pre;
-webkit-background-clip: text;
filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: Tomato;
overflow: hidden;
white-space: pre;
background: var(--bg);
filter: inherit;
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
#wrap {
position: absolute;
right: 10px;
bottom: 10px;
width: 240px;
height: 240px;
cursor: pointer;
--deg: -15deg;
}
#wrap::before, #wrap::after {
position: absolute;
content: '';
}
#wrap::before {
width: 200px;
height: 200px;
background: url('https://638183.freep.cn/638183/t23/btn/ihvf.png') center/cover no-repeat;
top: -12px;
right: -12px;
transition: .12s;
transform-origin: 180px 20px;
transform: rotate(var(--deg));
z-index: 10;
animation: var(--chg);
}
#wrap::after {
content: attr(data-tt);
width: 100%;
text-align: center;
color: red;
}
#pan {
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
background-size: 50% 100%, 100% 50%, 100% 100%;
bottom: 0;
position: absolute;
animation: rot 6s infinite linear var(--state);
--state: paused;
}
#pan::before {
position: absolute;
content: '';
top: 50%; left: 50%;
margin: -35px;
border: solid 1px #d9a388;
width: 68px; height: 68px;
border-radius: 50%;
box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
background: #b5ac9a;
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }</style>
<div id="papa"><div class="faguang"> <p>星战</p></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="wrap" title="点击运行" data-tt="00:00 | 00:00"> <div id="pan"></div> </div></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=4874646" loop="loop" autoplay="autoplay"></audio>
<script>
let averAdd = 0, offset = 0, mKey = 0, mFlag = true;
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;};
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;};
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 mState = () => aud.paused ? (pan.style.setProperty('--state', 'paused'), wrap.style.setProperty('--deg','-15deg')) : pan.style.setProperty('--state', 'running');
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
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;
};
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
let angle = -3 + (aud.currentTime * 28 / aud.duration || 0);
wrap.style.setProperty('--deg', angle + 'deg');
wrap.dataset.tt = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});</script> @马黑黑 好象在站里不能自动播，这里到是可以{:4_173:} 雨中悄然 发表于 2023-4-5 19:43
@马黑黑 好象在站里不能自动播，这里到是可以
你网站里的也可以 马黑黑 发表于 2023-4-5 19:48
你网站里的也可以
{:4_170:}害我以为动到哪个代码又不听话了 雨中悄然 发表于 2023-4-5 19:49
害我以为动到哪个代码又不听话了
不听话会报错的 马黑黑 发表于 2023-4-5 19:49
不听话会报错的
{:4_173:}研究一下午歌词，总算加上了。好不容易的 悄然学习老师的新代码真快，有一个新帖子！{:4_187:} 也是直接往肚子打啊{:4_189:} 雨中悄然 发表于 2023-4-5 19:51
研究一下午歌词，总算加上了。好不容易的
会了就不难 这个做得大气，还是最新播放器呢，悄然厉害。歌词同步也很棒呢{:4_187:} 这个星战很炫目，唱片播放器也学的漂亮{:4_187:} 歉然的同步歌词也做得很成功，棒棒哒{:4_187:} 悄然速度的，马上作业完成了{:4_199:} 亦是金 发表于 2023-4-5 20:20
悄然学习老师的新代码真快，有一个新帖子！
谢谢支持回复{:4_187:} 绿叶清舟 发表于 2023-4-5 20:23
也是直接往肚子打啊
这外星的跟地上的比起来，太巨大了，不知道怎么打可能是{:4_170:} 马黑黑 发表于 2023-4-5 20:27
会了就不难
通那么一丢丢。 红影 发表于 2023-4-5 20:35
这个做得大气，还是最新播放器呢，悄然厉害。歌词同步也很棒呢
{:4_187:}影宝我在练习加字加歌词 千羽 发表于 2023-4-5 21:02
这个星战很炫目，唱片播放器也学的漂亮
千羽来了。。。{:4_183:}这个因为不会改播放器颜色，只能改字的颜色了。{:4_187:} 千羽 发表于 2023-4-5 21:07
歉然的同步歌词也做得很成功，棒棒哒
歌词同步就跟着老师在线的走的。{:4_170:}用过好几次了 小辣椒 发表于 2023-4-5 22:16
悄然速度的，马上作业完成了
放假有空就整一个{:4_173:}
页:
[1]
2