论坛 › 欢乐水吧 › 全世界谁倾听你（学习黑黑grid网格布局）

红影 发表于 2022-10-16 10:25

全世界谁倾听你（学习黑黑grid网格布局）

<style>
.mainBox {
        left: -302px;
        width: 1200px;
        height: 675px;
        display: grid;
        grid-template-rows: 150px auto 300px;
        grid-template-columns: 150px auto 150px;
        background: lightblue;
        box-shadow: 3px 3px 20px #000;
        position: relative;
      overflow: hidden;
        z-index: 1;
}
.mainBox > div {
        display: grid; /* 帖子子元素也采用 grid 布局以方便约束它们自己的子元素 */
        position: relative;
}
.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: 3;
        grid-column-start: 2;
        grid-column-end: 3;
        place-items: start center; /* 其下子元素垂直方向靠上水平方向居中 */
}
.play_area {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: 2;
        place-items: center; /* 其下子元素绝对居中 */
        cursor: pointer;
}
.dongtu {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 4;
}
#mplayer { position: absolute;width: 120px; height: 120px; border-radius: 50%; overflow: hidden; z-index: 3; }
#track { stroke: url(#gradient); }
#tmsg { fill: hsl(60,15%,88%); font: normal 1em sans-serif; }
#btnwrap { display: block; fill: hsla(0,100%,100%,.7); cursor: pointer; }
#btnwrap:hover { fill: hsla(0,60%,60%,.8); }
#lrc { --motion: cover1; --tt: 1.2s; --state: running; position: absolute;font: bold 2.4em sans-serif; color: hsl(20,10%,80%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(20,100%,0%,.95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,60%,100%,.95),hsla(60,94%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#shipin { position: absolute; width: 1200px; height: 730px; top:-55px;object-fit: cover; }
.renwu { position: absolute; width: 176px; height: 297px; bottom: 110px; right: 6px; animation: walk 40s linear infinite;z-index: 2}
@keyframes walk { to { right: 1200px; bottom:0px;} }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<div class="mainBox">
      <video id="shipin" src="https://img.tukuppt.com/video_show/2475824/00/01/82/5b4af6e165ea9.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
      <div class="dongtu"><img class="renwu" src="https://pic.imgdb.cn/item/62e9380016f2c2beb14e5e9e.gif" alt="" /></div>
        <div class="lrc_area"><span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span></div>
        <div class="pic_area"><img src="https://pic1.imgdb.cn/item/634b4f0c16f2c2beb175fd4e.png" alt="" style="width: 660px; height: 181px; opacity: .35;" /></div>
        <div class="play_area">
                        <svg id="mplayer" width="120" height="120" shape-rendering="geometricPrecision">
                <g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
                        <circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10"/>
                        <circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="2" stroke="hsla(0,0%,100%,0.75)" />
                </g>
                <path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
                <path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
                <g id="tmsg">
                        <text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
                        <text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
                </g>
                <g id="btnwrap">
                        <path id="btnplay" d="M 50 50,50 70,70 60 z"></path>
                        <path id="btnmid" d="M 55 50, 55 70, 60 70, 60 50, 55 50 z" fill="transparent"></path>
                        <path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z"></path>
                </g>
                <defs>
                        <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1">
                                <stop offset="0%" stop-color="hsl(60, 100%, 21%)" stop-opacity="1" />
                                <stop offset="35%" stop-color="hsl(60, 100%, 35%)" stop-opacity="0.8" />
                                <stop offset="65%" stop-color="hsl(60, 100%, 50%)" stop-opacity="0.8" />
                                <stop offset="100%" stop-color="hsl(60, 100%, 80%)" stop-opacity="0.8" />
                        </linearGradient>
                </defs>
        </svg>
        </div>
</div>

<script>
(function() {
        let mKey = 0, mFlag = true, aud = new Audio(), cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len: track.getTotalLength(), };
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
aud.src = 'https://music.163.com/song/media/outer/url?id=432509483.mp3';
        aud.autoplay = true;
        aud.loop = true;
        prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;
        btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('seeked', () => calcKey());
        mama.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play',() => mState());
        aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = 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;}
        mState();
}());
</script>

红影 发表于 2022-10-16 10:27

学习体会：1 用这个圆形播放器因为没有鼠标点上去移动的问题，貌似更简单点。
2、想按原来的方式加个行走动图，发现加了看不见，只能合并了最下面的3个单元，图片才显示了。{:4_173:}

红影 发表于 2022-10-16 10:29

虽然对网格布局有点不适应，但用起来还是挺好用的{:4_173:}
谢谢黑黑的耐心教学和讲解{:4_187:}

小辣椒 发表于 2022-10-16 10:33

红影 发表于 2022-10-16 10:27
学习体会：1 用这个圆形播放器因为没有鼠标点上去移动的问题，貌似更简单点。
2、想按原来的方式加个行走 ...
亲爱的，这个帅哥走路在思考问题呢{:4_189:}

小辣椒 发表于 2022-10-16 10:38

哦，手机可能视频看不见，晚上可以到家了，电脑欣赏，亲爱的速度的，这么快网络布局做出来了{:4_178:}

红影 发表于 2022-10-16 10:59

小辣椒 发表于 2022-10-16 10:33
亲爱的，这个帅哥走路在思考问题呢

他在从全世界路过又路过地玩呢{:4_189:}

红影 发表于 2022-10-16 11:00

小辣椒 发表于 2022-10-16 10:38
哦，手机可能视频看不见，晚上可以到家了，电脑欣赏，亲爱的速度的，这么快网络布局做出来了

还不知道对不对呢，其他的都从黑黑的帖子里套的，那个走路我还真吃不准是不是应该设置位置和这样设位置对不对。

红影 发表于 2022-10-16 11:01

可以在网格里设置图片移动么，参照尺寸是按父框的还是按格网的？@马黑黑{:4_204:}

梦油 发表于 2022-10-16 11:29

图中行走的人做得惟妙惟肖，比上次那个好多了。

马黑黑 发表于 2022-10-16 11:50

红影 发表于 2022-10-16 11:01
可以在网格里设置图片移动么，参照尺寸是按父框的还是按格网的？@马黑黑
如果对象的活动范围在网格区域里（包含合并的），就以网格里的区域作为参照；如果对象的运动范围超越指定的网格区域，还是建议把运动对象当做帖子父元素的直系子元素处理，所参照的当然就是帖子父元素。

马黑黑 发表于 2022-10-16 12:42

红影 发表于 2022-10-16 10:27
学习体会：1 用这个圆形播放器因为没有鼠标点上去移动的问题，貌似更简单点。
2、想按原来的方式加个行走 ...

你可以提升运动对象的 z-index 值试试

红影 发表于 2022-10-16 15:31

梦油 发表于 2022-10-16 11:29
图中行走的人做得惟妙惟肖，比上次那个好多了。

这个做起来比上次的容易得多，只是这个是用的动图，图图比上次那个好{:4_173:}

红影 发表于 2022-10-16 15:31

马黑黑 发表于 2022-10-16 12:42
你可以提升运动对象的 z-index 值试试

这个试过的，没用呢{:4_173:}

红影 发表于 2022-10-16 15:32

马黑黑 发表于 2022-10-16 11:50
如果对象的活动范围在网格区域里（包含合并的），就以网格里的区域作为参照；如果对象的运动范围超越指定 ...

哦哦，明白了，谢谢黑黑解惑{:4_187:}

马黑黑 发表于 2022-10-16 16:22

红影 发表于 2022-10-16 15:32
哦哦，明白了，谢谢黑黑解惑

新知识的加入，一时半会儿会发蒙，随后慢慢会清晰的。

马黑黑 发表于 2022-10-16 16:25

红影 发表于 2022-10-16 15:31
这个试过的，没用呢

一般来说，网格只是划分区域，它们自身不会遮挡其它活动的元素，仅当合并后的单元格有了自己的元素，这些元素才会遮挡已有的元素，这时可提升被遮挡元素的z-index值。这时原理。如果这么做了没有效果，那么，可以认定是你的代码有问题。

梦油 发表于 2022-10-16 16:39

红影 发表于 2022-10-16 15:31
这个做起来比上次的容易得多，只是这个是用的动图，图图比上次那个好

是的，影子朋友，这个动图挺好看的，走路姿势也很潇洒。

红影 发表于 2022-10-16 23:24

马黑黑 发表于 2022-10-16 16:22
新知识的加入，一时半会儿会发蒙，随后慢慢会清晰的。

的确头一次接触呢{:4_173:}

红影 发表于 2022-10-16 23:25

马黑黑 发表于 2022-10-16 16:25
一般来说，网格只是划分区域，它们自身不会遮挡其它活动的元素，仅当合并后的单元格有了自己的元素，这些 ...

没东西时就不遮挡，跟excel差不多呢。

红影 发表于 2022-10-16 23:26

梦油 发表于 2022-10-16 16:39
是的，影子朋友，这个动图挺好看的，走路姿势也很潇洒。

别的帖子里用过，这次使用都不用上传了{:4_173:}

查看完整版本: 全世界谁倾听你（学习黑黑grid网格布局）