苏慧伦-Lemon Tree（网格布局实例演示）
本帖最后由 马黑黑 于 2022-10-15 22:59 编辑 <br /><br /><style>/* 帖子父盒子 */
.mainBox {
left: -214px;
width: 1024px;
height: 640px;
display: grid; /* 定义网格布局 */
grid-template-rows: 1fr 4fr 1fr; /* 帖子划分三行，高度六等分 ：首尾两行个一个等分，中间行四个等分 */
grid-template-columns: repeat(3, 33.3%); /* 帖子划分三列，宽度三等分 */
background: lightblue url('https://638183.freep.cn/638183/t22/webp/lemon.webp') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
/* 帖子直系div元素统一样式 */
.mainBox > div {
display: grid; /* 帖子子元素也采用 grid 布局以方便约束它们自己的子元素 */
position: relative;
}
/* lrc歌词容器 ：合并九宫格的第一行三个单元 */
.lrc_area {
grid-row-start: 1; /* 行的开始网格线 */
grid-row-end: 2; /* 行的结束网格线 */
grid-column-start: 1; /* 列的开始网格线 */
grid-column-end: 4; /* 列的结束网格线 */
place-items: center; /* 令子元素绝对居中 */
}
/* 修饰图容器 ：合并九宫格的第二行第一个单元格和第三行第一个单元格 */
.pic_area {
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 2;
place-items: start; /* 其下子元素在左上角 */
}
/* 播放器区域 ：合并九宫格第三行后两个单元格 */
.play_area {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 4;
place-items: center; /* 其下子元素绝对居中 */
cursor: pointer;
}
/* 播放器区域鼠标滑过时进度条和按钮动画 ：上下移动 */
.play_area:hover #btnwrap, .play_area:hover #prog {
transform: translateY(var(--yy));
}
/* 播放器区域鼠标滑过时按钮动画 ：形状和透明度 */
.play_area:hover #btnwrap {
background: linear-gradient(to top right, black, orange);
border-radius: 50%;
opacity: 1;
}
/* 按钮容器和进度条统一样式 */
#btnwrap, #prog {
position: absolute;
display: grid; /* 它们也用grid布局 */
place-items: center; /* 其内元素绝对居中 */
transition: .5s;
}
/* 按钮容器自己的样式 */
#btnwrap {
--yy: -15px;
width: 40px;
height: 40px;
transform: rotate(45deg);
border-radius: 6px;
opacity: 0;
}
/* 播放按钮样式 */
#btnplay {
width: 20px;
height: 20px;
transform: translateX(3px);
background: #eee;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
/* 暂停按钮样式 */
#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(160,100%,50%,.45), hsla(160,0%,0%,.5) 100%, transparent 0);
border: 1px solid gray;
font: normal 14px / 16px sans-serif;
color: snow;
text-shadow: 1px 1px 0 #111;
}
/* lrc歌词元素的样式 */
#lrc {
position: absolute;
font: bold 2.6em sans-serif;
color: hsla(160,100%,100%,.95);
text-shadow: 1px 1px 1px #000;
--motion: cover2;
--tt: 1s;
--state: running;
}
/* lrc歌词伪元素样式 */
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 0;
height: 100%;
left: 0;
top: 0;
color: hsla(160,80%,50%,.95);
overflow: hidden;
white-space: nowrap;
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%; } }
</style>
<!-- 帖子html 代码 -->
<div class="mainBox">
<div class="lrc_area"><span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span></div>
<div class="pic_area"><img src="https://638183.freep.cn/638183/t22/webp/lemon1.webp" alt="" style="width: 200px; height: 200px; mix-blend-mode: multiply; transform: rotate(-60deg);" /></div>
<div class="play_area">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<!-- 帖子html代码结束 -->
<!-- 下面是帖子的 JS 代码 : 用于实现播放器控制和lrc歌词同步 -->
<script>
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.src = 'https://music.163.com/song/media/outer/url?id=287853.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(160,100%,50%,.45), hsla(160,0%,0%,.5) ' + aud.currentTime / aud.duration * 100 + '%, hsla(160,0%,100%,.35) 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.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', 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;};
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 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>
本帖最后由 马黑黑 于 2022-10-15 23:07 编辑
网格布局入门学习专题：https://www.huachaowang.com/foru ... 3785&extra=page%3D1
本帖代码:<style>
/* 帖子父盒子 */
.mainBox {
left: -214px;
width: 1024px;
height: 640px;
display: grid; /* 定义网格布局 */
grid-template-rows: 1fr 4fr 1fr; /* 帖子划分三行，高度六等分 ：首尾两行个一个等分，中间行四个等分 */
grid-template-columns: repeat(3, 33.3%); /* 帖子划分三列，宽度三等分 */
background: lightblue url('https://638183.freep.cn/638183/t22/webp/lemon.webp') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
/* 帖子直系div元素统一样式 */
.mainBox > div {
display: grid; /* 帖子子元素也采用 grid 布局以方便约束它们自己的子元素 */
position: relative; /* 兼容低版本浏览器对grid支持度偏弱问题 */
}
/* lrc歌词容器 ：合并九宫格的第一行三个单元 */
.lrc_area {
grid-row-start: 1; /* 行的开始网格线 */
grid-row-end: 2; /* 行的结束网格线 */
grid-column-start: 1; /* 列的开始网格线 */
grid-column-end: 4; /* 列的结束网格线 */
place-items: center; /* 令子元素绝对居中 */
}
/* 修饰图容器 ：合并九宫格的第二行第一个单元格和第三行第一个单元格 */
.pic_area {
grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 2;
place-items: start; /* 其下子元素在左上角 */
}
/* 播放器区域 ：合并九宫格第三行后两个单元格 */
.play_area {
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 4;
place-items: center; /* 其下子元素绝对居中 */
cursor: pointer;
}
/* 播放器区域鼠标滑过时进度条和按钮动画 ：上下移动 */
.play_area:hover #btnwrap, .play_area:hover #prog {
transform: translateY(var(--yy));
}
/* 播放器区域鼠标滑过时按钮动画 ：形状和透明度 */
.play_area:hover #btnwrap {
background: linear-gradient(to top right, black, orange);
border-radius: 50%;
opacity: 1;
}
/* 按钮容器和进度条统一样式 */
#btnwrap, #prog {
position: absolute;
display: grid; /* 它们也用grid布局 */
place-items: center; /* 其内元素绝对居中 */
transition: .5s;
}
/* 按钮容器自己的样式 */
#btnwrap {
--yy: -15px;
width: 40px;
height: 40px;
transform: rotate(45deg);
border-radius: 6px;
opacity: 0;
}
/* 播放按钮样式 */
#btnplay {
width: 20px;
height: 20px;
transform: translateX(3px);
background: #eee;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
/* 暂停按钮样式 */
#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(160,100%,50%,.45), hsla(160,0%,0%,.5) 100%, transparent 0);
border: 1px solid gray;
font: normal 14px / 16px sans-serif;
color: snow;
text-shadow: 1px 1px 0 #111;
}
/* lrc歌词元素的样式 */
#lrc {
position: absolute;
font: bold 2.6em sans-serif;
color: hsla(160,100%,100%,.95);
text-shadow: 1px 1px 1px #000;
--motion: cover2;
--tt: 1s;
--state: running;
}
/* lrc歌词伪元素样式 */
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 0;
height: 100%;
left: 0;
top: 0;
color: hsla(160,80%,50%,.95);
overflow: hidden;
white-space: nowrap;
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%; } }
</style>
<!-- 帖子html 代码 -->
<div class="mainBox">
<div class="lrc_area"><span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span></div>
<div class="pic_area"><img src="https://638183.freep.cn/638183/t22/webp/lemon1.webp" alt="" style="width: 200px; height: 200px; mix-blend-mode: multiply; transform: rotate(-60deg);" /></div>
<div class="play_area">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<!-- 帖子html代码结束 -->
<!-- 下面是帖子的 JS 代码 : 用于实现播放器控制和lrc歌词同步 -->
<script>
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
aud.src = 'https://music.163.com/song/media/outer/url?id=287853.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(160,100%,50%,.45), hsla(160,0%,0%,.5) ' + aud.currentTime / aud.duration * 100 + '%, hsla(160,0%,100%,.35) 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.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', 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;};
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 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>
沙发我的 小辣椒 发表于 2022-10-15 12:40
沙发我的
板凳给你{:4_170:} 特别靓丽的歌词同步色彩{:4_178:} 黑黑，网络布局还没有去学习的，先欣赏了再说{:4_199:} 马黑黑 发表于 2022-10-15 12:41
板凳给你
啊，，沙发没了 小辣椒 发表于 2022-10-15 12:51
啊，，沙发没了
坐板凳对健康有好处 小辣椒 发表于 2022-10-15 12:44
黑黑，网络布局还没有去学习的，先欣赏了再说
grid布局对很多人来说是个全新的知识，但你实际上在效果上“用过”它：比如你的手抄报，如果换用grid布局，会更容易控制版面。 马黑黑 发表于 2022-10-15 13:19
grid布局对很多人来说是个全新的知识，但你实际上在效果上“用过”它：比如你的手抄报，如果换用grid布局 ...
哦，那还得认真学习一下的 马黑黑 发表于 2022-10-15 12:55
坐板凳对健康有好处
瞧哥哥最合适，他腰椎病厉害，可以锻炼一下{:4_170:} 跑去看网格布局的帖子，把自己看迷糊了{:4_173:} 红影 发表于 2022-10-15 13:25
跑去看网格布局的帖子，把自己看迷糊了
之前我就说过，grid布局涉及的东东很多。所以，开始会迷糊的，就像你刚接触电子表格一样。弄懂里面的概念、原理后，一切会很清晰。 为什么这个播放器没有在规定的格子里？ 小辣椒 发表于 2022-10-15 13:24
瞧哥哥最合适，他腰椎病厉害，可以锻炼一下
那他得先调理到可以坐冷板凳时再说 红影 发表于 2022-10-15 13:35
为什么这个播放器没有在规定的格子里？
他就在规定的格子里：在底部一行的最后两个单元格里（已合并） 小辣椒 发表于 2022-10-15 13:20
哦，那还得认真学习一下的
我先说清楚：这个不好学，要有耐心，然后，如果学会了，受益无穷 马黑黑 发表于 2022-10-15 13:36
他就在规定的格子里：在底部一行的最后两个单元格里（已合并）
估计又是我电脑的问题，我看到的是在最上面{:4_173:} 马黑黑 发表于 2022-10-15 13:35
之前我就说过，grid布局涉及的东东很多。所以，开始会迷糊的，就像你刚接触电子表格一样。弄懂里面的概念 ...
嗯嗯，大概有点感觉了，还没完全明白。 这代码复制就可以用吗？