女人花（继续学习黑黑网络布局）TO：队长
<style>
#papa { margin: auto; left: -404px;width: 1400px; height: 800px;top:150px; background: tan url('https://wj.zp68.com/lxx/yunhua/2022/10/20/3IF.gif') 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:mid; }
.pLeft1 { grid-area:mid; }
#mplayer { position: absolute;bottom: 50; width: 200px; 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(160,100%,50%,.45), hsla(160,0%,0%,.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: 200px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, hsla(160,100%,50%,.45), hsla(160,0%,0%,.5) 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 2.6em sans-serif; color: transparent; letter-spacing: 2px; background: linear-gradient(-90deg, hsla(160,80%,50%,.95), hsla(160,100%,100%,.95)) 100% 100% / 200% 200%; background-clip: text; -webkit-background-clip: text; filter:drop-shadow(1px 1px 1px #000); }
#dt1{ position: absolute; width: 254px; height: 550px; top: 250px; left: 136px; }
@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">
<img id="dt1" src="https://wj.zp68.com/lxx/yunhua/2022/10/20/rw.png" alt="" />
<div class="pTop"><span id="lrc">花潮lrc在线</span></div>
<div class="pMid"><img src="https://wj.zp68.com/lxx/yunhua/2022/10/20/fye.gif" alt="" /></div>
<div class="pLeft"><img src="https://wj.zp68.com/lxx/yunhua/2022/10/20/hd.gif" alt="" style="width: 200px; " /></div>
<div class="pLeft1"><img src="https://wj.zp68.com/lxx/yunhua/2022/10/20/qt.gif" alt="" style="width: 65px; height: 64px; mix-blend-mode: multiply; transform: rotate(-60deg);" /></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://wj.zp68.com/lxx/yunhua/2022/10/20/nrhua.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>
<br><br><br><br><br><br><br><br><br><br> @马黑黑
还是继续学习黑黑的网格布局，感觉多做几次会熟练一点
{ grid-area:mid; } 增加了一个，也是测试一下可以增加的
人物用place-items: start; 增加上去出来位置调整不好，我又用了 id增加了上去，这个可以调整位置
抢个沙发给队长{:4_189:} 谁在俺PP下面啊 今天帖子用了3个{ grid-area:mid; }
背景是岁月的流星雨粒子效果，谢谢岁月@走过岁月
这花真漂亮啊，这美女象是岁月喜欢的啊 @加林森
队长才恢复身体就看看黑黑教程，别急着做帖，好好休息，不要太动脑子{:4_179:} 绿叶清舟 发表于 2022-10-20 20:49
这花真漂亮啊，这美女象是岁月喜欢的啊
哈哈~~是岁月的流星雨粒子效果，我加了一对男女，美女身材岁月肯定喜欢的{:4_170:} 绿叶清舟 发表于 2022-10-20 20:48
谁在俺PP下面啊
什么PP啊{:4_203:} 亲爱的加那么多元素啊，这个太不容易了。还是头一次听男版的女人花呢。亲爱的制作真漂亮。队长收礼开心{:4_187:} 小辣椒加了散发粒子 男人版的女人花也好听 人物也好看 小辣椒很棒 走过岁月 发表于 2022-10-20 21:05
小辣椒加了散发粒子
岁月来了
是的我花周围加了散的粒子 走过岁月 发表于 2022-10-20 21:06
男人版的女人花也好听
我这个是专辑里面找出来的，就为你这个玫瑰花的效果配上去 红影 发表于 2022-10-20 21:02
亲爱的加那么多元素啊，这个太不容易了。还是头一次听男版的女人花呢。亲爱的制作真漂亮。队长收礼开心{:4_ ...
亲爱的，我也是再次学习做一次，现在可以再加深理解这个网络布局的原理 走过岁月 发表于 2022-10-20 21:07
人物也好看
人物应该算一般般，哈哈{:4_173:} 走过岁月 发表于 2022-10-20 21:07
小辣椒很棒
是岁月做的效果漂亮呢，我就喜欢捣鼓你的东东{:4_173:} 做的太棒了{:4_187:}
页:
[1]
2