张明敏 - 乡间小路
<style>#papa { left: -214px; width: 1024px; height: 640px; background: tan url('https://638183.freep.cn/638183/t22/webp/547.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; display: grid; grid-template-rows: 1fr 3fr 1fr; grid-template-areas: 'top top top' 'left mid mid' '. foot foot'; z-index: 1; }
#papa > div { position: relative; display: grid; }
.pTop { grid-area: top; place-items: center; }
.pMid { grid-area: mid; }
.pFoot { grid-area: foot; place-items: center; }
.pLeft { grid-area: left; place-items: end; }
#mplayer { position: absolute;bottom: 0; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); } #mplayer:hover #btnwrap { background: linear-gradient(to top right, hsla(0,100%,50%, .5), hsla(120,100%,50%, .5)); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center;transition: .5s; } #btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid hsla(0,50%,80%, .65); border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); transform: translateX(3px); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, hsla(120,100%,50%, .6), hsla(0,100%,50%, .75) 100%, transparent 0); border: 1px solid hsla(120,100%,70%, .6); font: normal 14px / 16px sans-serif; color: hsl(60,100%,50%); opacity: .75; }
#lrc { font: bold 2em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, hsla(120,40%,50%, .6), hsla(120,100%,100%, .5)) 100% 100% / 200% 200%; background-clip: text; -webkit-background-clip: text; filter:drop-shadow(1px 1px 2px #000); }
@keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
</style>
<div id="papa">
<div class="pTop"><span id="lrc">花潮lrc在线</span></div>
<div class="pMid"><img src="https://638183.freep.cn/638183/t22/animal/bird3.gif" alt="" /></div>
<div class="pLeft"><img src="https://638183.freep.cn/638183/t22/rabbit.gif" alt="" style="width: 120px; mix-blend-mode: multiply; transform: translateX(-40px);" /></div>
<div class="pFoot">
<div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span></div>
</div>
</div>
<script>
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=194740.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, hsla(120,100%,50%, .6), hsla(0,100%,50%, .75) ' + aud.currentTime / aud.duration * 100 + '%, hsla(0,100%,100%, .45) 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) {if(mKey === j) showLrc(lrcAr);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');
let showLrc = (time) => {lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';lrc.innerHTML = lrcAr;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 mtime = lrcAr - (aud.currentTime - lrcAr);showLrc(mtime);}
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;}
</script>
参考代码
<style>
#papa { margin: auto; width: 1024px; height: 640px; background: tan url('https://638183.freep.cn/638183/t22/webp/547.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; display: grid; grid-template-rows: 1fr 3fr 1fr; grid-template-areas: 'top top top' 'left mid mid' '. foot foot'; z-index: 1; }
#papa > div { position: relative; display: grid; }
.pTop { grid-area: top; place-items: center; }
.pMid { grid-area: mid; }
.pFoot { grid-area: foot; place-items: center; }
.pLeft { grid-area: left; place-items: end; }
#mplayer { position: absolute;bottom: 0; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); } #mplayer:hover #btnwrap { background: linear-gradient(to top right, hsla(0,100%,50%, .5), hsla(120,100%,50%, .5)); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center;transition: .5s; } #btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid hsla(0,50%,80%, .65); border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); transform: translateX(3px); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, hsla(120,100%,50%, .6), hsla(0,100%,50%, .75) 100%, transparent 0); border: 1px solid hsla(120,100%,70%, .6); font: normal 14px / 16px sans-serif; color: hsl(60,100%,50%); opacity: .75; }
#lrc { font: bold 2em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, hsla(120,40%,50%, .6), hsla(120,100%,100%, .5)) 100% 100% / 200% 200%; background-clip: text; -webkit-background-clip: text; filter:drop-shadow(1px 1px 2px #000); }
@keyframes bgMove1 { from { background-position: 0 0; } to { background-position: -100% 0; } }
@keyframes bgMove2 { from { background-position: 0 0; } to { background-position: -100% 0; } }
</style>
<div id="papa">
<div class="pTop"><span id="lrc">花潮lrc在线</span></div>
<div class="pMid"><img src="https://638183.freep.cn/638183/t22/animal/bird3.gif" alt="" /></div>
<div class="pLeft"><img src="https://638183.freep.cn/638183/t22/rabbit.gif" alt="" style="width: 120px; mix-blend-mode: multiply; transform: translateX(-40px);" /></div>
<div class="pFoot">
<div id="mplayer"><span id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></span><span id="prog"></span></div>
</div>
</div>
<script>
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=194740.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, hsla(120,100%,50%, .6), hsla(0,100%,50%, .75) ' + aud.currentTime / aud.duration * 100 + '%, hsla(0,100%,100%, .45) 0)';prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);for(j=0; j<lrcAr.length; j++) {if(aud.currentTime >= lrcAr) {if(mKey === j) showLrc(lrcAr);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.animationPlayState = 'paused') : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.animationPlayState = 'running');
let showLrc = (time) => {lrc.style.animation = (mFlag ? 'bgMove1 ' : 'bgMove2 ') + time + 's linear forwards';lrc.innerHTML = lrcAr;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 mtime = lrcAr - (aud.currentTime - lrcAr);showLrc(mtime);}
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;}
</script>
挺漂亮的。{:4_199:} 加林森 发表于 2022-10-18 13:16
挺漂亮的。
队长你在啊{:4_187:} 黑黑，真佩服你做歌词的速度，刚才看见老头帖里面你做了歌词，咋速度这么快，真佩服S 一眨眼这里又一个歌词同步，而且非常的同步，我是最怕做歌词了{:4_198:} 小辣椒 发表于 2022-10-18 13:18
队长你在啊
在的。在学习老黑的教程。 小辣椒 发表于 2022-10-18 13:19
黑黑，真佩服你做歌词的速度，刚才看见老头帖里面你做了歌词，咋速度这么快，真佩服S
东篱那里，我用他的原歌词，去增强版那里用“微调”模式过一下，并没有做手动微调的。而这个你，我是刚做好的，从头到尾全是自己制作，没有用转换，因为网上提供的基本不准。 加林森 发表于 2022-10-18 13:20
在的。在学习老黑的教程。
队长身体好一点就开始战斗了，别太累啊 小辣椒 发表于 2022-10-18 13:20
一眨眼这里又一个歌词同步，而且非常的同步，我是最怕做歌词了
做歌词容易了，比作图容易的 小辣椒 发表于 2022-10-18 13:22
队长身体好一点就开始战斗了，别太累啊
嗯嗯。 马黑黑 发表于 2022-10-18 13:22
做歌词容易了，比作图容易的
要同步微调麻烦一点，直接一次是快的 有趣的小人，感谢老师的代码分享，问好！{:4_204:} 小辣椒 发表于 2022-10-18 13:33
要同步微调麻烦一点，直接一次是快的
微调也不麻烦，实在不行就把托长音的地方手动改一下，其他的不动，这样只需要改很少的几句。 对这个这个仔细想，如果被打上网格线应该是怎样的，然后在帖子里看效果。
.pLeft { grid-area: left; place-items: end; }这里的底对齐，也饱含横向靠右吧，看到HTML里又被设置左移。 看完这个帖子，又觉得有些还是没记住，还得回去翻一下那个讲解帖子{:4_173:} 又听到《乡间小路》好亲切，当时校园歌曲红极一时啊。 欣赏代码音画佳作！ 红影 发表于 2022-10-18 15:04
对这个这个仔细想，如果被打上网格线应该是怎样的，然后在帖子里看效果。
.pLeft { grid-area: left; pl ...
grid子项目定义了居右下，姑凉没在路中央，就移动一下兔子姑凉 相约爱晚亭 发表于 2022-10-18 16:09
欣赏代码音画佳作！
{:5_108:}
页:
[1]
2