马黑黑 发表于 2025-12-1 19:22

Last Reunion 小播构图演示

<style>
        .ma {
                position: relative;
                width: 200px;
                height: 200px;
                border: 1px solid gray;
                display: grid;
                place-items: center;
                margin: 200px auto;
        }
        .ma:hover .son { top: -50%; }
        .son {
                position: absolute;
                width: 50%;
                height: 100%;
                background: green;
        }
        .son::after {
                position: absolute;
                content: '';
                top: 100%;
                width: 100%;
                height: 100%;
                background: lightgreen;
                transform: scale(1, -1);
        }
</style>

<div class="ma">
        <div class="son"></div>
</div>

马黑黑 发表于 2025-12-1 19:34

一楼，小播容器里面的子元素自带一个 ::after 伪元素，其中：小播容器强制子元素绝对居中，其内子元素宽度为容器宽度的一半、高度与容器元素一致；子元素的 ::after 伪元素宽高和子元素一致。这样，默认情况下，子元素+伪元素整体高度为小播容器高度的一倍，长出的部分因为伪元素的CSS设置都是伪元素的高度，这是，如果需要“子元素+伪元素”整体的中心点与小播元素的中心点重合则需要子元素上提 50% 即 top: -50%。


一楼的效果演示，开始时浅绿色的伪元素完全暴露在容器元素之外，鼠标指针移至容器子元素整体会上提 50%（top: -50%），子元素整体的中心点与容器元素中心点叠加在一起。

而子元素如果需要旋转，则应设在水平方向50%、垂直方向100%处，这样如果添加多个子元素并绕圈静态旋转它们才成为一个整体的构图。

一楼代码：
<style>
        .ma {
                position: relative;
                width: 200px;
                height: 200px;
                border: 1px solid gray;
                display: grid;
                place-items: center;
                margin: 200px auto;
        }
        .ma:hover .son { top: -50%; }
        .son {
                position: absolute;
                width: 50%;
                height: 100%;
                background: green;
        }
        .son::after {
                position: absolute;
                content: '';
                top: 100%;
                width: 100%;
                height: 100%;
                background: lightgreen;
                transform: scale(1, -1);
        }
</style>

<div class="ma">
        <div class="son"></div>
</div>

霜染枫丹 发表于 2025-12-1 20:30

问好马老师，这个代码有用，我收藏了，感谢分享，冬祺！{:4_204:}

马黑黑 发表于 2025-12-1 20:39

霜染枫丹 发表于 2025-12-1 20:30
问好马老师，这个代码有用，我收藏了，感谢分享，冬祺！

代码无关紧要，主要是理解其中的原理

杨帆 发表于 2025-12-1 20:50

厉害，这不一会儿就写出了Last Reunion 小播构图的动态演示图及解读，谢谢马老师{:4_180:}

小辣椒 发表于 2025-12-1 20:50

这个 top: -50%的道理算看懂了{:4_173:}

霜染枫丹 发表于 2025-12-1 20:55

本帖最后由 霜染枫丹 于 2025-12-1 20:57 编辑

马黑黑 发表于 2025-12-1 20:39
代码无关紧要，主要是理解其中的原理
您给我的那个提示需要“导入另一个模块 lrc2HC.js，然后使用函数 lrc2HC() 将原生歌词转换为花朝格式的数组”我基本理解了，TZ库的 `tz.lrc()` 方法会自动处理 歌词渲染、高亮、滚动，不需要自己写逻辑；等理解了以后，才恍然大悟，不必在您给的没有歌词发代码上去添加，前面那个同类型的您都做好了，哈哈~~挫败感很有一点呢，就用您做好的不就有歌词显示了吗。但收获就是我知道了是您写了一套不是标准LRC格式TZ库专用的二维数组格式，这些烂名词我之前都不知道，现在知道了理解了很高兴。谢谢马老师

霜染枫丹 发表于 2025-12-1 21:01

马黑黑 发表于 2025-12-1 20:39
代码无关紧要，主要是理解其中的原理

我现在有点理解您的这句话了，我也不需要做什么模块，把常用的跟着您学会了，理解了，就会能选择适合内容表达的模式了。这感觉挺好，理解的慢，好在有时间{:4_204:}{:4_190:}

杨帆 发表于 2025-12-1 21:32

马黑黑 发表于 2025-12-1 20:39
代码无关紧要，主要是理解其中的原理

在子元素及其伪元素形成一个“图”之后，

一般情况下，可否运用rotates指令，让它绕其中心（容器中心）静态旋转形成一个“整体的构图”呢？

请老师举例说明（非tzMaker背景下）{:4_191:}

马黑黑 发表于 2025-12-1 21:32

霜染枫丹 发表于 2025-12-1 21:01
我现在有点理解您的这句话了，我也不需要做什么模块，把常用的跟着您学会了，理解了，就会能选择适合内容 ...

过程不论快慢，有感觉就好{:4_170:}

马黑黑 发表于 2025-12-1 21:39

霜染枫丹 发表于 2025-12-1 20:55
您给我的那个提示需要“导入另一个模块 lrc2HC.js，然后使用函数 lrc2HC() 将原生歌词转换为花朝格式的数 ...

{:4_190:}

马黑黑 发表于 2025-12-1 21:41

小辣椒 发表于 2025-12-1 20:50
这个 top: -50%的道理算看懂了

你的师傅没交过你这个吗

马黑黑 发表于 2025-12-1 21:47

杨帆 发表于 2025-12-1 21:32
在子元素及其伪元素形成一个“图”之后，

一般情况下，可否运用rotates指令，让它绕其中心（容器中心 ...

可以。tzMaker只不过是封装了方法。这里面涉及到的数学应用主要是计算N个子元素每一个应旋转多少角度，CSS应用是 transform 的 rotate 以及 background 技巧，JS应用是循环语句（for，forEach、while等）以及对HTML的相关操作。

杨帆 发表于 2025-12-1 21:58

马黑黑 发表于 2025-12-1 21:47
可以。tzMaker只不过是封装了方法。这里面涉及到的数学应用主要是计算N个子元素每一个应旋转多少角度，CS ...

谢谢老师，有点明白了，终于又解决一个疑难点{:4_180:}

马黑黑 发表于 2025-12-1 23:24

杨帆 发表于 2025-12-1 21:58
谢谢老师，有点明白了，终于又解决一个疑难点

具体实现细节自己尝试，反正此前类似的例子不少

杨帆 发表于 2025-12-2 00:58

马黑黑 发表于 2025-12-1 23:24
具体实现细节自己尝试，反正此前类似的例子不少

是的，我找找看，谢谢老师{:4_190:}

马黑黑 发表于 2025-12-2 07:49

杨帆 发表于 2025-12-2 00:58
是的，我找找看，谢谢老师

自己动手实现过，而不是老师套用现成的，对长进有好处

杨帆 发表于 2025-12-2 11:28

马黑黑 发表于 2025-12-2 07:49
自己动手实现过，而不是老师套用现成的，对长进有好处

是的，动手实践，自主探索是学习的必要方式{:4_185:}

杨帆 发表于 2025-12-2 13:39

马黑黑 发表于 2025-12-1 23:24
具体实现细节自己尝试，反正此前类似的例子不少

看了老师此前的一些帖子

有关rotates指令的应用大都是基于svgdr、tzMaker的背景

请老师推荐一下其它封装或常态下的应用例子，由衷感谢{:4_180:}
页: [1]
查看完整版本: Last Reunion 小播构图演示