滦州古韵（网格布局配套演示）

马黑黑 · 发表于 2022-10-17 13:00

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

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

x

花潮论坛lrc在线 ☯

马黑黑 · 发表于 2022-10-17 13:01

本帖演示：grid-area + grid-template-areas 规划单元格效果

<style>
#papa { position: relative; left: -214px; width: 1024px; height: 640px; background: teal url('https://638183.freep.cn/638183/t22/webp/lrvz.webp') no-repeat center/cover; display: grid; grid-template-areas: 'head head head' 'mid mid mid' 'foot foot foot'; box-shadow: 3px 3px 20px #000; user-select: none; z-index: 1; }
#papa > div { position: relative; display: grid; }
#pa_top { grid-area: head; place-items: center start; }
#pa_mid { grid-area: mid; place-items: start start; }
#pa_foot { grid-area: foot; place-items: center; }
#btnplay { --dur: 6s; position: absolute; bottom: 20px; width: 40px; height: 40px; font: bold 40px/40px serif; text-align: center; color: purple; cursor: pointer; animation: rot linear var(--dur) infinite; }
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; font: bold 2.4em sans-serif; color: hsl(240,100%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(240,100%,50%,.75),hsla(0,100%,50%,.65)); 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 rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="pa_top">
<img src="https://638183.freep.cn/638183/t22/hl/fwhe0.gif" alt="" style="position: absolute; width: 544px;" />
</div>
<div id="pa_mid"><img src="https://638183.freep.cn/638183/t22/hl/fwhe2.gif" alt="" style="width: 120px; opacity: .45; mix-blend-mode: soft-light;" /></div>
<div id="pa_foot">
<span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
<span id="btnplay">☯</span>
</div>
</div>
<script>
(function() {
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [[0.01,"滦州古韵 | 词曲 : 韩晓辉（寒风）",16.6],[16.57,"演唱：于全莉（醉歌）",26.3],[42.87,"都说你很美",3.2],[47.1,"看看也心醉",3.2],[51.35,"山映斜阳天接水",3.9],[55.69,"风情万种惹人追",3.0],[60.05,"都说你很美",3.1],[64.26,"听听也心醉",3.1],[68.59,"皮影评戏沁心间",4.0],[72.82,"千年文化滦河水",3.6],[77.26,"都说你很美",3.4],[81.42,"心儿随你飞",3.3],[85.71,"依依杨柳拂弯桥",3.8],[89.97,"纤纤细腰惹风吹",3.6],[94.21,"都说你很美",3.2],[98.57,"走走也不累",3.1],[102.87,"大街小巷古风情",3.8],[107.12,"流连忘返不后悔",4.4],[150.07,"都说你很美",3.1],[154.21,"看看也心醉",3.2],[158.65,"山映斜阳天接水",3.9],[162.75,"风情万种惹人追",3.5],[167.03,"都说你很美",3.2],[171.39,"听听也心醉",3.2],[175.65,"皮影评戏沁心间",3.6],[179.98,"千年文化滦河水",4.0],[184.25,"都说你很美",3.2],[188.54,"心儿随你飞",3.4],[192.84,"依依杨柳拂弯桥",3.7],[197.13,"纤纤细腰惹风吹",3.5],[201.4,"都说你很美",3.2],[205.69,"走走也不累",3.4],[209.99,"大街小巷古风情",3.9],[214.24,"流连忘返不后悔",4.0],[223.1,"都说你很美",3.2],[227.13,"心儿随你飞",3.5],[231.31,"依依杨柳拂弯桥",3.8],[235.7,"纤纤细腰惹风吹",4.0],[240,"都说你很美",3.2],[244.23,"走走也不累",3.5],[248.54,"大街小巷古风情",3.9],[252.83,"流连忘返不后悔",3.8],[257.33,"大街小巷古风情",3.9],[261.48,"流连忘返不后悔 ~~~",12.0]];
aud.src = 'https://music.163.com/song/media/outer/url?id=500742766.mp3';
aud.loop = false;
aud.autoplay = true;
papa.oncontextmenu = () => false;
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr[j][0]) {if (mKey === j) showLrc(lrcAr[j][2]);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = 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;};
})();
</script>

复制代码

马黑黑 · 发表于 2022-10-17 13:09

本帖最后由马黑黑于 2022-10-17 13:12 编辑

一些必要的解释：CSS 网格布局相关

① 主元素

#papa {
      display: grid;
      grid-template-areas:
            'head head head'
            'mid mid mid'
            'foot foot foot';
}

② 主元素下内部项目统一样式
#papa>div {
position: relative;
display: grid;
}

③ 内部项目各自样式

#pa_top {
      grid-area: head;
      place-items: center start;
}

#pa_mid {
      grid-area: mid;
      place-items: start start;
}

#pa_foot {
      grid-area: foot;
      place-items: center;
}

内部项目各选择器使用 grid-area 命名单元格，主元素将单元格名称组合排列形成 3*1 的布局样式。然后，在HTML代码里，在这三行内布置飞鹤群、飞鹤、播放器+歌词。

飞鹤群借用了 @小辣椒的图片，在此表示感谢。