若把你 TO:红影&小辣椒&绿叶清舟&大猫咪
本帖最后由 朵拉 于 2022-11-6 19:56 编辑 <br /><br /><style>#papa {
--state: paused;
left: -333px;
width: 1262px;
height: 710px;
background: #666 url('https://pic1.imgdb.cn/item/636775ad16f2c2beb12c33a3.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
display: grid;
place-items: center;
opacity: .95;
position: relative;
z-index: 1;
}
#papa::before {
position: absolute;
content: '';
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #000;
opacity: .0;
animation: darker linear 1.2s infinite alternate;
transition: all 1.2s;
animation-play-state: var(--state);
}
#mplayer {
position: absolute;
display: grid;
grid-template-areas: 'cur btnplay dur''prog prog prog';
gap: 4px;
place-items: end center;
font-size: 14px;
bottom: 20px;
}
#cur {
grid-area: cur;
color: snow;
}
#dur {
grid-area: dur;
color: snow;
}
#btnplay {
grid-area: btnplay;
display: grid;
grid-auto-flow: column;
place-items: end center;
gap: 0 4px;
height: 60px;
cursor: pointer;
}
#btnplay>span {
background: red;
width: 4px;
transition: .6s;
opacity: .95;
}
#prog {
--ww: 0px;
grid-area: prog;
width: 300px;
height: 12px;
border-radius: 6px;
background: snow;
opacity: .65;
cursor: pointer;
position: relative;
}
#prog::before {
position: absolute;
content: '';
width: var(--ww);
height: 12px;
border-radius: 6px;
background: snow linear-gradient(90deg, green, red);
opacity: .65;
}
#lrc {
--motion: cover1;
--tt: 5s;
position: absolute;
top: 20px;
font: bold 2.4em sans-serif;
color: hsl(0, 10%, 90%);
-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: transparent;
overflow: hidden;
white-space: nowrap;
background: linear-gradient(180deg, hsla(60, 0%, 0%, .45), hsla(60, 100%, 50%, .75));
filter: inherit;
-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%; }
}
@keyframes darker {
from { opacity: 0; }
to { opacity: .45; }
}
</style>
<div id="papa">
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
<div id="mplayer">
<div id="cur">00:00</div>
<div id="btnplay"></div>
<div id="dur">00:00</div>
<div id="prog"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=865632948.mp3" loop autoplay></audio>
</div>
<script>
(function() {
let mKey = 0,
mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
for (j = 0; j < 20; j++) {
let pinpu = document.createElement('span');
pinpu.className = 'pinpu';
pinpu.style.cssText += `height: ${Math.floor(Math.random()*50) + 10}px; background: #${Math.random().toString(16).substr(-6)};`;
btnplay.appendChild(pinpu);
}
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('timeupdate', () => {
let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;
prog.style.setProperty('--ww', prg + 'px');
cur.innerText = toMin(aud.currentTime);
dur.innerText = toMin(aud.duration);
setPinpu();
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
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 showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = 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 mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), papa.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), papa.style.setProperty('--state', 'running'));
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 setPinpu = () => {
let eles = document.querySelectorAll('.pinpu');
eles.forEach((item) => item.style.height = `${Math.floor(Math.random()*50) + 10}px`);
};
})();
</script> @红影
影宝 看过来，周末愉快{:4_204:} @小辣椒
小辣椒 看过来，周末愉快{:4_204:} @绿叶清舟
清舟 看过来，周末愉快{:4_204:} @大猫咪
大猫咪 看过来，周末愉快{:4_204:} @马黑黑
马师好，完成您的新教程 请指点{:4_190:} 朵拉做得真好，歌儿也好听{:4_187:} 千羽 发表于 2022-11-6 17:35
朵拉做得真好，歌儿也好听
千羽来了 么么哒，下回给你制作一首{:4_204:} 朵拉 发表于 2022-11-6 17:38
千羽来了 么么哒，下回给你制作一首
好哒， 俺不会做呢，先谢谢朵拉{:4_187:}{:4_185:} 有意境的图，好听的歌，感谢老师的精彩分享，问好！{:4_187:} 1262px宽度的帖子，左偏移量应是 left: -333px; 马黑黑 发表于 2022-11-6 19:42
1262px宽度的帖子，左偏移量应是 left: -333px;
马师好 我是手机编辑，看不出左右两边的宽度{:4_190:} 马黑黑 发表于 2022-11-6 19:42
1262px宽度的帖子，左偏移量应是 left: -333px;
按照新比例，重新调整了，您用电脑再看一看{:4_190:} 朵拉 发表于 2022-11-6 17:11
@小辣椒
小辣椒 看过来，周末愉快
谢谢朵拉，非常漂亮的制作{:4_199:} 朵拉这首歌第一次听，蛮好听的{:4_199:} 再次谢谢朵拉，制作辛苦了{:4_171:} 朵拉 发表于 2022-11-6 19:55
马师好 我是手机编辑，看不出左右两边的宽度
手机的话，你可以考虑用下面的公式：
left: calc(50% - 帖子宽度的一半px - 81px);
例如，1000px的帖子：calc(50% - 581px); 朵拉 发表于 2022-11-6 19:58
按照新比例，重新调整了，您用电脑再看一看
现在很完美，不过歌词同步模拟逐字方面不是很精准 外出了几天，一回来看到有礼物，好开心。这个做得真漂亮，谢谢朵宝{:4_179:} 谢谢朵拉美帖，制作的真漂亮！歌美图靓，真棒！ 好久不见，问好朵拉！
开心收礼{:5_112:}
{:4_204:}{:4_190:}{:4_178:}
页:
[1]
2