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

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

马黑黑 发表于 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 = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
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) {if (mKey === j) showLrc(lrcAr);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;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代码里，在这三行内布置飞鹤群、飞鹤、播放器+歌词。

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

加林森 发表于 2022-10-17 13:13

老黑下午好！我回家了。{:5_154:}

梦油发表于 2022-10-17 14:57

黑黑朋友设计飞行中的大雁为作品增添了活力，很有生气。

小辣椒 发表于 2022-10-17 15:56

哇瑟~~太极八卦的播放器出来了{:4_178:}

小辣椒 发表于 2022-10-17 15:58

欣赏黑黑的精美制作，仰慕一下，这个速度太快的

做歌词同步做这么快的{:4_178:}

红影发表于 2022-10-17 16:57

grid-template-areas: 'head head head' 'mid mid mid' 'foot foot foot';
又是个新的，估计讲解帖子里也有的吧，一会我去看看学习一下{:4_187:}

红影发表于 2022-10-17 16:58

看到这个特殊符号，有意思，还挺好看的呢{:4_204:}

马黑黑 发表于 2022-10-17 18:13

红影发表于 2022-10-17 16:58
看到这个特殊符号，有意思，还挺好看的呢

不少特殊符号是设计的很漂亮的

马黑黑 发表于 2022-10-17 18:14

红影发表于 2022-10-17 16:57
grid-template-areas: 'head head head' 'mid mid mid' 'foot foot foot';
又是个新的，估计讲解帖子里也 ...

讲的的，grid-area 和 grid-template-area 的配套应用

马黑黑 发表于 2022-10-17 18:14

小辣椒发表于 2022-10-17 15:58
欣赏黑黑的精美制作，仰慕一下，这个速度太快的

做歌词同步做这么快的

歌词同步不难的

马黑黑 发表于 2022-10-17 18:14

加林森发表于 2022-10-17 13:13
老黑下午好！我回家了。
注意休养

马黑黑 发表于 2022-10-17 18:15

梦油发表于 2022-10-17 14:57
黑黑朋友设计飞行中的大雁为作品增添了活力，很有生气。

大雁是小辣椒提供的图片

马黑黑 发表于 2022-10-17 18:15

小辣椒发表于 2022-10-17 15:56
哇瑟~~太极八卦的播放器出来了

换个文本而已哈

梦油发表于 2022-10-17 18:24

马黑黑发表于 2022-10-17 18:15
大雁是小辣椒提供的图片

飞舞的大雁与全图结合的非常好啊。

马黑黑 发表于 2022-10-17 18:25

梦油发表于 2022-10-17 18:24
飞舞的大雁与全图结合的非常好啊。

主要是大雁图片好

加林森 发表于 2022-10-17 19:28

马黑黑发表于 2022-10-17 18:14
注意休养

好的好的。

红影发表于 2022-10-17 19:41

马黑黑发表于 2022-10-17 18:13
不少特殊符号是设计的很漂亮的

这个歌词同步的配色很奇妙，和特殊字符相互呼应。

红影发表于 2022-10-17 19:42

马黑黑发表于 2022-10-17 18:14
讲的的，grid-area 和 grid-template-area 的配套应用

嗯嗯，我赶紧去学习一下{:4_187:}

页: [1] 2 3 4

花潮论坛's Archiver

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